Semantyka HTML5 - H1 lub H2 dla tytułów ARTYKUŁÓW w SEKCJI


10

Rozumiem (na podstawie tego rozdziału Zanurz się w HTML5: http://goo.gl/9zliD ), że można uznać za semantycznie właściwe użycie tagów H1 w wielu obszarach strony, jako metody ustalania najważniejszego tytułu dla tej konkretnej treści.

Jeśli używam tej metodologii i mam SEKCJĘ, do której przypisałem H1 „artykułów”, czy powinienem używać H1 lub H2, aby zdefiniować tytuły artykułów w tej sekcji? Jest to dla mnie trochę mylące, ponieważ tytuły artykułów są najważniejszym nagłówkiem ich ARTYKUŁU, ale są także „dziećmi” tytułu SEKCJI.

Przykładowy kod:

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>

Słyszałem mieszane recenzje serii Dive into ... Z tego, co rozumiem, może nie być najlepszym odniesieniem.
the_e

4
@espais: Gdzie słyszałeś te recenzje? Czy masz link do jednego z nich negatywnych?
Lèse majesté

@ Lèse: W tym momencie nie mogę tego przypisać niczego więcej niż tylko herezji. Jestem pewien, że widziałem go kiedyś na jednej ze stron SE ... ale teraz nie mam żadnych źródeł.
the_e

1
@espais dziwne, ponieważ wszystkie odnośniki, które mogę znaleźć w Webmasterach i SO, są nie tylko pozytywne, ale zazwyczaj bardzo pozytywne. stackoverflow.com/search?q=%22dive+into+html5%22 , webmasters.stackexchange.com/search?q=%22dive+into+html5%22
Yahel

@ Lèse: tak, ponieważ naprawdę nie mogę wykonać kopii zapasowej mojego komentarza, z szacunkiem go
wycofam

Odpowiedzi:


7

Pielgrzym nie jest sam w walce.

Według HTML5 Jeremy'ego Keitha dla projektantów stron internetowych można używać wielu <h1>s w dokumencie bez rujnowania podsumowania dokumentu, o ile są one zagnieżdżone w dyskretnych semantycznych znacznikach przekrojowych.

Cytowanie bezpośrednio z eBooka (który kupiłem od iBooks)

Jak dotąd nowa zawartość przekroju nie daje nam wiele więcej niż to, co moglibyśmy zrobić z poprzednimi wersjami HTML. Oto kicker: W HTML5 każdy fragment zawartości przekroju ma swój własny, niezależny kontur. Oznacza to, że nie musisz śledzić, jakiego poziomu nagłówka powinieneś używać - możesz po prostu zacząć od h1 za każdym razem:

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(Przykładowy kod również z książki, strona 73)


@Matt nie ma problemu. Nie oznacza to, że może to nie być problem. Dwa przychodzą na myśl. Po pierwsze, może to być nieco dziwne dla CSS, ale jest możliwe do zarządzania. Ale co ważniejsze, może to być niebezpieczne dla SEO, ponieważ istnieje dość dobrze ugruntowana tradycyjna mądrość, że <h1>na stronie powinna być tylko jedna , a wszystko inne osłabia zdolność robotów do odszyfrowania Twojej witryny. Ale nie jestem guru SEO, więc nie mogę tego komentować.
Yahel

2

Zwykle zgadzam się z interpretacją Marka Pilgrima . Jeśli zamykasz artykuł w articleelemencie, możesz zacząć od nowa z h1nagłówkiem artykułu.

W specyfikacji HTML5 articlepowinny być traktowane jako niezależna, samodzielna część strony. Powinieneś być w stanie przesadzić articleelement tak, jak jest na innej stronie, bez ponownego formatowania nagłówków.

Jeśli nagłówki artykułów musiałyby być kontynuacją hierarchii nagłówków dokumentów, to kiedy upuścisz articlebezpośrednio pod bodytagiem, musisz przejść do h1, ale jeśli upuściłeś go w zagnieżdżonych sekcjach, musisz zmienić go na h3/ h4/ h5/ itp., w zależności od tego, gdzie je umieścisz.

W rzeczywistości za każdym razem, gdy tworzysz nowy sectionlub articlepowinieneś powrócić do niego h1, ponieważ następujące są identyczne:

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

i:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

Na marginesie, jeśli twój nagłówek jest tylko elementem nagłówka (np. h1) I niczym więcej, nie musisz zawijać go w headerelement.


Dzięki Lèse. Czy mógłbyś podać odniesienie do swojej notatki na temat właściwego użycia elementu „header”? Chciałbym przeczytać więcej na ten temat.
Matt

@Matt: Opieram to głównie na sformułowaniu specyfikacji HTML5, która nazywa header„grupą pomocy wprowadzających lub nawigacyjnych”. To i fakt, że specyfikacje h1- h6nie wymagają, aby były zagnieżdżone w header(i zawierają wiele przykładów z nich używanych bezpośrednio w części, której są częścią) sugerują mi, że jest to niepotrzebne. Ten sentyment odzwierciedlają zarówno Oli Studholme, jak i Remy Sharp z HTML5 Doctor.
Lèse majesté

0

Chociaż tytuły artykułów na stronie są ważne, zasadniczo nagłówek strony najwyższego poziomu określa treść strony. Czasami jest to nazwa artykułu, a czasem, jak pokazujesz, tytuł listy artykułów.

<h1>My Very Interesting Articles</h1>

Ten nagłówek definiuje całą stronę jako „interesujące artykuły”. Następnie każdy artykuł jest wymieniony na liście, ale ma niższy poziom nagłówka.


-1

Oficjalna odpowiedź w3schools na użycie tagów nagłówka na stronie jest następująca: Nagłówki H1 powinny być używane jako nagłówki główne, następnie nagłówki H2, następnie mniej ważne nagłówki H3 i tak dalej.


5
W W3Schools nie ma nic „oficjalnego”. Jest to myląca nazwa, ponieważ nie są w żaden sposób powiązani ani wspierani przez W3C.
Lèse majesté

rzeczywiście, zobacz w3fools.com, aby uzyskać szczegółowe informacje na temat tego, jak okropne jest W3Schools.
Yahel

Myślałem, że to pytanie i witryna będzie miała kilku bardziej konstruktywnych użytkowników. Wydajecie się trochę wyniosli.
Keith Groben

2
Nie ma to nic wspólnego z wyniosłością i nie ma nic wspólnego z chęcią bycia wrednym, a wszystko z chęcią dostrzeżenia dezinformacji takiej jak ta stłumiona. Zbyt wiele osób uważa, że ​​w3schools jest wiarygodnym, dokładnym źródłem, a jego niezwykle szkodliwe dla jakości tworzenia stron internetowych. Istotą witryn wymiany stosów jest dostarczanie dokładnych, wysokiej jakości odpowiedzi oraz wypychanie i korygowanie odpowiedzi, które są niedokładne, niepoprawne lub mylące.
Yahel

1
W rzeczywistości twoja odpowiedź całkowicie zignorowała moje pytanie i odpowiedziała na pytanie, które nie zostało zadane. Moje pytanie jasno brzmiało: „Jeśli używam tej metodologii ...” Ta część była nawet pogrubiona, aby upewnić się, że pytanie jest jasne. Zakładam, że jest to najbardziej prawdopodobny powód odrzucenia twojej odpowiedzi.
Matt
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.