[HTML5] Budowa nowoczesnej, semantycznej strony z użyciem HTML5
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
W dzisiejszym artykule zbudujemy nowoczesną stronę z użyciem HTML5. To jest nowa technologia budowania stron WWW. Dzięki niej, jesteśmy w stanie budować strony które staną się jeszcze bardziej zrozumiałe dla wyszukiwarek. Jest to krok w budowaniu semantycznej sieci internetowej w której wyszukiwarki internetowe (semantyczne, czyli niekoniecznie Google) będą w stanie rozumieć strony oraz znajdować dane strony po wpisaniu słów zapytania w okno wyszukiwarki w języku naturalnym, czyli np: "Porównaj dystrybucje Linuxa".
Póki co, jest to melodia przyszłości którą już zaczynamy słyszeć dzisiaj.
HTML5 w odróżnieniu od HTML4 ma kilka nowych znaczników, takich jak: section, article, figure, header, footer i wiele, wiele innych. Dla chcących zgłębić swoją wiedzę w tym zakresie zapraszam do zestawienia tagów HTML5.
W naszym przypadku nie będziemy wykorzystywać wszystkich możliwych tagów. Po prostu skupimy się na kilku z nich.
Najpierw sekcja header:
<section id="strona">
<!-- Zdefiniowanie sekcji header wraz z odpowiednimi tagami -->
<header>
<!-- Tag hgroup oznacza elementy którą tworzą nagłówek strony -->
<hgroup>
<h1>Demo strony</h1>
<h3>HTML5, CSS3, jQuery</h3>
</hgroup>
<!-- Znacznik nav wskazuje w sposób semantyczny miejsce gdzie znajduje się nawigacja strony -->
<nav class="clear">
<ul>
<li><a href="#art1">Artykuł 1</a></li>
<li><a href="#art2">Artykuł 2</a></li>
<li><a href="#art3">Artykuł 3</a></li>
</ul>
</nav>
</header>
</section>
Sekcja artykułów na stronie wygląda następująco:
<section id="artykuly">
<!-- Tag article wskazujący miejsce gdzie znajduje się artykuł. Dodatkowo ma przypisane id, aby skrypt do scrollowania działał -->
<article>
<h2>...</h2>
<div class="linia"></div>
<div class="szkielet clear">
<!-- Tag figure oznacza jakieś zewnętrzne dane (zazwyczaj obrazek), które są częścią artykułu -->
<figure>
<a href="#"><img src="..." /></a>
</figure>
<p>...</p>
<p>...</p>
</div>
</article>
<div class="linia"></div>
<article>
<h2>...</h2>
<div class="linia"></div>
<div class="szkielet clear">
<figure>
<a href="#"><img src="..." /></a>
</figure>
<p>...</p>
<p>...</p>
</div>
</article>
</section>
Na sam koniec zostawiamy stopkę:
<!-- Tag footer oznacza miejsce w którym znajduje się stopka strony -->
<footer>
<p>...</p>
</footer>
Demo z tego przykładu możecie zobaczyć tutaj: demo strony zbudowanej w oparciu o HTML5
O autorze
