10 czerwca 2013 · 0 komentarzy

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (głosów: 2, średnia ocena: 5,00)
Loading...Loading...

Nagłówki w HTML5

Wróćmy do naszej przykładowej strony. A konkretnie spojrzymy na znajdujące się na niej nagłówki:

<div id="header">
  <h1>Mój blog</h1>
  <p class="tagline">Włożono wiele wysiłku, aby robienie tego nie wymagało dużo pracy.</p>
</div>
…
<div class="entry">
  <h2>Dzień wyjazdu</h2>
</div>
…
<div class="entry">
  <h2>Jadę do Pragi!</h2>
</div>

Ten kod jest absolutnie poprawny. Jeśli ci się podoba, możesz go używać. Jest to poprawny kod HTML5. Ale w języku HTML5 dostępne są dodatkowe semantyczne elementy do oznaczania nagłówków i sekcji.

Najpierw pozbędziemy się elementu <div id="header">. Jest to często spotykany kod, ale on przecież tak naprawdę nic nie znaczy. Element div nie ma zdefiniowanej semantyki, podobnie jak atrybut id. (Aplikacje klienckie nie mogą dedukować żadnych znaczeń z wartości atrybutu id.) Równie dobrze moglibyśmy napisać <div id="abrakadabra"> i otrzymalibyśmy to samo, jeśli chodzi o semantykę, czyli nic.

W języku HTML5 do oznaczania tego rodzaju treści służy element <header>. W specyfikacji HTML5 znajdują się realne przykłady użycia elementu <header>. Na naszej przykładowej stronie można by było go użyć w taki sposób:

<header>
  <h1>Mój blog</h1>
  <p class="tagline">Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy.</p>
  …
</header>

W porządku. Każdy kogo to interesuje będzie wiedział, że jest to nagłówek. Ale co z hasłem? Jest to kolejny często spotykany przypadek, dla którego do tej pory nie było żadnego specjalnego znacznika. Znakowanie treści to trudne zajęcie. Hasło jest jak podnagłówek, tylko że „związany” z głównym nagłówkiem. Inaczej mówiąc jest to podnagłówek, który nie tworzy własnej sekcji.

Elementy takie jak h1 i h2 określają strukturę dokumentu. Razem tworzą zarys, przy użyciu którego można wizualizować stronę albo się po niej poruszać. czytniki ekranu wykorzystują zarysy do pomagania niewidomym użytkownikom w przeglądaniu stron internetowych. Istnieją nawet internetowe narzędzia i rozszerzenia przeglądarek pozwalające wyświetlić zarys dokumentu.

W HTML 4, zarys dokumentu można było tworzyć tylko przy użyciu elementów h1–h6. Zarys przykładowej strony wygląda tak:

Mój blog (h1)
   |
   +--Dzień wyjazdu (h2)
   |
   +--Jadę do Pragi! (h2)

Wszystko jest dobrze, ale nie ma jak oznaczyć hasła „Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy”. Gdybyśmy użyli do tego celu elementu h2, to w zarysie dokumentu pojawił by się węzeł widmo:

Mój blog (h1)
   |
   +--Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy. (h2)
   |
   +--Dzień wyjazdu (h2)
   |
   +--Jadę do Pragi! (h2)

Nie taka jest struktura dokumentu. Hasło nie reprezentuje żadnej sekcji, a jedynie podnagłówek.

Może można by było oznaczyć je elementem h2, a tytuły artykułów umieścić w elemencie h3? Nie, tak byłoby jeszcze gorzej:

Mój blog (h1)
   |
   +--Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy. (h2)
         |
         +--Dzień wyjazdu (h3)
         |
         +--Jadę do Pragi! (h3)

Nadal w zarysie dokumentu mamy węzeł widmo, ale na dodatek „ukradł” on dzieci należące do węzła głównego. Oto sedno problemu: w języku HTML 4 nie ma sposobu na oznaczenie podnagłówka bez dodawania go do zarysu dokumentu. Choćbyśmy nie wiadomo jak się starali i mieszali elementy, to zdanie „Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy” zawsze znajdzie się w tym schemacie. Dlatego właśnie byliśmy zmuszeni używać bezwartościowego pod względem semantycznym elementu <p class="tagline">.

W języku HTML5 rozwiązanie tego problemu jest proste: wystarczy użyć elementu hgroup. Element hgroup jest kontenerem, w którym można umieścić dwa lub więcej powiązanych ze sobą nagłówków. Co znaczy wyrażenie „powiązane ze sobą”? Znaczy to, że elementy te razem tworzą tylko jeden węzeł w zarysie dokumentu.

Załóżmy, że mamy taki kod HTML: 

<header>
  <hgroup>
    <h1>Mój blog</h1>
    <h2>Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy.</h2>
  </hgroup>
  …
</header>
…
<div class="entry">
  <h2>Dzień wyjazdu</h2>
</div>
…
<div class="entry">
  <h2>Jadę do Pragi!</h2>
</div>

Ten dokument ma następujący zarys:

Mój blog (h1 ze swojej grupy hgroup)
   |
   +--Dzień wyjazdu (h2)
   |
   +--Jadę do Pragi! (h2)

Jeśli chcesz się dowiedzieć czy poprawnie stosujesz nagłówki na swoich stronach, możesz je przetestować w narzędziu do sprawdzania zarysu dokumentów HTML5.

Obsługa HTML5 Kurs HTML5

Narzędzia

FavoriteLoadingDodaj do przechowalni

Dodaj komentarz









Newsletter

Subskrybując nasz newsletter masz pewność, że nie ominie Cię żadna nowość w serwisie!