Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

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):

strona2

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>

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , ,

Dodaj komentarz

Komentarze (9)

  • xyz pisze:

    „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

    • lukas124 pisze:

      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 ;)

  • Googlebot pisze:

    Brawo Łukasz. 38 linii kodu, a tylko 4 błędy i 4 ostrzeżenia w walidatorze. Dobra robota!

    • lukas124 pisze:

      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 ;)

  • pysio pisze:

    Charset i keywords w meta po co ?

    • lukas124 pisze:

      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ć ;)

  • Domeny pisze:

    Keyword obecnie nie jest brany pod uwagę przez roboty Google. Radzimy poczytać nowe wytyczne Google

  • 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.

Odpowiedz

Twój adres e-mail nie zostanie opublikowany.

Pin It on Pinterest