Słowo się rzekło, kobyłka u płota… Jak widzisz, dzisiaj przedstawię Ci tworzenie struktury dokumentu HTML5, a to oznacza, że przygotowania do egzaminu 70-480 (w ramach certyfikacji MCSD Web Applications) czas zacząć!! W moim poprzednim poście - MCSD Web Applications - parę uwag i przemyśleń na temat egzaminu 70-480 - przedstawiłem kilka linków do materiałów przygotowujących do tego egzaminu. Po bliższym przyjrzeniu się im, wydaje mi się, że najlepszą robotę zrobił autor bloga Blogged By Chris, dlatego moje przygotowania w głównej mierze chcę oprzeć na materiałach podanych w przytoczonym linku (oczywiście nie mam zamiaru się ograniczać tylko do tego).

W ostatnich tygodniach, przeglądając moje blogowe subskrypcje RSS’ów, zauważyłem że jeden z blogerów, również przygotowuje się do egzaminów (Patryk Osowski na swoim blogu - Programowanie w .NET), a poszczególne swoje “sesje naukowe” zamieszcza na blogu w formie podsumowania - takie jakby notatki z wykładów ;). Zainspirowany tym, postanowiłem zrobić coś podobnego - każdy nowo poznany blok materiału, mam zamiar wrzucać tutaj w formie posta. Myślę, że przyda mi się to później jako przypomnienie przed samym egzaminem, a może też ktoś inny skorzysta… Tak więc dziś, pierwszy z cyklu postów na temat HTML5, CSS i JavaScript.

Zgodnie z opisem wymagań egzaminu na stronach Microsoft, jednym z czterech głównych zgadnień jest “Implementacja i Manipulacja Strukturą Dokumentu i Obiektami”. W jego ramach mieści się z kolei temat dzisiejszego posta, a więc “Tworzenie struktury dokumentu”. W opisie tego punktu mamy:

This objective may include but is not limited to: structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside); create a layout container in HTML

Tym sposobem dobrnęliśmy do końca tego przydługiego wstępu. Zgodnie z cytowanym powyżej opisem, w kolejnym paragrafie opis nowych znaczników semantycznych służących do tworzenia struktury interfejsu użytkownika.

Tworzenie struktury dokumentu HTML5 przy użyciu nowych znaczników semantycznych

Myślę, że najlepiej będzie jak przejdę od razu do opisu znaczników. Natomiast w dalszej części paragrafu opiszę sposób ich użycia do zarządzania konspektem dokumentu (ang. document outline).

Section

Element ten definiuje po prostu sekcję w dokumencie, w dalszej części tego paragrafu opiszę jego znaczenie dla tworzenia konspektów dokumentów. Poniżej przykład użycia tego znacznika (ze strony w3schools.com):

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Article

Znacznika tego używa się do oznaczenia niezależnej sekcji dokumentu (jest to tak jakby specjalna odmiana znacznika <section>). Zawartość takiego znacznika, powinna być możliwa do użycia jako osobna treść. Dobrym przykładem na zawartość <article> mógłby być post na blogu lub forum albo komentarz. Poniżej przykład (także z w3schools.com):

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Nav

Jest to znacznik służący do oznaczania sekcji dokumentu zawierającego linki nawigacyjne (czyli takie jak na przykład menu strony - nie trzeba nim oznaczać wszystkich linków na stronie). Dodatkowo, znacznik ten może być wykorzystywany przez przeglądarki dla niewidomych (“screen readery”) - np. linki nawigacyjne, oznaczone opisywanym znacznikiem mogą zostać pominięte przez taką przeglądarkę. Przykład (jak wszystkie w tej sekcji z w3chools.com):

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Header oraz footer

Znaczniki te są oczywiście podobne do siebie. Treść “owinięta” nimi oznacza odpowiednio nagłówek i stopkę innej sekcji lub dokumentu. Nagłówek powinien zawierać informacje wprowadzające do zawartości sekcji w której się znajduje, stopka natomiast zawierać powinna informacje o sekcji, w której się znajduje (takie jak autor, data utworzenia, polityka prywatności itp). Jeden dokument może zawierać wiele sekcji nagłówka i stopki (ponieważ są powiązane z sekcjami/artykułami, a tych może być wiele). Przykłady z w3schools.com:

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

