Ostatnio edytowany:

Brakujące elementy HTML podstawowej struktury HTML

Autor: Virtual Patriot

W jednej z poprzednich części tego kursu HTML poznaliśmy podstawową strukturę dokumentu HTML.

Przykład:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Moje ulubione rzeczy</title>
  </head>
  <body>

    <!-- MIEJSCE NA KOD HTML CZĘŚCI BODY DOKUMENTU HTML -->

  </body>
</html>

Do naszej podstawowej struktury dokumentu HTML możemy dodać kilka kolejnych elementów HTML w oparciu o informacje, które niedawno poznaliśmy.

Do naszej podstawowej struktury dokumentu HTML możemy dodać informację na temat - kto jest autorem danego dokumentu HTML.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Jan Kowalski">
    <title>Moje ulubione rzeczy</title>
  </head>
  <body>

    <!-- MIEJSCE NA KOD HTML CZĘŚCI BODY DOKUMENTU HTML -->

  </body>
</html>

Element meta będący elementem dzieckiem elementu head, posiadający atrybut name o wartości author oraz posiadający atrybut content o wartości Jan Kowalski jest informacją dla przeglądarki internetowej o tym, że autorem danego dokumentu HTML jest - Jan Kowalski.

Kolejną informacją, jaką możemy dodać do naszej podstawowej struktury dokumentu HTML jest informacja na temat - jaki bazowy język posiada treść reprezentowana przez zawartość danego dokumentu HTML.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="pl">
    <meta name="author" content="Jan Kowalski">
    <title>Moje ulubione rzeczy</title>
  </head>
  <body>

    <!-- MIEJSCE NA KOD HTML CZĘŚCI BODY DOKUMENTU HTML -->

  </body>
</html>

Element meta będący elementem dzieckiem elementu head, posiadający atrybut http-equiv o wartości content-language oraz posiadający atrybut content o wartości pl jest informacją dla przeglądarki internetowej o tym, że bazowym językiem, jaki posiada treść reprezentowana przez zawartość danego dokumentu HTML jest - język polski.

Możemy również w nieco inny sposób podpowiedzieć przeglądarce internetowej - jaki bazowy język posiada treść reprezentowana przez zawartość danego dokumentu HTML.

Przykład:

<!DOCTYPE HTML>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Jan Kowalski">
    <title>Moje ulubione rzeczy</title>
  </head>
  <body>

    <!-- MIEJSCE NA KOD HTML CZĘŚCI BODY DOKUMENTU HTML -->

  </body>
</html>

Element html posiadający atrybut lang o wartości pl jest informacją dla przeglądarki internetowej o tym, że bazowym językiem, jaki posiada treść reprezentowana przez zawartość wspomnianego elementu html jest - język polski.

Kolejną informacją, jaką możemy dodać do naszej podstawowej struktury dokumentu HTML jest informacja na temat - o czym jest treść reprezentowana przez zawartość danego dokumentu HTML.

<!DOCTYPE HTML>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Jan Kowalski">
    <meta name="description" content="Chcesz dowiedzieć się, jakie są moje ulubiony rzeczy? Ten artykuł powie Ci, jaki jest mój ulubiony kwiat oraz kolor.">
    <title>Moje ulubione rzeczy</title>
  </head>
  <body>

    <!-- MIEJSCE NA KOD HTML CZĘŚCI BODY DOKUMENTU HTML -->

  </body>
</html>

Element meta będący elementem dzieckiem elementu head, posiadający atrybut name o wartości description oraz posiadający atrybut content o wartości Chcesz dowiedzieć się, jakie są moje ulubiony rzeczy? Ten artykuł powie Ci, jaki jest mój ulubiony kwiat oraz kolor. jest informacją dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość danego dokumentu HTML jest treścią, z której użytkownik może dowiedzieć się co nieco o naszych ulubionych rzeczach. W tym wypadku o naszym ulubionym kwiecie oraz o naszym ulubionym kolorze.

Jednak jakie elementy HTML możemy umieścić w części BODY dokumentu HTML?

Przykład:

<!DOCTYPE HTML>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Jan Kowalski">
    <meta name="description" content="Chcesz dowiedzieć się, jakie są moje ulubiony rzeczy? Ten artykuł powie Ci, jaki jest mój ulubiony kwiat oraz kolor.">
    <title>Moje ulubione rzeczy</title>
  </head>
  <body>

    <h1>Mój blog</h1>

    <article>
      <h1>Mój ulubiony kwiat</h1>
      <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
      <p>Ponieważ róża to symbol miłości.</p>
    </article>

    <article>
      <h1>Mój ulubiony kolor</h1>
      <p>Moim ulubionym kolorem jest kolor <b>błękitny</b>.</p>
      <p>Ponieważ błękitny to kolor nieba.</p>
    </article>

  </body>
</html>

Jednak dlaczego takie elementy HTML, a nie inne? Dlaczego w takiej kolejności, a nie w innej? Czy jakieś inne elementy HTML również mogą znaleźć się w części BODY dokumentu HTML?

Droga do zrozumienia prawdziwej natury kodu HTML jest jeszcze długa i szeroka, dlatego czas zrobić kolejny krok w tym celu, co na pewno ułatwi nam zapoznanie się z poszczególnymi kategoriami HTML.