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, kodowaniu 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 zamieszonym 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 znaczniku <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" />
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="robot" 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 ?
keywords jest dla Google i innych wyszukiwarek, chodziarz nie wiem czy to coś daje ale jest taki meta-tag więc napisałem, a charset to kodowanie znaków, czasami jest problem z polskimi literami więc warto to mieć ;)
Keyword obecnie nie jest brany pod uwagę przez roboty Google. Radzimy poczytać nowe wytyczne Google
Nic takiego nie napisałem, również radzę czytać dokładnie ;)
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.