Struktura treści dokumentów HTML 5

04 czerwca 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

W HTML 5 struktura dokumentów jest nieco inna niż we wcześniejszych wersjach języka. Wszystko można znaleźć w specyfikacji! W tym artykule wyjaśnimy Ci, co to jest struktura dokumentu, jak ją tworzyć oraz dlaczego powinno się do niej przykładać szczególną uwagę.

Czym jest struktura dokumentu

Jest to schemat utworzony za pomocą nagłówków, tytułów formularzy, tytułów tabel oraz innych elementów używanych do konstruowania ogólnych ram plików HTML. Aplikacja kliencka może wykorzystać te informacje np. do utworzenia spisu treści. Spis ten mógłby następnie zostać użyty przez technologię pomocniczą, aby pomóc użytkownikowi w przeglądaniu stron albo do analizy np. przez wyszukiwarkę, aby poprawić wyniki wyszukiwania.

Algorytmy analizujące strukturę dokumentów zostały jasno opisane w specyfikacji HTML 5, a ponieważ wszystkie przeglądarki i technologie pomocnicze ogólnie dobrze ze sobą współpracują, zyska na tym dostępność (więcej na temat obsługi piszę dalej). Zanim zobaczymy, jak działa ten nowy algorytm, sprawdzimy jak było wcześniej.

Struktura dokumentu w języku HTML 4

Tworzenie struktury dokumentu przed HTML 5 było proste. Do dyspozycji miało się sześć elementów nagłówków od <h1> do <h6>. Nagłówki z niższymi cyframi miały większą rangę niż te z wyższymi— np. <h1> miał większa rangę od <h2>:

<h1>Moja świetna strona</h1>
<h2>O mnie</h2>
<p>Jestem mężczyzną żyjącym w cudownym świecie. Ach te opowiadania...</p>
<h3>Czym się zajmuję</h3>
<p>Sprzedaję przedsiębiorstwo — zarządzanie farmą mrówek.</p>
<h2>Kontakt</h2>
<p>Wypowiedz me nazwisko, a przybędę.</p>

Powyższy przykład ma następującą strukturę:

  1. Moja świetna strona
    1. O mnie
      1. Czym się zajmuję
    2. Kontakt

Nagłówki <h2> są dziećmi nagłówków <h1>, natomiast nagłówek „O mnie” ma podnagłówek <h3>. Są to proste, ale restrykcyjne zasady, które zmuszają do przemyślenia struktury poziomów nagłówków, których do dyspozycji jest tylko sześć. Ograniczona liczba nagłówków nie stanowi wielkiego problemu, ale dla miłośników tych elementów może być to niewygodne (o rety!).

Tak samo jest w języku HTML 5. Powyższy przykład utworzy taką samą strukturę, ale będzie można pójść nawet dalej używając elementów strukturalnych.

Elementy strukturalne

Pomysły dotyczące struktury dokumentów HTML 5 są starsze niż się wydaje! W 1991 roku Tim Berners-Lee wysłał do listy mailingowej www-talk (dzięki Dr Oli za wygrzebanie tego) propozycję czegoś bardzo podobnego do tego, co zostało przedstawione w tym artykule.

Elementy strukturalne <section>, <article>, <aside> i <nav>mogą pomóc w stworzeniu bardziej logicznej struktury w budowie dokumentu. Zaszalejmy i przepiszmy powyższy przykład stosując tylko nagłówki <h1>:

<h1>Moja świetna strona</h1>
<h1>O mnie</h1>
<p>Jestem mężczyzną żyjącym w cudownym świecie. Ach te opowiadania...</</p>
<h1>Czym się zajmuję </h1>
<p>Sprzedaję przedsiębiorstwo-zarządzanie farmą mrówek.</p>
<h1>Kontakt</h1>
<p>Wypowiedz me nazwisko, a przybędę.</p>

Teraz struktura dokumentu będzie wyglądała następująco:

  1. Moja świetna strona
  2. O mnie
  3. Czym się zajmuję
  4. Kontakt

Z pewnością nie jest to dobre — straciliśmy strukturę naszego dokumentu! Używając elementów strukturalnych możemy przywrócić jej wcześniejszy wygląd bez zmiany tych nagłówków. Sadzę, że element <section> będzie odpowiedni w tym przypadku:

<h1>Moja świetna strona</h1>
<section>
  <h1>O mnie </h1>
  <p>Jestem mężczyzną żyjącym w cudownym świecie. Ach te opowiadania...</p>
  <section>
    <h1>Czym się zajmuję</h1>
    <p>Sprzedaję przedsiębiorstwo-zarządzanie farmą mrówek.</p>
  </section>
</section>
<section>
  <h1>Kontakt</h1>
  <p>Wypowiedz me nazwisko, a przybędę.</p>
</section>