Aside

Element ten służy do oznaczania treści, która jest dygresją w stosunku do głównej treści sekcji, do której należy. Jego treść powinna być w jakiś sposób powiązana z treścią, dla której jest dygresją. Przykład, oczywiście z w3schools.com:

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Konspekt dokumentu (ang. document outline) HTML5

Opisane powyżej znaczniki przeznaczone są do tworzenia logicznych struktur dokumentów HTML5, w celu utworzenia pewnego rodzaju spisu treści dokumentu. Taki spis treści pozwala na lepszą dostępność dokumentu (ang. accessibility) - dzięki niemu wszelkiego rodzaju aplikacje umożliwiające niepełno sprawnym poruszanie się po internecie mają ułatwione zadanie. Mogą one być także wykorzystane przez wyszukiwarki do polepszenia wyników wyszukiwania.

Poniższy opis zaczerpnąłem z artykułu Document Outlines, zamieszczonego w serwisie html5doctor.com - większość przykładów (trochę zmienionych), również pochodzi z tego artykułu.

Do momentu wprowadzenia opisanych powyżej znaczników, tworzenie konspektów dokumentów opierało się jedynie na znanych na pewno wszystkim znacznikach <h1> do <h6>. Mając więc treść dokumentu podobną do tej:

<h1>Post na blogu</h1>
<h2>Rozdział pierwszy</h2>
<p>Jakaś tam treść rozdziału pierwszego...</p>
<h3>Podrozdział</h3>
<p>Treść podrozdziału...</p>
<h2>Rozdział drugi</h2>
<p>Jakaś tam treść rozdziału drugiego...</p>

utworzony zostałby poniższy konspekt dokumentu:

Post na blogu
Rozdział pierwszy 1. Podrozdział
Rozdział drugi

Sprawa wyglądała więc dość prosto - <h3> jest podrozdziałem dla <h2>, natomiast <h2> jest podrozdziałem dla <h1>. Ograniczeniem tego rozwiązania jest to, że zawsze należy pamiętać o zachowaniu odpowiedniej hierarchii znaczników. Poza tym jesteśmy ograniczeni tylko do sześciu poziomów.

Prawidłowy podział dokumentu na sekcje

HTML5 wprowadza rozwiązanie tego problemu, czyniąc tworzenie konspektów dużo bardziej elastycznym. Do tego właśnie służą opisane wcześniej znaczniki <section>, <article>, <aside> and <nav>. Poprzedni przykład, przy użyciu znacznika <section> wyglądałby tak:

<section>
  <h1>Rozdział pierwszy</h1>
  <p>Jakaś tam treść rozdziału pierwszego...</p>
  <section>
    <h1>Podrozdział</h1>
    <p>Treść podrozdziału...</p>
  </section>
</section>
<section>
  <h1>Rozdział drugi</h1>
  <p>Jakaś tam treść rozdziału drugiego...</p>
</section>

Na podstawie takiego HTML’a powstałby dokładnie taki sam konspekt dokumentu jak w poprzednim przykładzie. Jak jednak widać, poszczególne rozdziały dokumentu zostały podzielone na sekcje, a w każdej sekcji, hierarchia nagłówków zaczyna się od początku - dzięki sekcjom, wiadomo jaka jest struktura dokumentu. Tak na prawdę, nagłówek sekcji nie musi nawet zaczynać się od <h1>. Nagłówek “Rozdział pierwszy” mógłby być objęty w element <h3>, a “Podrozdział” w <h2>. Konspekt i tak powstałby prawidłowo, ponieważ to znacznik <section> odpowiada za prawidłową hierarchię elementów w dokumencie a nie znaczniki nagłówków.

