Strony w HTML5

Strony internetowe w HTML5

Jak powinien wyglądać szablon strony napisanej w HTML5.

więcej na www.altcontroldelete.pl/artykuly/html5-wprowadzenie-do-nowej-technologii/

Jak można zauważyć kod HTML został uproszczony, usunięto linie ze zbędnymi deklaracjami. Wprowadzono kilka nowych znaczników, przykładowo header tworzący nagłówek strony oraz footer tworzący stopkę strony.

 

Lista nowych znaczników:

  • article - element używany do wydzielenia niezależnej sekcji, która może być również potem użyta w innym miejscu. Idealnie nadaje się do artykułów na blogach
  • aside - element, który może posłużyć do utworzenia popularnych na stronach sidebarów. Taki element może powtarzać się na każdej podstronie, w tej samej postaci. Można go również wykorzystać do innych celów
  • footer - kolejny praktyczny element, który możemy wykorzystać do utworzenia stopki (obojętnie czy to będzie stopka dokumentu, czy wybranej sekcji)
  • header - element, który możemy wykorzystać do utworzenia nagłówka dokumentu lub określonej sekcji
  • nav - sekcja, w której grupujemy wszelkie odnośniki używane do nawigacji zarówno na stronie jak i w całym dokumencie
  • section - specjalny tag, który używamy do tworzenia (zgodnie z nazewnictwem) sekcji. Przykładowo, mamy sekcję komentarzy, sekcję screenów itp.
  • videowideo jest umieszczane w HTML 5 za pomocą nowego znacznika
<!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="style.css" />
        <style>
            article, aside, footer, header, nav, section{
                display: block;
            }
        </style>
        <title>HTML5 Test!</title>
    </head>
    <body>
        <header>
            <h1>Nagłówek</h1>
        </header>
        <article>
            <header>
                <h1>Tytuł artykułu</h1>
            </header>
            <section id="article-content">
                <p>Tutaj właściwa treść artykułu...</p>
            </section>
            <footer>
                <p>Stopka artykułu</p>
            </footer>
        </article>
        <footer>
            <p>Stopka strony</p>
        </footer>
    </body>
</html>