Sprawdź strukturę, a zobaczysz, że wszystko wróciło do normy:

  1. Moja świetna strona
    1. O mnie
      1. Czym się zajmuję
    2. Kontakt

Ale dlaczego tak się dzieje? Elementy strukturalne działają tak, jak sugeruje ich nazwa: określają sekcje elementu rodzica. O tych sekcjach można myśleć jak o elementach następnika, których nagłówki podlegają nagłówkom rodzica, bez względu na ich rangę. Oto przykład:

<h2>Elementy article w portalu html5 Doctor</h2>
<article>
  <h1>Element strukturalny</h1>
  <p>My doktorzy jesteśmy grupą kumpli używających HTML 5 i piszących, jak to robimy...</p>
</article>
<article>
  <h1>Element article</h1>
  <p>Omówiliśmy wiele elementów występujących w html5 Doctor...</p>
</article>

Chociaż elementy <article> zawierają nagłówki <h1>, to struktura będzie wyglądała następująco:

  1. Elementy article w portalu HTML5 Doctor
    1. Element strukturalny
    2. Element article

Jednocześnie specyfika działania programów do wyświetlania struktury dokumentów sprawia, że poniższe przykłady (nie pokazujące najlepszego sposobu użycia nagłówków) utworzą taką samą strukturę, jak podana powyżej:

<h1>Elementy article w portalu html5 Doctor</h1>
<article>
  <h3> Element strukturalny </h3>
</article>
<article>
  <h3> Element article </h3>
</article>
<h2>Elementy article w portalu html5 Doctor</h2>
<article>
  <h2>Element strukturalny</h2>
</article>
<article>
  <h2> Element article </h2>
</article>
<h6>Elementy article w portalu html5 Doctor</h6>
<article>
  <h1>Element strukturalny</h1>
</article>
<article>
  <h1>Element article</h1>
</article>

Oto co zaleca specyfikacja przy dobieraniu nagłówków:

„Sekcje mogą zawierać nagłówki dowolnej rangi, jednak zaleca się, aby twórcy stron używali wyłącznie nagłówków <h1> albo nagłówków o randze odpowiedniej dla poziomu zagnieżdżenia zawierającej je sekcji”.

— specyfikacja WHATWG HTML5

Należy także sprawdzić jak działają nagłówki o różnych rangach, kiedy występują jako bezpośredni następnik elementu strukturalnego. W wersjach HTML-a starszych od 5 było tak:

„Pierwszy element nagłówka w sekcji reprezentuje nagłówek dla tej sekcji. Następne nagłówki o tej samej lub wyższej randze rozpoczynają nowe sekcje, natomiast nagłówki o niższej randze rozpoczynają podsekcje poprzedniej sekcji. W każdym przypadku element nagłówek reprezentuje początek sekcji.”

— specyfikacja WHATWG HTML5

Niezatytułowane sekcje

Elementy strukturalne, które nie zawierają elementu nagłówka będziemy nazywać „niezatytułowanymi” i będą one oznaczane słowem „Untitled”

<aside>
  <section>
    <h2>Twitter</h2>
  </section>
  <section>
    <h2>najnowsze komentarze</h2>
  </section>
</aside>

Struktura tego dokumentu przedstawia się następująco:

  1. Untitled element aside
    1. Twitter
    2. Najnowsze komentarze

Edytor oznaczył element sekcji jako „niezatytułowany”, co ma stanowić ostrzeżenie dla twórcy dokumentu a zarazem pozwolić zachować logiczną strukturę dokumentu. Mając na uwadze dostępność dokumentów, zalecamy, aby wszystkie elementy strukturalne nawet takie jak<aside> i <nav> zawierały nagłówek, tak jak zostało to pokazane w przykładzie podanym poniżej. Jeżeli chcesz, aby te nagłówki pozostały niewidoczne, zawsze możesz je ukryć za pomocą kaskadowych arkuszy stylów (CSS).

<aside>
  <h1>To co mówisz</h1>
  <section>
    <h2>Twitter</h2>
  </section>
  <section>
    <h2>Najnowsze komentarze</h2>
  </section>
</aside>

Pamiętaj, że elementów takich jak <section> nie powinno używać się arbitralnie. Więcej informacji o tym elemencie znajduje się w artykule Element <section>.

Wpływ elementu <hgroup> na strukturę dokumentu

Dr Richard Clark w artykule Element <hgroup>napisał, że element <hgroup> dotyczy całej struktury dokumentu. Programy nakreślające strukturę dokumentów ignorują nagłówki znajdujące się w elementach <hgroup> z wyjątkiem tego o najwyższej randze. Na przykład, jeżeli element <hgroup> zawiera nagłówki <h2>, <h3> oraz <h4>, to w strukturze dokumentu jako tytuł sekcji zostanie uwzględniony tylko nagłówek <h2>. Na przykład dla poniższego kodu:

