<!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>
Źródło:https://miroslawzelent.pl/kurs-html/templatka-html5-polskie-znaki-sekcja-head/