Nowe elementy HTML-a 5 mogą wywołać taką rewolucję jak rezygnacja z ramek i tabel. Pokazujemy jak zacząć.
Wchodzący obecnie do użycia, choć jeszcze nieustandaryzowany, HTML5 niesie ze sobą wiele usprawnień, które mają przenieść nieco przestarzały język w XXI wiek. Jednym z nich jest dodatnie nowych elementów: section, article, header, footer, nav i aside, które mówią jaką funkcję pełni fragment strony.
Zaczynamy od szkieletu
Uproszczono również szkielet dokumentu. Deklaracja typu to tylko {html}{/html}. Nie musimy podawać przestrzeni nazw języka (dotychczasowy atrybut xmlns w elemencie html). Kodowanie możemy ustalić m.in. za pomocą prostszego niż dotychczas znacznika {html}{/html} zamiast {html}{/html}, chociaż stary sposób ma być obsługiwany. Prosty dokument wyglądałby więc następująco:
1 2 3 4 5 6 7 8 9 10 |
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, HTML5!</title>
</head>
<body>
<p>Pchnąć w tę łódź jeża lub ośm skrzyń fig.</p>
</body>
</html>
|
Co się zmieniło w HTML5?
Poza tymi uproszczeniami wprowadzono wiele nowych elementów. Są to m.in. tagi opisujące strukturę dokumentu: pokazują czy tekst jest tylko wstępem czy całym artykułem, co jest stopką, a co nawigacją itd. Dla zwykłego czytelnika elementy te nic nie znaczą, ale roboty internetowe będą Miały ułatwione zadanie, kiedy wreszcie uda się usystematyzować przechowywane w sieci informacje. Pamiętajmy, że standard będzie obowiązywał przez całe lata!
W HTML5 zostanie usuniętych wiele elementów, głównie takich, które określają warstwę prezentacji, a nie znaczenia treści. Dodane elementy mówią jaką funkcję pełni element.
Usunięte elementy: acronym, applet, basefont, big, center, dir, font, frame, frameset, noframe, s, strike, tt, u, xmp.
Dodane elementy: article, aside, audio, canvas, command, datalist, details, embeded, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, aoutput, progress, rp, rt, ruby, section, source, summary, time, video.
Uwaga! Standard jest w fazie przygotowania, więc podane informacje mogą się zmienić. Aktualne dane: http://www.w3.org/TR/html5-diff/.
Uzupełniamy stronę
My zajmiemy się na razie schematem witryny, a elementy opisujące różne rodzaje treści (video, elementy osadzone, pola formularzy itd.) opiszemy w kolejnych artykułach. Standardowo na początku strony umieszcza się logo, hasło firmy itp. W HTML5 oznaczamy je tagiem header. Header może zawierać m.in. nawigację, którą oznaczymy jako nav. W parze z nagłówkiem idzie stopka. Opisujący ją element to footer.
Kolejny nowy tag, article, reprezentuje niezależną część dokumentu. Jak sama nazwa mówi, może to być artykuł lub np. wpis na blogu. Elementy o podobnym przeznaczeniu powinniśmy otoczyć tagiem section, który może mieć swój nagłówek i stopkę. Informacje poboczne, niezwiązane bezpośrednio z treścią dokumentu (np. boczna kolumna) powinniśmy umieścić w tagu aside. Dzięki temu urządzenia mobilne będą mogły autoamtycznie przenieść ten mało ważny fragment na koniec.
Gotowy schemat strony w HTML5 umieściliśmy w poniższym listingu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, HTML5!</title>
<style>
article, aside, footer, header, nav, section {
display: block;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border: 0.125em solid #888;
margin:0.5em;
padding: 0.5em;
}
section#tresc {
width: 60%;
float: left;
}
aside { margin-left: 65% }
footer { clear:both }
/* kolory */
section { background-color:#ffa; }
aside { background-color:#aff; }
header { background-color:#faf; }
footer { background-color:#faa; }
nav { background-color:#afa; }
article { background-color: #aaf}
</style>
</head>
<body>
<header>
<nav>
<p>nawigacja główna</p>
</nav>
</header>
<section id="tresc">
<article>
<header>Nagłówek artykułu</header>
<p>Pchnąć w tę łódź jeża lub ośm skrzyń fig.</p>
<p>Pchnąć w tę łódź jeża lub ośm skrzyń fig.</p>
<footer>stopka artykułu</footer>
</article>
<article>
<header>Nagłówek artykułu</header>
<p>Pchnąć w tę łódź jeża lub ośm skrzyń fig.</p>
<p>Pchnąć w tę łódź jeża lub ośm skrzyń fig.</p>
<footer>stopka artykułu</footer>
</article>
<article>
<header>Nagłówek artykułu</header>
<p>Pchnąć w tę łódź jeża lub ośm skrzyń fig.</p>
<p>Pchnąć w tę łódź jeża lub ośm skrzyń fig.</p>
<footer>stopka artykułu</footer>
</article>
</section>
<aside>
<p>panel boczny</p>
<nav>
<p>nawigacja boczna</p>
</nav>
</aside>
<footer>stopka</footer>
</body>
</html>
|
Zmieniamy wygląd nowych elementów
Opisywane elementy nie wpływają na wygląd, ale mogą zastąpić kontenery ({html}
{/html}), które nic nie mówią o zawartości. W najbliższym czasie możemy więc spodziewać się przejścia z divów na elementy semantyczne. Będzie to analogiczna sytuacja jak przejście z ramek (obecnie usuwanych ze standardu) na tabele, a następnie z tabel na divy. Aby w pełni zastąpić kontenery ich semantycznymi odpowiednikami, w arkuszu stylów należy ustalić, żeby wyświetlały się jako elementy blokowe.
1 2 3 |
article, aside, footer, header, nav, section { display: block; } |
Podsumowując, nowe tagi opisujące treść będą taką rewolucją jak przejście z tabel na kontenery i prawdopodobnie wywołają podobną burzę. Należy tylko pamiętać, że standard wejdzie w życie dopiero za kilka lat, a obecnie przeglądarki nie muszą obsługiwać HTML-a 5.
Może Cię zainteresować:
O autorze
