Zrozumieć templatkę HTML5
Mirosław Zelent
Poniżej znajdziesz możliwie najbardziej skrótowe wyjaśnienie do czego służą poszczególne linie stworzonej przez nas w odcinku templatki HTML. Ponieważ szczegółowy opis znajdziesz w materiale video, tutaj przedstawiłem skrócone informacje w formie podręcznej "ściągawki". Cała templatka prezentuje się następująco:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Książki science-fiction, które musisz przeczytać!</title>
<meta name="description" content="Lista najlepszych książek z zakresu fantastyki, science-fiction wartych przeczytania! Fantastyka naukowa - TOP Lista Wszech Czasów">
<meta name="keywords" content="książki, science, fiction, fantastyka, sf">
<meta name="author" content="Trevor Philips Industries">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="main.css">
<script src="code.js"></script>
</head>
<body>
</body>
</html>
Rozpocznijmy analizę od doctype’u:
<!DOCTYPE html>
Informujemy przeglądarkę, iż niniejszy dokument należy potraktować jako zapisany w standardzie HTML 5. Oczywiście przeglądarka posiada wiele mechanizmów kompatybilności wstecznej ze standardami HTML 4.01 i XHTML (więc jeżeli zapiszemy coś wg 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 w W3Schools.
To teraz pora sprawić, aby polskie ogonki wyświetlały się poprawnie. Potrzebujemy dopilnować obecności dwóch zapisów oraz poprawnie ustawić kodowanie pliku HTML:
1. Ustawienie polskiego języka witryny:
<html lang="pl">
2. Użycie zestawu znaków utf-8 (lub ewentualnie iso-8859-2) – tag meta charset powinien być pierwszym tagiem wstawionym do sekcji head.
<meta charset="utf-8">
Istnieje także dłuższa wersja tagu, którą można stosować zamiennie z wersją powyższą – więcej szczegółów znajdziesz tutaj.
3. To samo kodowanie (zestaw znaków, czyli charset) ustawiamy dla naszego dokumentu HTML – kodowanie można sprawdzić / zmienić w edytorze (IDE). W przypadku Notepada++ zaglądamy do menu Format (lub w wersji angielskiej interfejsu do opcji Encoding).
To teraz pora określić tytuł (znaczniki title):
<title>Książki science-fiction, które musisz przeczytać!</title>
Tytuł podstrony jest bardzo ważny w kontekście SEO – zwróć szczególną uwagę na jego długość (wykorzystaj całe dostępne miejsce) oraz zawartość (tytuł powinien zawierać kluczowe frazy, na które pozycjonujemy witrynę).
Kolejny ważny w kontekście SEO znacznik meta – opis strony w wyszukiwarce:
<meta name="description" content="Lista najlepszych książek z zakresu fantastyki, science-fiction wartych przeczytania! Fantastyka naukowa - TOP Lista Wszech Czasów">
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 / zainteresować go właśnie naszą witryną.
Pora na słowa kluczowe (meta keywords):
<meta name="keywords" content="książki, science, fiction, fantastyka, sf">
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 przesadnej czułości i płonnych nadziei wstawiamy go siłą tradycji nie licząc jednak na zbyt wiele benefitów w zamian.
Określenie autorstwa witryny:
<meta name="author" content="Trevor Philips Industries">
Tag opcjonalny, ale wciąż możliwy do umieszczenia. W praktyce dużo lepiej podpisać się na stronie linkiem do własnej witryny (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ę znajdziesz tutaj – zachęcam do lektury.
Podpięcie (zainkludowanie) zewnętrznego skryptu JavaScript:
<script src="code.js"></script>
Atrybut: type="text/javascript"
jest opcjonalny, a nawet zbędny w HTML 5, 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 kod JS rzeczywiście jest interpretowany przez przeglądarkę. Uwaga: w samym pliku z rozszerzeniem JS nie trzeba już pisać tagów <script>
.
Na koniec wspomnijmy jeszcze o dyskusji na temat domykania tagów w HTML 5 w porównaniu do XHTML i HTML 4.01 – czy należy kończyć pojedyncze znaczniki znakiem / czy nie? Czyli czy powinno się zapisać:
<meta charset="utf-8">
czy jednak:
<meta charset="utf-8" />
Otóż zgodnie ze specyfikacją HTML 5 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 ten temat znajdziesz tutaj.
Polecamy: Sekurak Academy 2024
Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus