Struktura strony w HTML5
HTML5 przyniósł nam ze sobą nowe znaczniki, które lepiej definiują semantykę naszej strony. Postaram się w tym wpisie opisać znaczenie tych najbardziej popularnych (<header/>, <footer/>, <nav/>, <article/>, <section/>, <aside/>) i przedstawić ich sposób użycia w różnych przypadkach.
Zanim przejdziemy do samych znaczników wyjaśnijmy sobie na czym polega semantyka kodu. Semantyka to nic innego jak znaczenie danego elementu. Pozwala ona lepiej odczytać przeznaczanie części strony internetowej. Do tej pory wyszukiwarki czy inne narzędzia (np. czytnik ekranu dla niewidomych) musiały same próbować ocenić daną treść i odpowiednio ją zinterpretować. Odpowiednia konstrukcja naszej strony może to ułatwić i będzie lepiej interpretowana więc wyżej oceniana przez wyszukiwarki i samych użytkowników.
Najpopularniejsze znaczniki HTML5
- <header/> – definiowanie nagłówka dla całej strony, ale również jej części
- <footer/> – definiowanie stopki dla całej strony, ale również jej części
- <nav/> – definiowanie łączy strony lub innych elementów, które powodują przenoszenie do innych podstron witryny
- <article/> – definiowanie elementu strony, która tworzy jedną spójną całość
- <section/> – grupuje różne elementy strony
- <aside/> – definiuje treść dodatkową (uzupełniającą) do głównego tematu podstrony
<article/> vs <section/>
Oba znaczniki są do siebie podobne jednak warto zaznaczyć, że używamy ich w innych przypadkach. Pierwszy z nich (<article/>) określa zawartość, która tworzy spójną całość. Możemy ja wyciąć ze strony i wkleić w inne miejsca i nadal będzie wiadomo czego dotyczy. Natomiast <section/> grupuje poszczególne elementy funkcjonalne lub zawartości, które same tracą kontekst.
Kilka przykładów:
<section id="main">
<article>
<h1>Title1</h1>
<p>Description1</p>
</article>
<article>
<h1>Title2</h1>
<p>Description2</p>
</article>
<article>
<h1>Title2</h1>
<p>Description2</p>
</article>
</section>
<article>
<section id="intro">
<p>Intro...</p>
</section>
<section id="content">
<p>Content 1</p>
<p>Content 2</p>
</section>
<section id="summary">
<p>Summary...</p>
</section>
</article>
<section>
<article>
<header>
<h2>Article title</h2>
<p>...</p>
</header>
<p>...</p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>...</p>
</header>
<p>...</p>
</article>
</section>
<nav/>
<nav>
<ul>
<li><a href="/">strona główna</a></li>
<li><a href="/categories">kategorie</a></li>
<li><a href="/contact">kontakt</a></li>
</ul>
</nav>
<section>
<article>
<h1>...</h1>
<p>...</p>
<p>...</p>
</article>
<nav>
<ul>
<li><a href="/tags?t=tag1">tag1</a></li>
<li><a href="/tags?t=tag2">tag2</a></li>
<li><a href="/tags?t=tag3">tag3</a></li>
</ul>
</nav>
</section>
<aside/>
<article> <h1>Heading article</h1> <p>Text article</p> </article> <aside> <p>Text aside</p> </aside>
Jeśli chcesz zobaczyć przykłady całej strony to odsyłam do serwisów: