Artykuł
10/06/2011

Internet Explorer 9 - Struktura dokumentu i nowe elementy HTML5

Autor: Marcin Borecki

Opublikowano: 2011-08-17

Wprowadzenie

Dotychczasowa specyfikacja HTML 4.01 nie dostarczała mechanizmu, który w łatwy sposób mógłby określać szkielet strony. Był to główny powód, dla którego dzisiejsze strony są nieczytelne zarówno dla programistów, jak i wyszukiwarek internetowych czy przeglądarek internetowych. Dodatkowo ludzie z kłopotami wzrokowymi mieli trudności w przeglądaniu Internetu, ponieważ programy czytające zawartość serwisów nie potrafiły odróżnić treści właściwej od reklamy czy menu.

Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który – przez zmniejszenie ilości kodu – jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza tym odróżnić elementy strony internetowej, dzięki czemu wiadomo, gdzie jest treść właściwa, gdzie jest menu, a gdzie znajdują się potencjalnie reklamy.

Nowe znaczniki

Używanie HTML5 ma między innymi na celu używanie uproszczonej składni kodu strony. Aby to osiągnąć, zostały wprowadzone nowe znaczniki. Poniżej znajduje się tabelka z nazwami znaczników i wyjaśnieniami.

header	Reprezentuje nagłówek elementu, w którym został użyty znacznik. Strona może zawierać więcej niż jeden znacznik header, lecz każdy musi być w innej sekcji (to znaczy musi być włożony do innego znacznika).
nav	Reprezentuje sekcje, która zawiera linki do innych podstron – najczęściej w tej sekcji deklarujemy MENU strony.
article	Reprezentuje sekcję, która zawierać może określoną odseparowaną treść, jak na przykład artykuł, wpis na blogu, news.
section	Znacznik ten odseparowuje elementy strony od siebie. Dotychczas, kiedy chcieliśmy dodać nowy element (blok) na stronie, definiowaliśmy znacznik div. Dzisiaj, kiedy dostajemy nowa składnię HTML5, najczęściej do definiowania nowych elementów na stronie, będzie wykorzystywany właśnie znacznik section. Znacznik section może być na przykład użyty jako kontener artykułów, newsów, komentarzy.
aside	Reprezentuje sekcję, w której umieszczamy treść powiązaną ze znacznikiem, w którym występuje, ale nie jest on wymagany, aby zrozumieć treść główną zadeklarowaną w znaczniku głównym (znaczniku poziom wyżej). Najczęściej umieszcza się w tym znaczniku przypisy oraz reklamy.
footer	Reprezentuje stopkę elementu, w którym został użyty znacznik. Strona może zawierać więcej niż jeden znacznik footer, lecz każdy musi być w innej sekcji (to znaczy musi być włożony do innego znacznika).

Poniżej znajduje się schemat przykładowej struktury ułożonej z nowych znaczników HTML5:

Przykład

Poniżej znajduje się przykład użycia nowych znaczników HTML5:

<!DOCTYPE html>
<html>
   <head>
      <title>Stronainternetowa</title>
   </head>

   <body>
      <header>
         <h1><a href="#">Nagłówek</a></h1>
      </header>

      <nav>
         <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
         </ul>
      </nav>

      <section>
         <article>
            <header>
               <h1><a href="#">Tytułwpisu 1</a></h1>
            </header>
            <section>
               <p>Zawartośćwpisu</p>
            </section>
         </article>
         <article>
            <header>
               <h1><a href="#">Tytułwpisu 2</a></h1>
            </header>
            <section>
               <p>Zawartośćwpisu</p>
            </section>
         </article>
         <article>
            <header>
               <h1><a href="#">Tytułwpisu 3</a></h1>
            </header>
            <section>
               <p>Zawartośćwpisu</p>
            </section>
         </article>
      </section>

      <aside>
         <h2>Tubędąreklamy</h2>

         <p>Reklama 1</p>
         <p>Reklama 2</p>
      </aside>

      <footer>
         <p>Copyright © 2011 Marcin Borecki</p>
      </footer>

   </body>

</html>

Sekcja body w HTML odpowiada za budowanie wyglądu strony internetowej – to w niej będziemy definiować znaczniki odpowiedzialne za strukturę dokumentu. Zauważmy, że w sekcji body użyte zostały znaczniki header i footer, które jasno określają nagłówek i stopkę strony. Do prezentacji menu został użyty znacznik nav (navigation), który także w jasny sposób określa swoją zawartość. Ostatni element prezentowanej strony to otwarcie sekcji związanej z artykułami, za co odpowiedzialny jest znacznik section, który zawiera w sobie znaczniki article.

Podsumowanie

W artykule zostały przedstawione informacje na temat budowania szkieletu strony internetowej zgodnej ze specyfikacją HTML5. Wprowadzone nowe znaczniki, które pozwalają na budowanie strony z sekcji, są łatwe w użyciu, a czas zaoszczędzony na budowie przejrzystego kodu na pewno zwróci się w przyszłości, pozwalając minimalizować liczbę błędów oraz oszczędzając czas potrzebny na modyfikacje.