<article>
  <hgroup>
    <h1>Wstaw tutaj tytuł</h1>
    <h2>Podtytuł artykułu</h2>
  </hgroup>
  <p>Lorem Ipsum dolor set amet</p>
</article>

zostanie utworzona następująca struktura dokumentu:

  1. Wstaw tutaj tytuł

W trakcie pisania artykułu okazało się, że przyszłość elementu <hgroup> jest trochę niepewna. Ostatnio był on usuwany i przywracany w zaleceniach specyfikacji dotyczących języka HTML 5, a obecnie proponuje się jego usunięcie lub zastąpienie czymś innym. Z pewnością opublikujemy w naszym serwisie informacje o ewentualnych zmianach dotyczących tego tematu.

Elementy główne sekcji

Wprowadzone w HTML 5 elementy główne sekcji, wydzielają pewne części dokumentów jako osobne struktury. Nagłówki znajdujące się w tych elementach nie zostaną pokazane w głównej strukturze dokumentu, tam gdzie korzeniem elementu strukturalnego jest element <body>.

Inne elementy główne sekcji to<blockquote>, <figure>, <details>, <fieldset> oraz <td>. Każdy z tych elementów jest potomkiem elementu <body>, jednak ich nagłówki nie są uwzględniane w głównej strukturze, ponieważ tworzą własne odrębne struktury.

<h1>Początek struktury dokumentu</h1>

<section>
  <h2>Nagłówek w strukturze dokumentu</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
  <h2>Inny nagłówek w strukturze dokumentu</h2>
  <p>Lorem ipsum dolor sit amet...</p>
  <blockquote>
    <h1>Ten nagłówek blokowy będzie niewidoczny w strukturze dokumentu</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </blockquote>
</section>

Z powyższego kodu powstanie następująca struktura. Zauważ, że brakuje nagłówka cytatu blokowego <blockquote>, który został wydzielony:

  1. Początek struktury dokumentu
    1. Nagłówek w strukturze dokumentu
    2. Inny nagłówek w strukturze dokumentu

Struktura dokumentu w rzeczywistym świecie

Niestety na razie trudno znaleźć jakiekolwiek informacje o sposobie działania algorytmów analizujących strukturę dokumentów. Twórcy wyszukiwarek internetowych cały czas eksperymentują z tymi algorytmami, ale o ile nam wiadomo jak na razie nagłówki są traktowane tak samo, jak kiedyś. Nie zostaniesz ukarany za ich użycie nawet, gdy będzie kilka elementów nagłówka <h1> (co zawsze będzie w porządku jeżeli chodzi o specyfikację). Więcej informacji na temat tego, jak języka HTML 5 jest traktowany przez wyszukiwarki znajdziesz w artykule pt . Optymalizacja dokumentów HTML 5 pod kątem wyszukiwarek.

W czasie pisania tego artykułu czytniki ekranu nie przestrzegają nowych zasad strukturalizowania dokumentów, przez co wielokrotne użycie elementów nagłówka <h1> może dezorientować korzystających z niego użytkowników. Najlepiej jest logicznie używać nagłówków <h1><h6> przynajmniej do czasu, gdy nowe techniki zostaną szerzej zaadaptowane.

Jeżeli chodzi o przeglądarki to najnowsze wersje Firefoksa i Chrome mają wbudowane style obsługujące strukturę dokumentów HTML 5. Sprawdź ten przykładowy dokument w najnowszych wersjach tych przeglądarek.

Podsumowanie

Pomimo słabej obsługi nowych zasad strukturalizacji dokumentów, warto już teraz zadbać o strukturę swoich dokumentów tak, aby być przygotowanym na przyszłość.

Zapoznaj się dokładnie z elementami strukturalnymi i elementami głównymi sekcji oraz sprawdź, jaki wpływ mają one na strukturę dokumentu. Pisząc kod nowego serwisu pomyśl, jak możesz wykorzystać nowe algorytmy do swoich celów. Gdy techniki te zaczną być lepiej obsługiwane, to utworzone przez ciebie strony według nowych zaleceń będą łatwiej dostępne. Dodaj poniżej swoją opinię, co o tym sądzisz.

Narzędzia programistyczne

Aby sprawdzić strukturę swoich dokumentów, musisz mieć odpowiedni program. Oto kilka propozycji:

  • h5o— napisana w języku JavaScript implementacja programu strukturalizującego, dostępna jako skryptozakładka, rozszerzenie lub zminimalizowany plik JavaScript
  • Rozszerzenie do przeglądarki Opera
  • Narzędzie internetowe — można wysłać plik albo podać adres URL lub źródło HTML dokumentu do analizy (narzędzie to może nie być już ulepszane).

Autor: Mike Robinson

Źródło: http://html5doctor.com/outlines/

Tłumaczenie: Mariusz Zdziech

Treść tej strony dostępna jest na zasadach licencji CC BY-NC 2.0 UK

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *