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

HTML5 - melodia przyszłości semantycznego Internetu

HTML5 Opublikowano: 20/02/2010

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

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

7 komentarze/y

FasOlQa
21/02/2010 o 15:18
Warto by było jednak wspomnieć o przeglądarkach internetowych które są bądź nie są kompatybilne z tym językiem:)
HTML5 nie jest jeszcze powszechnie stosowany jednakże można już zobaczyć strony zgodne z tym językiem Np. youtube w wersji beta na html5 z nowym odtwarzaczem. Wszystko idzie do przodu, prócz badzIEwnych przeglądarek. Pozdrawiam:)
Piotr Nalepa
21/02/2010 o 16:42
tak, masz rację mogłem wspomnieć o kompatybilności obecnych przeglądarek z tym standardem, a także o tym, że Adobe toczy swoistą walkę z HTML5 chcąc wprowadzić własny format budowania stron WWW oparty na Flashu.
FasOlQa
24/02/2010 o 12:43
Zawsze jest pomysł na nowy wpis:) Do tego jak już jesteś przy html5 to można by je udoskonalić za pomocną CSS3, które daje możliwość w łatwy sposób uzyskać ciekawe efekty:)
Kamil
31/10/2010 o 01:04
Ostatni przeglądałem różne stronki i trafiłem na coś takiego.
http://tutorialzine.com/2010/02/html5-css3-website-template/
Polecam
Comandeer
31/10/2010 o 16:24
Jak już używamy HTML 5, to używajmy wszystkiego co oferuje. Odwołując się do kodu demka:
1) DOCTYPE jest zły
2) xmlns dla html wywalić
3) zamiast tego wielgachnego meta to meta charset=”utf-8″
4) type dla link i script zbędny
5) script na koniec body (oprócz html5 shiva)
6) section#strona zbędny – style można przypisać do body
7) W hgroup powinien być h1 i h2, nie h1 i h3 W article można zastosować header i footer, a zamiast h2 – h1 (hierarchia nagłówków jest osobna dla każdego article)
9) Puste divy nie są semantyczne
10) „Tag hgroup oznacza elementy którą tworzą nagłówek strony” – nie do końca. Gdybyś zobaczył outline, to znajduje się w nim jedynie h1.
11) To pewnie moje zboczenie, ale artykuły wstawiłbym w listę
Tak poza tym to fajnie, że ktoś w Polsce bawi się HTML 5.
Vall
27/05/2011 o 15:57
Fajnie, ze cos sie w tej kwestii dzieje. Ciekawe w jaki sposób mozna zrobic korzystajac z html5+”cos jeszcze” bloga z mozliwoscia dodawania nowych wpisow przechowywanych w bazie danych.
Piotr Nalepa
27/05/2011 o 17:45
Myślę, że tak samo jak w przypadku zwykłego HTML i „coś jeszcze”. Różnica polega na tym, że używając HTML5 użyjesz bardziej „znaczących” znaczników i struktury strony.