Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Znaczniki tworzące układ treści strony

Poprzedni temat dotyczył znaczników które tworzą ogólny, najczęściej spotykany szkielet treści strony w aspekcie całej witryny. Teraz dokładniej omówimy wszystkie znaczniki, które będziesz stosował tworząc stronę. Znaczniki te dzielą obszar <body></body> na mniejsze obszary i podobszary. Struktura tych znaczników musi być odbiciem struktury treści, jeżeli mamy logiczną strukturę treści, to możemy mówić o spisie treści. Co to jest struktura treści? Zajrzyj do dowolnej książki. Treści powinny być tam zorganizowane w sposób logiczny - mamy tam rozdziały, które często składają się z podrozdziałów, w dalszej kolejności możemy podzielić tekst na akapity. Rozdziały mają tytuły, podrozdziały również ale pisane zwykle mniejszą czcionką, te tytuły znajdują się w nagłówkach, mamy tam spis treści itp., itd.

Znowu ta semantyka. Niestety tak, przecież chcesz aby treści Twojej strony były znajdowane przez wyszukiwarki. Aby tak było, musisz tworzyć dokumenty przyjazne dla robotów sieciowych. Pamiętaj, że robot nie rozumie tekstów i nie zastanawia się, czy to co napisałeś jest bardziej czy mniej wartościowe. Odczytuje natomiast znaczniki i tylko na tej podstawie "widzi" konstrukcję Twojej strony.

A więc niestety znowu kolejne "schody". Może być tak, że przeglądarka wyświetli piękny efekt Twojej pracy, walidator pogratuluje Ci sukcesu i z dumą spojrzysz na swoje dzieło, a tymczasem... Jeżeli się nie będziesz się przejmował strukturą treści, to robot sieciowy "ujrzy" jedną bezkształtną masę - dla niego zupełnie bez znaczenia.

Akapity

<p></p> - akapit
Jeżeli zejdziemy, na sam dół naszej struktury, to spotkamy tam akapity. Mogą być jedno lub wielowierszowe. Nie ilość ma tu znaczenie tylko jakość. Akapit musi stanowić spójny logicznie fragment tekstu, można powiedzieć - nowa myśl, nowy akapit. Jest to więc blok tekstu, a nie wcięcie pierwszego wiersza z czym jest często mylony. Co więcej, domyślnie akapit nie posiada takiego wcięcia, aby je uzyskać należy zastosować style CSS. Więcej o akapitach dowiesz się podczas omawiania elementów blokowych.

Nagłówki (tytuły) h1..h6

<h1></h1> - nagłówek stopnia 1
...
<h6></h6> - nagłówek stopnia 6

Logiczna struktura dokumentu tworzy pewnego rodzaju spis treści. Przed wersją 5 HTML podstawowym znacznikiem, który umożliwiał organizację strony były nagłówki mające postać <h1>Tytuł</h1> Cyfra 1 określa stopień nagłówka, jest 6 stopni od 1 do 6. W praktyce wyglądało do następująco:

<h1>Zdrowa żywność</h1>
<p>
  Definicja zdrowej żywności
</p>
<h2>Owoce</h2>
<p>
  Dlaczego owoce są zdrowe
</p>
<h3>Porzeczki</h3>
<p>
  Akapit opisujący porzeczki
</p>
<h4>Porzeczki czerwone</h4>
<p>
  Akapit opisujący porzeczki czerwone
</p>
<h4>Porzeczki czarne</h4>
<p>
  Akapit opisujący porzeczki czarne
</p>
Taki kod utworzy następujący spis treści;
  1. Zdrowa żywność (1 poziom)
    1. Owoce (2 poziom)
      1. Porzeczki (3 poziom)
        1. Porzeczki czerwone (4 poziom)
        2. Porzeczki czarne (4 poziom)

Ćwiczenie 1_2_1_1

Wykonaj stronę, na której zastosujesz powyższy kod. Tak powinna wyglądać wykonana strona:


HTML5 posiada znaczniki, które pozwalają opisać pokazany przykład w sposób bardziej czytelny. H1..h6 tracą rolę nagłówków, zaś tytułami dla rozdziałów i podrozdziałów. W nowym standardzie kod HTML będzie wyglądał następująco:

  <h1>Zdrowa żywność</h1>
  <p>
    Definicja zdrowej żywności
  </p>
  <section>
    <h2>Owoce</h2>
    <p>
      Dlaczego owoce są zdrowe
    </p>
    <section>
      <h3>Porzeczki</h3>
      <p>
        Akapit opisujący porzeczki
      </p>
      <section>
        <h4>Porzeczki czerwone</h4>
        <p>
         Akapit opisujący porzeczki czerwone
        </p>
        <h4>Porzeczki czarne</h4>
        <p>
          Akapit opisujący porzeczki czarne
        </p>
      </section>
    </section>
  </section>

Ćwiczenie 1_2_1_2

Wykonaj stronę, na której zastosujesz powyższy kod. Tak powinna wyglądać wykonana strona:

