Podstawowy szkielet strony internetowej oparty o HTML 5 – meta oraz link tagi
Mając już podstawowy szkielet strony internetowej przyjrzymy się w tym artykule najczęściej używanym tak zwanym meta oraz link tagom. Służą one między innymi do zapisania informacji przydatnych dla wyszukiwarek, określenia kodowania znaków oraz podpięcia zewnętrznych plików, np. arkuszy stylów CSS.
W poprzedniej części tego artykułu napisaliśmy podstawowy szkielet strony internetowej w oparciu o HTML 5. Graficznie prezentuje się on tak (przeglądarka Google Chrome):
Kod HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tytuł strony...</title>
</head>
<body>
<header>
Nagłówek
</header>
<nav>
Menu główne
</nav>
<section>
<article>
Zawartość artykułu
</article>
</section>
<aside>
Kolumna boczna
</aside>
<footer>
Stopka
</footer>
</body>
</html>
Teraz przyszła pora na jego rozbudowę. W tej części zabierzemy się za tak zwaną „głowę dokumentu” czyli sekcję HEAD. Jak już pewnie wiecie, wszystko co zostanie tam umieszczone nie jest widoczne w oknie przeglądarki (oczywiście poza tytułem strony zamieszczonym w tagu <title> </title>). Pomimo tego, że nie ma tam żadnych elementów, które potem wyświetlane są na stronie internetowej należy pamiętać, że to właśnie w „głowie” dołączamy do budowanej witryny WWW style CSS, skrypty JavaScript, czcionki oraz zamieszczamy różnego rodzaju informacje dla wyszukiwarek internetowych co z punktu widzenia SEO (ang. Search Engine Optimization) jest bardzo ważne.
Jak widać do tej pory zdefiniowaliśmy tytuł strony oraz kodowanie znaków:
<head>
<meta charset="UTF-8" />
<title>Tytuł strony...</title>
</head>
Na początku budowy naszego portalu internetowego dodamy takie elementy jak:
- Opis strony WWW,
- Słowa kluczowe,
- Informacje o arkuszu stylów CSS,
- Informacje o skrypcie JavaScript,
- Informacje o autorze,
- Informacje o kanale RSS.
Opis strony WWW
W HTML 5 za dodanie opisu strony odpowiedzialny jest znacznik <meta /> wyposażony w atrybut name zawierający wartość „description„:
<meta name="description" content="Opis strony internetowej..." />
Słowa kluczowe
Słowa kluczowe podobnie jak opis strony również umieszczamy za pośrednictwem znacznika <meta /> ale tym razem wyposażonego w atrybut name o wartości „keywords„:
<!-- Słowa kluczowe oddzielamy przecinkiem !--> <meta name="keywords" content="blog, programowanie, HTML 5, tutorial, Strefa kodera, StrefaKodera.pl" />
Aktualizacja: Google oficjalnie potwierdziło (już w 2009 r.), że nie używa meta tagu keywords w rankingu wyników wyszukiwania. Jego dodawanie ma dziś znaczenie co najwyżej porządkowe.
Dołączanie arkusza stylów CSS
W HTML 5 za dołączanie zewnętrznych plików odpowiedzialny jest znacznik <link />. Arkusze stylów podpinamy do dokumentu HTML w następujący sposób:
<link rel="stylesheet" href="css/style.css" />
Atrybut href przyjmuje ścieżkę do pliku .css względem pliku .html w którym został umieszczony.
Dołączanie skryptów JavaScript
Skrypty JS w HTML 5 dołączamy za pomocą znacznika <script> </script>:
<script src="js/skrypt.js"></script>
Atrybut src przyjmuje tutaj ścieżkę do pliku .js względem pliku .html w którym został umieszczony.
Informacje o autorze
Informacje o autorze umieszczamy oczywiście za pośrednictwem tagu <meta />, którego atrybut name przyjmuje wartość author:
<meta name="author" content="Łukasz Dudziński" />
Informacje o kanale RSS
Dobrą praktyką jest również podlinkowanie do kanału RSS. Wykonuje się to za pomocą znacznika <link />:
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://strefakodera.pl/feed" />
Blokowanie indeksowania strony przez wyszukiwarki
Warto jeszcze wspomnieć na koniec, że za pomocą znacznika <meta /> możemy poinformować wyszukiwarkę iż nie chcemy aby dana strona była indeksowana (oczywiście to nie daje nam 100% pewności, że właśnie tak się stanie):
<meta name="robots" content="noindex" />
Słowo kluczowe noindex podane jako wartość atrybutu content informuje wyszukiwarkę o nie indeksowaniu.
Cały kod
Poniżej prezentuję cały kod HTML jaki do tej pory został napisany:
<!doctype html>
<html>
<head>
<title>Tytuł strony...</title>
<!-- meta tagi !-->
<meta charset="UTF-8" />
<meta name="description" content="Przykładowa strona internetowa oparta o HTML 5 i CSS 3" />
<meta name="keywords" content="blog, programowanie, HTML 5, tutorial, Strefa kodera, StrefaKodera.pl" />
<meta name="author" content="Łukasz Dudziński" />
<!-- link tagi !-->
<link rel="stylesheet" href="css/style.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://strefakodera.pl/feed" />
<!-- skrypty !-->
<script src="js/skrypt.js"></script>
</head>
<body>
<header>
Nagłówek
</header>
<nav>
Menu główne
</nav>
<section>
<article>
Zawartość artykułu
</article>
</section>
<aside>
Kolumna boczna
</aside>
<footer>
Stopka
</footer>
</body>
</html>
„Atrybut href przyjmuje bezwzględną ścieżkę do pliku .css względem pliku .html…”
bezwzględną, względem pliku html?
btw. dawno nie widziałem tak słabego merytorycznie artykułu
No chodzi o ścieżkę dostępu względem pliku html w którym ten znacznik się znajduje, to są proste rzeczy i wydaje mi się, że takie sformułowanie jest zrozumiałe no ale widzę, że nie więc poprawiam ;)
Brawo Łukasz. 38 linii kodu, a tylko 4 błędy i 4 ostrzeżenia w walidatorze. Dobra robota!
Wkradała mi się literówka w słowie „content” napisałem „conent” – to był jedyny błąd jaki zgłaszał walidator. Już poprawiam ;)
PS: Teraz przechodzi bezbłędnie ;)
Charset i keywords w meta po co ?
Taki szkielet się przyda, chociaż ciągle sporo stron woli korzystać ze starych „divów” :) Chyba nie ma to wielkiego znaczenia… Za to polecam dawać skrypty javascript zaraz przed zamykającym tagiem body. Jest szansa, że to przyspieszy ładowanie strony.