search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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

  • FasOlQa

    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:)

  • 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

    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

    Ostatni przeglądałem różne stronki i trafiłem na coś takiego.
    http://tutorialzine.com/2010/02/html5-css3-website-template/
    Polecam 🙂

  • Comandeer

    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
    8) 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

    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.

  • 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.