RaVns Blog | Webmastering, xHTML, CSS, PHP, MySQL, SEO/SEM, Windows i inne

Tag | struktura HTML5

Poniższa porada ma raczej charakter ciekawostkowy. A pytanie brzmi: jaką znasz najprostszą poprawną strukturę dokumentu HTML5?

Przechodząc do sedna najprostsza postać HTML5 może wyglądać tak:

<!DOCTYPE html>
<title>Prosty dokument</title>

Zobacz przykład: Prosty dokument HTML5

Patrząc na ten kod zapewne myślisz sobie, że to brednie lub że jest to bezużyteczne. Tak, więc kod jest jak najbardziej poprawnie walidowany przez walidator W3C.

Prosty dokument HTML5

Prosty dokument HTML5 wymaga podania tylko:

  • deklaracji typu dokumentu <DOCTYPE>
  • oraz znacznika tytułowego <title>

Wszelkie inne znaczniki są opcjonalne, a zarazem konieczne do tworzenia rozbudowanych stron.
Dlaczego w walidatorze pojawiły się ostrzeżenia (warnings)? przeczytaj …. (przyszła porada).

Tymczasem, klikając prawym przyciskiem w puste miejsce na tej prostej stronie i wybierając „Zbadaj element” (Google Chrome) w głównym oknie można zauważyć strukturę dokumentu. Jak widać, przeglądarki automatycznie dodają brakujące znaczniki. Zaglądając w źródło strony zobaczymy tylko ten sam kod co napisaliśmy.

Natomiast dokument XHTML, czy HTML 4 musiałby zawierać strukturę typu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Prosty dokument XHTML</title>
</head>
<body>

<p>Przykładowy akapit dokumentu XHTML</p>

</body>
</html>

Prosty dokument XHTML – tu na przykładzie XHTML, który jest także używany.

Ciekawostki:

  • Przykładowo Standard HTML5 wcale nie wymaga stosowania zamykającego znacznika </p>, gdyż przeglądarki automatycznie domykają niezamknięte znaczniki (w HTML5 jest to oficjalny mechanizm).

    Jak można się domyślić takie działanie nie jest zalecane, ponieważ wprowadza pewnien chaos na stronie i może przyczyniać się do pojawiania się błędów. Postawienie np. znacznika div po niezamknięty p wywoła błąd podczas walidacji;
  • HTML5 pozwala też na brak użycia znacznika <title>, pod warunkiem, że zawarte w nim informacje dostarczone są w inny sposób.

    Np. Wysyłanie dokumentu HTML w wiadomości e-mail, gdzie tytuł można zawrzeć w polu do tego przenaczonym, a w zawartości dokumentu resztę znaczników w tym doctype i treść.

Zobacz przykład: Prosty dokument HTML5 ze znacznikiem akapitu

Jak można zauważyć wszelkie inne znaczniki są nieobowiązkowe. Jednak dla usystematyzowania szkieletu dokumentu HTML5 stosuje się tradycyjne komponenty:
(zbiornik dla całego dokumentu HTML)
(zawiera zbiory informacji: , style CSS, skrypty itp.)
(zawiera treść strony: tekst, obrazki wraz ze wszystkimi innnymi znacznikami i różne dołączane elementy webowe)

  • <html> (zbiornik dla całego dokumentu HTML)
  • <head> (zawiera zbiory informacji: , style CSS, skrypty itp.)
  • <body> (zawiera treść strony: tekst, obrazki wraz ze wszystkimi innnymi znacznikami i różne dołączane elementy webowe)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Podstawowa struktura strony</title>
</head>
<body>

<p>Przykładowy akapit</p>

</body>
</html>

Zobacz przykład: Prosty dokument HTML5 – tradycyjna struktura

W taki oto sposób przeanalizowaliśmy podstawową strukturę dokumentu HTML5.

VN:F [1.9.22_1171]
Rating: 3.5/6 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

Tagi: · · ·

Powered by RaVns


Unikalnych: odwiedzających!
Dziękuję za zainteresowanie :)