[HTML5] Budowa nowoczesnej, semantycznej strony z użyciem HTML5

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>

Staram się w miarę przejrzyście tłumaczyć sposób wykorzystania danego tagu na stronie na podstawie przykładu.
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>

Jak widać, artykuł na stronie należy umieścić między znacznikami <article>...</article>. Artykuły z kolei wstawiamy między <section> a </section>.
Na sam koniec zostawiamy stopkę:

 
    <!-- Tag footer oznacza miejsce w którym znajduje się stopka strony -->
    <footer>
    <p>...</p>
    </footer>

W ten sposób uzyskaliśmy prosty szkielet strony oparty o kod HTML5. Dzięki temu już jesteśmy o wielej bardziej "semantyczni" dla wyszukiwarek.

Demo z tego przykładu możecie zobaczyć tutaj: demo strony zbudowanej w oparciu o HTML5