Jak widzimy nowym znacznikiem jest <section></section> - został opisany poniżej. Widzimy, że w obu ćwiczeniach strony pokazywane przez przeglądarkę są takie same. Więcej o nagłówkach h1..h6 dowiesz się podczas omawiania elementów blokowych.

Section i article

<section></section> - sekcja
<article></article> - artykuł

Oba znaczniki wydzielają z <body></body> obszary treści wpólnych tematycznie. Oba mogą być pojemnikami (kontereami, pudełkami) dla wewnętrznych sekcji, artykułów i akapitów - teoretycznie nie ma tu żadnych ograniczeń, praktycznie ogranicza nas logika układu treści. Należy jednak podkreślić, że nie wolno ich stosować jako pojemników w celach związanych np. z wyglądem strony - wtedy powinno się zastosować znacznik div, który nie ma znaczenia semantycznego. Artykuły i sekcje powinny posiadać jeden z nagłówków h1, h2...h6 w zależności od usytuowania w strukturze treści, przy czym nagłówki te, jak już mówiliśmy, pełnią rolę tytułów. Struktura artykułów i sekcji jest poprawna, jeżeli tytuły te tworzą pewnego rodzaju spis treści - konspekt logicznie informujący o zawartości strony.

Kiedy zastosować sekcję, a kiedy artykuł?
Artykuł mógłby być samodzielnie opublikowany, wyrwany z kontekstu zachowuje pierwotny sens. Musi być przy tym wystarczająco rozbudowany, mieć swoją wagę i wartość zasługującą na takie miano - możesz sobie na przykład zadać pytanie, czy zestaw treści, które określiłem mianem artykułu mógłby zostać wydrukowany w gazecie? Tak więc artykuł jest sekcją spełniającą wymienione warunki.
Sekcja jest przeznaczona do kontruowania szkieletu treści dokumentu. Może wyznaczać ramy całego dokumentu tak jak pokazanym wcześniej przykładzie, może także wydzielać bloki wewnątrz artykułu jak przykładzie pokazanym wyżej.

Main

<main></main> - treść główna - powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem main nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.
Należy zaznaczyć, że znacznik ten wprowadzono niedawno.
W pokazanym wcześniej schemacie przykładowego szkieletu treści strony znacznik main powinien objąć Sekcję 1 oraz Sekcję 2. Kod wyglądałby następująco:
<body>
  <header>
    Nagłówek
  </header>
  <nav>
    Menu
  </nav>
  <main>
    <section>
      Sekcja 1
    </section>
    <section>
      Sekcja 2
    </section>
  </main>
  <footer>
    Stopka
  </footer>		
</body>

Aside

<aside></aside> - treść obok - sekcja, w której umieszczamy treść powiązaną ze znacznikiem w którym występuje. Ma znaczenie uzupełniajace, nie jest wymagana do zrozumienia treści dokumentu. Gdybyśmy usunęli sekcję aside, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Należy być świadomym kontekstu w jakim go używamy. Jeśli używamy go wewnątrz article musimy pamiętać, że musi on mieć związek z artykułem, natomiast w sytuacji, w której używamy go na zewnątrz artykułu ważne jest by był on związany bezpośrednio ze stroną. Najczęściej umieszcza się w tym znaczniku przypisy oraz reklamy.

Header

<header></header> - nagłówek sekcji, w której został użyty. Strona może zawierać więcej niż jeden znacznik header, lecz każdy musi być w innej sekcji. Możemy mówić o nagłówku dokumentu oraz nagłówkach poszczególnych sekcji. Nagłówek może zawierać tytuł h1..h6, część nawigacyjną, wstęp, formularz wyszukiwarki itp.

<footer></footer> - stopka sekcji, w której została użyta. Strona może zawierać więcej niż jeden znacznik footer, lecz każdy musi być w innej sekcji. Możemy mówić o stopce dokumentu oraz stopkach poszczególnych sekcji. Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp.

Nav

<nav></nav> - sekcja nawigacyjna - zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem nav, zwykle bardziej właściwy do tego będzie element footer. Niewłaściwym miejscem dla nav będą linki umieszczone w środku treści tekstowej artykułu.

Znacznik div

<div></div> nie niesie żadnego znaczenia semantycznego, niemniej jest niezbęny w konstuowaniu strony. Znacznik div jest pojemnikiem (kontenerem, pudełkiem) dla innych znaczników. Dzięki niemu można w dokumencie tworzyć warstwy. Styl CSS zdefiniowany dla danego znacznika div może obowiązywać również znaczniki nim objęte. Na marginesie mówiąc, przed wersją 5 HTML w specyfikacji języka był tylko div, w obecnej wersji uzupełniony omówionymi wyżej znacznikami semantycznymi jak section, article, aside, header, footer, nav oraz main.

Ćwiczenie 1_2_1_3

Sporządź w zeszycie listę znaczników tworzących układ treści strony. Opisz znaczenie i zastosowanie każdego znacznika.

Praca domowa

Naucz się na pamięć nazw znaczników tworzących układ treści strony. Musisz potrafić omówić znaczenie i zastosowanie tych znaczników.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.