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:
Hello, HTML5!
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
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.
Hello, HTML5!
Nagłówek artykułu
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
Nagłówek artykułu
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
Nagłówek artykułu
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
Pchnąć w tę łódź jeża lub ośm skrzyń fig.
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.
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.
