Templatka witryny HTML5, polskie znaki, sekcja head

MZ | 10-06-2017 | 22:18:13

Przed nami możliwie najbardziej skrótowe wyjaśnienie do czego służą poszczególne linie podstawowej templatki HTML5. Zrozumienie wszystkich zapisów jest kluczem do komfortowego startu w świat HTML. Szczegółowy opis każdej linii kodu znajdziesz w udostępnionym video-kursie, tutaj przedstawiłem skrócone informacje w formie podręcznych notatek. Templatka prezentuje się następująco:

<!DOCTYPE html>
<html lang="pl">

<head>

<meta charset="utf-8">
<title>Moja witryna</title>

<meta name="description" content="Opis zawartości strony dla wyszukiwarek">
<meta name="keywords" content="słowa, kluczowe, opisujące, zawartość">
<meta name="author" content="Jan Programista">

<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="arkusz.css">
<script src="skrypt.js"></script>

</head>
<body>

</body>

</html>

Rozpocznijmy analizę od doctype'u: <!DOCTYPE html>. Tym zapisem informujemy przeglądarkę, iż niniejszy dokument należy potraktować jako zapisany w standardzie HTML5. Oczywiście przeglądarka posiada wiele mechanizmów kompatybilności wstecznej ze standardami HTML 4.01 i XHTML (więc jeżeli zapiszemy coś według starszej metody nie będzie wielkiego problemu), niemniej jednak taka deklaracja powinna się znaleźć jako pierwsza w kodzie Twojej strony. Starsze deklaracje były dużo dłuższe, bo zawierały tzw. wpis DTD (ang. document type definition) – przykłady starszych deklaracji znajdziesz na przykład tutaj.

Aby polskie ogonki wyświetlały się poprawnie, potrzebujemy dopilnować obecności dwóch zapisów, jak również poprawnie ustawić kodowanie pliku HTML. Po kolei:

  • Ustawiamy polski język zapisem <html lang="pl">.
  • Użycie zestawu znaków utf-8 (lub ewentualnie iso-8859-2) <meta charset="utf-8">. Tag meta charset powinien być pierwszym tagiem wstawionym do sekcji head. Istnieje także dłuższa wersja tagu, którą można stosować zamiennie z wersją powyższą – więcej szczegółów znajdziesz tutaj.
  • To samo kodowanie (zestaw znaków, czyli charset) ustawiamy dla naszego dokumentu HTML – kodowanie można sprawdzić / zmienić w edytorze lub IDE. W przypadku Notepada++ zaglądamy do menu Format (lub w wersji angielskiej interfejsu do opcji Encoding).

Tytuł witryny widoczny w zakładce przeglądarki ustawiamy z użyciem znacznika podwójnego<title></title>. Tytuł podstrony jest bardzo ważny w kontekście SEO – zwróć szczególną uwagę na jego nieprzesadną długość oraz odpowiednią zawartość (tytuł powinien zawierać kluczowe frazy, na które pozycjonujemy witrynę).

Kolejny ważny w kontekście SEO znacznik meta to opis strony w wyszukiwarce:

<meta name="description" content="Opis zawartości strony dla wyszukiwarek">

Do dyspozycji mamy około 155-160 znaków. Opis powinien składać się zarówno z kluczowych fraz, jak również bezpośrednio zwracać się do internauty, by zainteresować go właśnie naszą witryną.

Następny tag meta to kolekcja słów kluczowych:

<meta name="keywords" content="słowa, kluczowe, opisujące, zawartość">

Co prawda robot Google’a obecnie praktycznie ignoruje tę sekcję (z powodu nadużyć internautów w przeszłości), jednak po dziś dzień umieszczamy ją w kodzie witryny wpisując kilka najbardziej kluczowych, reprezentatywnych dla witryny fraz. Robimy to pomimo traktowania po macoszemu tego znacznika – ot, bez przesadnych oczekiwań wstawiamy go siłą tradycji do kodu witryny, nie licząc jednak na zbyt wiele benefitów w zamian.

W kolejnej linii następuje określenie autorstwa witryny:

<meta name="author" content="Jan Programista">

Tag opcjonalny, ale wciąż możliwy do umieszczenia. W praktyce dużo lepiej podpisać się na stronie linkiem do własnej witryny bądź portfolio (znacznik <a>) – wówczas przynajmniej zyskujemy kolejny link prowadzący do nas w rezultatach wyszukiwania Google (a to już wymierna korzyść).

Warto jeszcze zatroszczyć się o poprawne wyświetlenie witryny w starszych wersjach IE:

<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">

Atrybut content powinien mieć wartość IE=edge, z opcjonalnym chrome=1. Można też określić konkretną wersję standardów IE, wpisując na przykład IE=10. Pełną dyskusję na ten temat znajdziesz tutaj.

Dalej następuje podpięcie (zainkluowanie) arkusza stylów CSS z użyciem pojedynczego tagu <link>:

<link rel="stylesheet" href="arkusz.css">

Atrybut: type="text/css" jest opcjonalny, a nawet zbędny, aczkolwiek jego wstawienie nie jest błędem. Zwróć zawsze szczególną uwagę na podanie właściwej, względnej (czyli nie zawierającej litery dysku) ścieżki do pliku. Warto też wykonać od razu prosty test podpięcia – zmieniamy roboczo tło strony na ciemne przekonując się, że arkusz stylów rzeczywiście został dołączony prawidłowo do dokumentu HTML.

Podpięcie (zainkluowanie) skryptu JavaScript wygląda następująco:

<script src="skrypt.js"></script>

Zwróć uwagę, że mamy tu do czynienia z podwójnym znacznikiem - zapominanie o kończącym tagu </script>to częsty błąd! Atrybut type="text/javascript" jest opcjonalny, a nawet zbędny w HTML5, aczkolwiek jego wstawienie nie jest błędem. Więcej szczegółów na ten temat znajdziesz w tej dyskusji. Ponownie, nie zapomnij o prostym teście prawidłowego podpięcia skryptu – wystarczy jeden mały alert w pliku JS aby przekonać się, że skrypt rzeczywiście jest interpretowany przez przeglądarkę.

Na koniec wspomnijmy jeszcze o dyskusji na temat domykania tagów w HTML5 w porównaniu do XHTML i HTML 4.01 – czy należy kończyć pojedyncze znaczniki znakiem / czy nie? Innymi słowy czy powinno się zapisać tak:

<meta charset="utf-8">

czy jednak w taki sposób:

<meta charset="utf-8" />

Otóż zgodnie ze specyfikacją HTML5 w tagach pojedynczych obowiązuje brak kończącego znaku / (czyli wersja pierwsza), aczkolwiek zapis znany z XHTML (czyli domknięcie tagu – wersja druga) nie powoduje błędu w przeglądarce – będzie ona wiedziała, ze chodzi o domknięcie znacznika. Wielu ludzi nadal używa wersji XHTML-owej - jest to kolejny przykład tego jak płynne, powolne i kompatybilne wstecz jest wprowadzanie nowych standardów sieciowych. Więcej informacji na temat tagów ze znakiem / znajdziesz tutaj.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z całego archiwum bloga:

Komentarze

Disqus
Facebook
Pasja informatyki