Jak prawidłowo wygląda szablon HTML 5
Kiedy zaczniesz uczyć się HTML i poznasz nowe techniki jakie oferuje dzięki oferowanym znacznikom. Prawdopodobnie będziesz chciał samodzielnie zbudować swój pierwszy szablon, aby używać go jako gotowca w swoich przyszłych projektach. Na początku zalecam w celu utrwalenia pisanie go z każdą nową stroną od nowa. Utrwali to twoje wiadomości z tego zakresu, dopiero z czasem kiedy będziecie chcieli nauczyć się czegoś bardziej zaawansowanego,
a wszystkie tagi będą już zapamiętane w waszych głowach przyjdzie ten czas w którym musimy przygotować właśnie taki szablon. Więc zaczynajmy.
W tym artykule przyjrzymy się, jak prawidłowo stworzyć prawidłową strukturę zgodną ze standardem W3C zacząć od tego. Zacznijmy od prostej strony HTML5:
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tytuł naszego szablonu HTML5</title>
<meta name="description" content="Opis">
<meta name="author" content="Autor">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html> Po stworzeniu naszego szablonu, przeanalizujmy jego najważniejsze częścią oraz znacznikom.
Doctype
W pierwszej kolejności możemy zauważyć deklarację typu dokumentu. Jest to po prostu sposób na poinformowanie przeglądarki lub innego interpretera o typie dokumentu, który przetwarza. W przypadku pliku HTML oznacza to konkretną wersję plus we wcześniejszych wersjach określenie typu dokumentu który dzielił się na trzy tryby : strict, transitional oraz frameset. W nowszej wersji nie musimy się już przejmować określaniem wcześniej wymienionych typów. Znacznik <!doctype> zawsze powinien znajdować się na początku dokumentu.
HTML4 – typu: frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">Jednakże ten długi ciąg tekstu dołączony do znacznika dokumentu tak naprawdę nie powoduje nic krzywdzącego dla użytkownika poza zmuszeniem przeglądających nasze witryny do pobrania kilku dodatkowych bajtów. Obecnie wraz z nadejściem HTML 5 pozbyto się tych wszystkich obrzydliwości. Wszystkiego czego potrzebujemy to :
HTML5
<!DOCTYPE html>Prosto i na temat prawda. Znacznik doctype może być zapisany za pomocą wielkich, małych liter lub pomieszanie. Możesz także zauważyć, że z deklaracji zniknęło oznaczenie wersji w tym przypadku “5” . Chodziaż obecna interpretacja znaczników internetowych znana jest jako “HTML 5”, to tak naprawdę jest to ewolucją poprzednich standardów HTML-a tak samo jak przyszłe wersje będą po prostu rozwinięciem tego co jest oferowane obecnie.
Ponieważ współczesne przeglądarki zazwyczaj muszą obsługiwać całą wczytywaną przez nie treść zawartą w sieci Web, w takim wypadku nie mogą polegać one tylko na typie dokumentu, który podpowiadał by im które funkcje powinny być obsługiwane w danym dokumencie, a które nie. Innymi słowy, samo określenie typu dokumentu nie zapewni zgodności napisanych przez Was stron w standardzie HTML 5, jest to tak naprawdę zależne od przeglądarki.
Tak naprawdę obecnie możesz użyć jednego z dwóch wcześniejszych zapisów doctypów z nowymi elementami wprowadzonymi w HTML 5, a strona będzie renderowana tak samo, jak w przypadku nowego typu dokumentu. Pewnie spytacie, ale jak to ? Dzieje się tak dla zapewnienia wstecznej kompatybilności. Wyobraźcie sobie, że po wprowadzenia nowego standardu HTML 5 oraz obsługiwania tylko jego przez przeglądarki nie moglibyście otworzyć większości swoich ulubionych stron. Na pewno takie działania były by dosyć bolesne w skutkach :)
Element html
Następnie w naszym szablonie znajdziemy element który nie zmienił się znacząco w HTML5. W naszym przykładzie możesz zauważyć, iż zawarliśmy atrybut lang z wartością pl. Oznacza to iż język dokumentu będzie odczytywany jako polski. W składni opartej na XHTML należałoby dołączyć atrybut xmlns. W HTML5 nie jest to już wymagane, a nawet atrybut lang nie jest także niezbędny, aby dokument mógł zostać poprawnie zinterpretowany w celu prawidłowego działania.
Wygląda to w sposób następujący, wraz z tagiem zamykającym :
<!doctype html>
<html lang="en">
....
</html> Element head
Kolejna część naszego szablonu to sekcja head[/head] . Pierwsza linia wewnątrz sekcji [code]head to ta, która definiuje kodowanie znaków w dokumencie. To kolejny element, który został uproszczony od czasu XHTML i HTML4 na ten moment jest opcjonalny, ale zalecany. Wcześniej zapis można było wykonać w następujący sposób:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">W HTML 5 zostało uproszczone to do kompletnego minimum. Obecnie tak
<meta charset="utf-8">W prawie wszystkich przypadkach wartością używaną przez Was w swoich szablonach, będzie utf-8 . Pełne wyjaśnienie kodowania znaków wykracza poza zakres tego artykułu i prawdopodobnie nie było by dla Ciebie na ten moment interesujące. Niemniej jednak, jeśli chcecie zagłębić nieco bardziej w ten temat, możecie poczytać dokumentacje na W3C lub WHATWG.
Uwaga
aby mieć pewność, że wszystkie przeglądarki poprawnie odczytują kodowanie zawartych na stronie znaków, cała deklaracja kodowania znaków musi znajdować się gdzieś w obrębie pierwszych 512 znaków dokumentu. Powinien również pojawić się przed jakimikolwiek elementami opartymi na treści (takimi jak element <title>, który następuje po nim w naszej przykładowej witrynie)
Mogłabym napisać wiele więcej na ten temat, ale przecież nie chcemy, abyś przypadkiem zasnął 😴 więc oszczędzę Wam tych szczegółów! Na razie bądźmy zadowoleni, że możemy zaakceptować tę uproszczoną deklarację i przejdźmy do następnej części naszego szablonu:
Nowe tagi w HTML 5
Kiedy wprowadzono HTML5, zawierał szereg nowych elementów, takich jak <article> i <section>. Możesz pomyśleć, że byłby to poważny problem w przypadku obsługi starszych przeglądarek dla nowszych elementów, ale nie masz racji. Większości przeglądarek tak naprawdę nie obchodzi, jakich tagów używasz. Gdybyśmy mieli dokument HTML z tagiem <recipe> (lub nawet tagiem <ziggy>), a twój CSS posiadał do tego elementu jakieś style, prawie każda przeglądarka rozpoznała by je bez zarzutu jako znaczniki, stosując przypisany styl bez zarzutu.
Oczywiście taki hipotetyczny opisany wyżej dokument nie zostałby zweryfikowany poprawnie oraz może mieć problemy z dostępnością niektórych zasobów, ale renderowałby się poprawnie w prawie wszystkich przeglądarkach - wyjątkiem są stare wersje Internet Explorera (IE). Przed wersją 9 IE zapobiegał stylowaniu nierozpoznawalnych elementów. Nierozpoznane elementy były postrzegane przez silnik renderujący jako „nieznane elementy”, dlatego nie można było zmienić ich wyglądu ani zachowania. Obejmuje to nie tylko utworzone przez nas własne tagi, ale także nowo wprowadzone elementy HTML 5 😨 , które nie zostały jeszcze zdefiniowane dla tej przeglądarki w czasie gdy była ona wprowadzana 😮.
Reszta jest historią
Patrząc na resztę naszego szablonu początkowego, znajdziemy tam zwykły element <body> wraz z jego zamykającym tagiem i zamykającym tagiem </html>. Mamy również odniesienie w postaci linku do pliku JavaScript wewnątrz elementu <script>.
Podobnie jak w przypadku omawianego wcześniej tagu <link>, tag <script> nie wymaga deklarowania atrybutu <type>
<script src="js/scripts.js" type="text/javascript"></script>Ponieważ JavaScript na ten moment jest jedynym językiem skryptowym używanym w sieci, wszystkie przeglądarki zakładają, że używasz właśnie jego, nawet jeśli nie deklarujesz tego wyraźnie, w atrybucie <type>.
W dokumentach HTML5 jest to po prostu opcjonalne :
<script src="js/scripts.js"></script>Najlepszą praktyką jest umieszczanie tagu <script> na końcu naszego szablonu, zgodnie z najlepszymi praktykami odnośnie osadzania skryptów na stronie. Ma to związek z prawidłowym wczytaniem skryptów po załadowaniu dokumentu, posiada także zalety optymalizacyjne pozwalające zwiększyć szybkość wczytywania strony.
Co dalej
Po przyswojeniu sobie jak pisać prawidłowo szablon html, możesz zająć się wykorzystaniem stworzonego szablonu na przyszłe potrzeby do tworzenia prostych witryn internetowych. Jeżeli czujesz głód dalszej wiedzy, proponuje zapoznać się z artykułem odnośnie nowych tagów występujących w HTML 5. Możesz także przejrzeć pozostałem artykuły na pewno znajdziesz coś ciekawego dla siebie.
Brak komentarzy