HTML i CSS dla początkujących (Część 19): Semantyka w sieci (2)

Aktualnie dokumenty HTML są zazwyczaj strukturyzowane za pomocą elementów div. Formatowanie i pozycjonowanie tych kontenerów zazwyczaj odbywa się za pomocą CSS. Dla oprogramowania takiego jak czytniki ekranowe takie podejście jest oczywiście bezużyteczne, ponieważ nie mogą one rozpoznać, jakie znaczenie mają określone treści. To ma się zmienić dzięki nowym elementom strukturyzacyjnym.

Dwa z najważniejszych nowych elementów to sekcja i artykuł, które są tutaj omawiane w tym samouczku.

Oznaczanie artykułów

Za pomocą elementu article teksty (posty na forum, artykuły w gazetach itp.) można oznaczać jako artykuły. Poniższy przykład pokazuje definicję typowego artykułu.

<article>
   <h1>Tworzenie aplikacji internetowych (Część 09): jQuery mobile (1)</h1>
   <p>jQuery jest niewątpliwie jedną z najbardziej znanych bibliotek JavaScript. Na „klasycznych” stronach internetowych jQuery jest więc używany już tysiące razy ...</p>
   ...
</article>

Dzięki elementowi article można zatem semantycznie strukturyzować treści.

Jak to może wyglądać, można łatwo zobaczyć na przykładzie bloga.

<article>
  <header>
    <h1>Tworzenie aplikacji internetowych (Część 09): jQuery mobile (1)</h1>
    <p>Opublikowano: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery jest niewątpliwie jedną z najbardziej znanych bibliotek JavaScript. Na „klasycznych” stronach internetowych jQuery jest więc używany już tysiące razy ...</p>
  ...
  <footer>
    <p><small>Prawa autorskie należą do PSD-Tutorials.de</small></p>
  </footer>
</article>

W tym przykładzie wewnątrz elementu article dokonuje się typowego podziału na sekcję nagłówka, główną i stopkę. I taki podział często można znaleźć na blogach.

Tworzenie sekcji

Kolejnym elementem jest element section. Element section dzieli stronę na różne sekcje. Może to być na przykład sekcje, rozdziały, karty itp. Element section pozwala na logiczne oddzielenie obszarów takich jak wprowadzenie czy aktualne wiadomości.

section służy do podziału treści na rzeczywiste, logiczne punkty. Na różnicę między section a div jeszcze wrócę na końcu tego samouczka.

Poniższy przykład pokazuje typową strukturę blogu. Jednak ta struktura zawiera coś, co jest faktycznie potrzebne w wielu blogach, a mianowicie obszar komentarzy. Ten obszar komentarzy jest zdefiniowany wewnątrz elementu section. Poszczególne komentarze wewnątrz sekcji section z kolei są zawarte w osobnych elementach article.

<article>
  <header>
    <h1>Tworzenie aplikacji internetowych (Część 09): jQuery mobile (1)</h1>
    <p>Opublikowano: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery jest niewątpliwie jedną z najbardziej znanych bibliotek JavaScript. Na „klasycznych” stronach internetowych jQuery jest więc używany już tysiące razy...</p>
  ...

  <section>
    <h2>Komentarze</h2>
    <article>
      <header>
      <h3>Skomentowane przez: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Godzinę temu</time></p>
    </header>
    <p>Dziękuję za samouczek!</p>
    </article>
    <article>
      <header>
      <h3>Skomentowane przez: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Dwie godziny temu</time></p>
    </header>
    <p>Znakomicie! To mi pomaga.</p>
    </article>
  </section>
</article>

Jeszcze raz chciałbym zwrócić uwagę, że wspomniane tutaj elementy, takie jak header, footer itp., będą oczywiście omówione bardziej szczegółowo. W tym miejscu tylko tyle: Te elementy pozwalają na podział treści na obszary nagłówka i stopki, umożliwiając tym samym dalszą logiczną strukturę dokumentów.

Inny przykład ma na celu jeszcze bardziej wyjaśnienie kombinacji elementów article i section. Faktycznie można użyć elementu section do podziału artykułu na logiczne obszary treści, z własnymi nagłówkami dla każdego z nich.

<article> 
  <h1>Tworzenie aplikacji</h1> 
  <p>Tutaj dowiesz się, jak tworzyć aplikacje webowe.</p>
  <section> 
     <h2>Tworzenie aplikacji internetowych (Część 09): jQuery mobile (1)</h2> 
     <p>jQuery jest niewątpliwie jedną z najbardziej znanych bibliotek JavaScript.</p> 
   </section> 
  <section> 
     <h2>Tworzenie aplikacji internetowych (Część 08): Szybki start w jQuery</h2> 
     <p>JavaScript jest świetny dla stron internetowych, ponieważ można w ten sposób zrobić wiele ciekawych rzeczy.</p> 
   </section> 
 </article>

Warto również zauważyć, że wewnątrz elementu section można zdefiniować elementy article. Typowym przykładem jest obszar komentarzy, tak jak już zostało pokazane. Możliwe jest jednak również podzielenie sekcji na obszary tematyczne omawiane na blogu.

Znów przykład:

<section> 
  <h1>Tworzenie aplikacji</h1>
  <article> 
     <h2>Tworzenie aplikacji webowych (Część 09): jQuery Mobile (1)</h2> 
     <p>jQuery jest jedną z najbardziej znanych bibliotek JavaScript.</p> 
   </article> 
  <article> 
     <h2>Tworzenie aplikacji webowych (Część 08): Szybkie wprowadzenie do jQuery</h2> 
     <p>JavaScript jest świetny do strony internetowej, umożliwiając wykonywanie różnych interesujących rzeczy.</p> 
   </article>    
 </section>

W sekcji mogą występować inne elementy sekcji. Zagnieżdżenia są dozwolone. Kolejny przykład:

<section>
    <h1>PSD-Tutorials.de</h1> 
    <section>     
      <h2>Witaj</h2>     
      <p>Cieszymy się...</p>
    </section>   
    <section>     
      <h2>Tutoriale</h2>
      <p>Tutaj znajdziesz nasze najnowsze tutoriale...</p> 
    </section>
    <aside>
      <p>Kontakt</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Takie zagnieżdżenie sekcji tworzy następującą strukturę:

1. PSD-Tutorials.de

1.1 Witaj

1.2 Tutoriale

1.3 Kontakt

2. (c) 2014 PSD-Tutorials.de
   
   Takie strukturyzacje są również możliwe.
   
   

Różnice między div, article a section

Rzeczywiście nie jest łatwo zrozumieć różnicę między div, article a section. W rzeczywistości element article został zdefiniowany głównie do strukturyzacji wpisów na blogu. Element section jest faktycznie umieszczony na poziomie niżej niż article. Wewnątrz elementu section zawsze powinien być zdefiniowany nagłówek. Nawet jeśli nie jest faktycznie zdefiniowany nagłówek, teoretycznie możliwe jest podanie nagłówka w danym elemencie.

Oczywiście elementy div nie są odrzucane w HTML5 i nadal powinny być używane. Są one interesujące na przykład do grupowania elementów.

Na koniec warto zwrócić uwagę na efekty wizualne dotychczas przedstawionych elementów. Faktycznie do odpowiedniego sformatowania potrzebne jest CSS. Standardowo stosowanie pokazanych elementów nie ma efektu w przeglądarce. Służą one wyłącznie do semantycznego strukturyzowania treści. Całą część odpowiedzialną za wygląd reguluje się poprzez arkusze stylów.