• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ocena kodu html

Object Storage Arubacloud
0 głosów
343 wizyt
pytanie zadane 17 lipca 2017 w HTML i CSS przez Radekol Bywalec (2,880 p.)
Chciałbym abyście ocenili mi skrypt pod kątem semantyki i poprawności kodu. Jestem jeszcze niedoświadczony w pisaniu stron, więc jest tam zapewne pełno drobnostek i niepotrzebnych pierdół.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>jakis Tytul</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="wrapper">
    <header>
        <h2 class="logo">Jakies logo</h2>
        <p>jakis chwytliwy opisik</p>
        <ul>
            <li><a href="">kategorie</a></li>
            <li><a href="">artykuły</a></li>
            <li><a href="">książki</a></li>
            <li><a href="">kontakt</a></li>
        </ul>
    </header>
    <section>
    <div id="slider"></div>
        <div class="how-to-description">Et quorum despicationes in ea multos cillum ea excepteur ab quae ingeniis iis 
            adipisicing ubi anim si fabulas ab ipsum. Deserunt a offendit, mandaremus 
            reprehenderit ubi consequat, esse mandaremus firmissimum si fabulas multos illum 
            senserit legam. Noster aut mentitum, quem expetendis singulis, se quem illum sed 
            nescius eu quamquam amet quid nescius illum, ad quis tractavissent ita magna 
            deserunt exercitation, sint hic de labore probant te ubi laboris instituendarum. 
            Arbitror si lorem laboris, cillum nostrud a excepteur.</div>
    </section>
    <section class="definition-list">
    <dl>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
        <dt>topic</dt>
        <dd>explenation</dd>
    </dl> 
    </section>
    <ul class="subpages-links">
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li><a href="">6</a></li>
        <li><a href="">7</a></li>
    </ul>
    <footer>
        <div class="social-media">
            <div class="instagram">instagram</div>
            <div class="facebook">facebook</div>
        </div>
        <p>Copyright &copy</p>
        <p class="email">myEmail@gmail.com</p>
    </footer>
  </main>
<script src="script.js"></script>
</body>
</html>

 

4 odpowiedzi

+1 głos
odpowiedź 17 lipca 2017 przez Comandeer Guru (600,810 p.)
wybrane 18 lipca 2017 przez Radekol
 
Najlepsza

main jest od głównej treści, więc nagłówek i stopka strony powinny być poza tym elementem

Sekcje bez nagłówków nie mają sensu.

Gdzie jest h1?

Na stronie są dwa elementy nawigacyjne (menu w nagłówku i paginacja) i można je spokojnie umieścić w nav.

Czemu socjalki są w divach?

+2 głosów
odpowiedź 17 lipca 2017 przez szustka124 Gaduła (4,380 p.)
Witam

Element MAIN służy do oznaczenia unikalnej zawartości na danej podstronie. Na pewno nie jest nią górne menu ani stopka. Nie powinien zawierać w sobie powtarzalnych elementów.

Nie użyłeś elementu NAV do określenia nawigacji witryny.

Może to tylko przypadek, ale treść postu powinna znajdować się poza blokiem z kodem.
+2 głosów
odpowiedź 17 lipca 2017 przez gremlin Dyskutant (7,600 p.)

<main> użyłbym raczej w tym przypadku nie jako kontener dla wszystkich elementów w body tylko wyłączając z niego header i footer, zamiast zwykłej listy z linkami w header możesz użyć elementu <nav>

Coś w tym stylu:

<header>
   <h1>Logo / tytuł strony</h1>
   <p>chwytliwy opisik</p>
</header>
<nav>
   <ul>
   </ul>
</nav>
<main>

</main>
<footer>
</footer>
+1 głos
odpowiedź 17 lipca 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

Zamiast

<section>
    <div id="slider"></div>
        <div class="how-to-description">Et quorum despicationes in ea multos cillum ea excepteur ab quae ingeniis iis 
            adipisicing ubi anim si fabulas ab ipsum. Deserunt a offendit, mandaremus 
            reprehenderit ubi consequat, esse mandaremus firmissimum si fabulas multos illum 
            senserit legam. Noster aut mentitum, quem expetendis singulis, se quem illum sed 
            nescius eu quamquam amet quid nescius illum, ad quis tractavissent ita magna 
            deserunt exercitation, sint hic de labore probant te ubi laboris instituendarum. 
            Arbitror si lorem laboris, cillum nostrud a excepteur.</div>
    </section>

Mozesz dac

<section>
    <div id="slider"></div>
        <articleclass="how-to-description">
<p>
Et quorum despicationes in ea multos cillum ea excepteur ab quae ingeniis iis 
            adipisicing ubi anim si fabulas ab ipsum. Deserunt a offendit, mandaremus 
            reprehenderit ubi consequat, esse mandaremus firmissimum si fabulas multos illum 
            senserit legam. Noster aut mentitum, quem expetendis singulis, se quem illum sed 
            nescius eu quamquam amet quid nescius illum, ad quis tractavissent ita magna 
            deserunt exercitation, sint hic de labore probant te ubi laboris instituendarum. 
            Arbitror si lorem laboris, cillum nostrud a excepteur.
</p>
</article>
    </section>

Generalnie ja wiem ze divy jakby same sie uzywaja ale unikaj ich. Nie maja zadnej wartosci semantycznej

komentarz 17 lipca 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)
Poza tym sprawdz sobie zawsze tutaj

https://validator.w3.org/nu/#textarea
komentarz 17 lipca 2017 przez Comandeer Guru (600,810 p.)

I co w tym wypadku daje zamiana na article skoro nie ma nawet nagłówka?

komentarz 18 lipca 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)
Dlatego polecilem validator. Zaraz sie o wszystko bedzie darl

Podobne pytania

+1 głos
1 odpowiedź 324 wizyt
pytanie zadane 6 lutego 2019 w JavaScript przez Marchiew Dyskutant (7,690 p.)
0 głosów
1 odpowiedź 468 wizyt
+3 głosów
2 odpowiedzi 303 wizyt

92,555 zapytań

141,402 odpowiedzi

319,553 komentarzy

61,939 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...