Podobnie działa to w przypadku znacznika <article>, z tym że oczywiście, zgodnie z semantyką języka HTML5, <article> powinien być traktowany bardziej ogólnie, jako rodzic mniejszych sekcji dokumentu.

Oczywiście, specyfikacja HTML5 zaleca używanie znacznika <h1> jako nagłówka sekcji. Ewentualnie można stosować numerację w starym stylu, jeśli dla kogoś jest tak łatwiej. Pamiętajmy, że z punktu widzenia dostępności, dokument HTML powinien być zbudowany w sposób logiczny. Znaczniki sekcyjne mogą nam w tym pomóc ale trzeba to robić z głową ;)

Znaczniki sekcji bez nagłówka

Kolejna rzecz, o której należy wspomnieć to znaczniki sekcyjne bez nagłówka. Rozważmy przykład:

<aside>
  <section>
    <h2>Podrozdział pierwszy</h2>
  </section>
  <section>
    <h2>Podrozdział drugi</h2>
  </section>
</aside>

Jak widać pomiędzy <aside> a <section> brakuje znacznika nagłówka. Jednak to nie jest błąd - w takim przypadku konspekt dokumentu wyglądałby następująco:

aside bez tytułu
Podrozdział pierwszy
Podrozdział drugi

Oczywiście z punktu widzenia dostępności, brakujący znacznik nagłówka powinien się jednak znaleźć w kodzie z powyższego przykładu, nawet jeśli miałby być ukryty przed użytkownikiem za pomocą CSS.

Korzeń sekcji

Na koniec wspomnę jeszcze, że istnieje jeszcze coś takiego jak “korzeń sekcji” (nie wiem czy dobrze to tłumaczę - ang. sectioning root). Dla głównego konspektu dokumentu korzeniem jest element. Jednak istnieje możliwość objęcia pewnych części dokumentu osobnym korzeniem, przez co sekcje i nagłówki nie będą znajdowały się w głównym konspekcie - utworzą jakby osobne konspekty. Znaczniki, które traktowane są jak takie korzenie to:

<blockquote>
<figure>
<details>
<fieldset>
<td>

Tworzenie kontenera układu graficznego za pomocą HTML5

Ten paragraf nie będzie zbyt długi - myślę, że każdy kto miał choć trochę styczność z HTML5 na w miarę profesjonalnym poziomie wie, że układ graficzny dokumentu HTML5 należy tworzyć za pomocą znaczników blokowych <div> przeznaczonych do grupowania innych elementów strony. Poniżej, pochodzący z w3schools.com, przykład układu:

<!DOCTYPE html>
<html>
  <body>
    <div id="container" style="width: 500px">

      <div id="header" style="background-color: #FFA500;">
        <h1 style="margin-bottom: 0;">Main Title of Web Page</h1>
      </div>

      <div id="menu" style="background-color: #FFD700; height: 200px; width:1 00px; float: left;">
        <b>Menu</b><br>
        HTML<br>
        CSS<br>
        JavaScript
      </div>

      <div id="content" style="background-color: #EEEEEE; height: 200px; width:400px; float:l eft;">
        Content goes here
      </div>

      <div id="footer" style="background-color: #FFA500; clear: both; text-align: center;">
        Copyright © W3Schools.com
      </div>

    </div>
  </body>
</html>

A poniżej wynik takiego kodu HTML (też z w3schools.com):

Main Title of Web Page

Menu
HTML
CSS
JavaScript

Content goes here

Jak widać, układ graficzny oparty jest o grupy elementów blokowych <div>, zawierających właściwą treść dokumentu. Odpowiedni wygląd układu uzyskuje się, odpowiednio nadając style poszczególnym elementom za pomocą CSS.

Oczywiście znanym z zamierzchłych czasów jest sposób na tworzenie układów za pomocą tabel (<table>). Mam nadzieję, że wszyscy wiedzą, że jest to BE, FUJ i w ogóle… ;) Znacznik <table> służy do przedstawiania danych tabelarycznych, a nie tworzenia układów graficznych czegokolwiek!! Koniec i kropka!!

Tworzenie struktury dokumentu HTML5