Główne zdjęcie witryny
Nie widzimy rzeczy takimi, jakie są. Widzimy je takimi, jakimi my jesteśmy. – Anais Nin

Podstawy semantyczności elementów w HTML – część I

Logo HTML5

Każdy, nawet początkujący, współczesny Front-End Webdeveloper doskonale wie, że za strukturę dokumentu strony internetowej odpowiada język HTML, natomiast dogłębny i nadający charakteru wygląd można jej nadać właściwie tylko za pomocą styli CSS. Chociaż, że większość znaczników HTML mają z góry nadany wygląd, tak na prawdę każdy z nich ma własne wyjątkowe przeznaczenie dla którego powinien zostać użyty umieszczając go na stronie WWW. Nie można bowiem wykorzystać znacznika <table> do budowy struktury witryny – służy on jedynie prezentacji danych tabelarycznych. Z tego względu ukształtowało się pojęcie semantyczności znaczników HTML, które nie zawiera w sobie informacji jak dany element wygląda, lecz co zawiera oraz co oznacza. W pierwszej części tego poradnika przedstawię Ci podział elementów blokowych HTML ze względu na przeznaczenie oraz pokrótce opiszę co tak naprawdę oznaczają.

Wprowadzenie

Powszechnie przyjęło się, że w języku HTML występują dwa rodzaje elementów: blokowe oraz śródliniowe. Jednak wgłębiając się nieco we wzorce projektowe można dokonać innej (oraz precyzyjniejszej) klasyfikacji elementów blokowych na trzy grupy elementów, które wymieniam poniżej:

  • Elementy blokowe strukturalne
  • Elementy blokowe terminalne
  • Elementy blokowe wszechstronne

Jak narazie, nazwy te nic nam nie mówią, dlatego przyjrzymy się im dokładniej w dalszej części tego artykułu. Nadmieniam, iż w tym poradniku nie wymieniłem wszystkich elementów dostępnych w specyfikacji HTML5, lecz te najważniejsze, które każdy webmaster powinien znać. Tekst został opracowany na podstawie książki Michael'a Bowers'a, Dionysios'a Synodinos'a i Victor'a Sumner'a pt. „HTML5 i CSS3. Zaawansowane wzorce projektowe”. Na końcu przedstawiłem wzór wykorzystania poznanych elementów na przykładzie prawidłowej wewnętrznej struktury elementu <body> naszej strony internetowej.

Elementy blokowe strukturalne

Za pomocą strukturalnych elementów blokowych jesteśmy w stanie zbudować prawidłową konstrukcję dokumentu HTML, którego ciało stanowi nijako podstawowy szkielet naszej strony internetowej.

Bloki strukturalne mogą zawierać tylko elementy blokowe. Mają one znaczenie w strukturze dokumentu, ale nie są znaczące pod względem semantycznym. Innymi słowy, nie „informują”, czym coś jest, lecz jak to coś jest zorganizowane.
  • <header></header> – Element ten reprezentuje część wprowadzającą do naszej strony lub danego bloku strukturalnego. Jeśli jest stosowany w odniesieniu całej strony, wówczas może zawierać tytuł w postaci elementu <h1> lub loga (obrazu graficznego) oraz części nawigacyjnej witryny. Nie ma ograniczeń co do ilości takich nagłówków, dlatego może być dodawany również do artykułów, czy sekcji.
  • <footer></footer> – Element ten reprezentuje stopkę naszej strony lub danego bloku strukturalnego. Przechowuje zwykle informacje na temat autora, linków do powiązanych dokumentów, praw autorskich, itp. Nie ma ograniczeń co do ilości takich stopek.
  • <nav></nav> – Element ten reprezentuje dział strony zawierający odnośniki do innych stron. Mówiąc krótko: służą do tworzenia części nawigacyjnego witryny (tzw. menu).
  • <article></article> – Element ten reprezentuje na stronie niezależną strukturę, którą można rozpowszechniać i wykorzystywać w wielu miejscach. Może to być post na forum, artykuł w czasopiśmie, wpis na blogu. Gdy elementy artykułów są zagnieżdżone, to wewnętrzny element reprezentuje artykuł w jakiś sposób odnoszący się do artykułu nadrzędnego, na przykład wpis na blogu może być umieszczony w elemencie <article> zawierającym podelementy <article> zawierające komentarze czytelników. Element ten często zawiera w sobie nagłówek <header> i/lub stopkę <footer>.
  • <section></section> – Element ten reprezentuje ogólnie sekcję dokumentu i służy do przechowywania grup fragmentów treści, które są ze sobą powiązane tematycznie. Na przykład sekcjami mogą być rozdziały, strony na kartach w oknie dialogowym albo ponumerowane części jakiegoś wywodu. Stronę główną serwisu można podzielić na sekcje zawierające wstęp, najświeższe wiadomości i informacje kontaktowe. Element ten często zawiera w sobie nagłówek <header> i/lub stopkę <footer>. Według specyfikacji HTML powinien zawierać tytuł, np. <h2> (który może znajdować się w nagłówku <header> sekcji).
  • <main></main> – Element ten ogólnie reprezentuje główną treść strony internetowej. W pojedynczym dokumencie nie można umieścić więcej niż jednego takiego elementu.
  • <aside></aside> – Element ten reprezentuje kawałek treści, który tylko nieznacznie jest powiązany z resztą strony. Często wykorzystywany w pewnym sensie do tworzenia tzw. panelu bocznego witryny.
  • <ol></ol> – Element ten służy do tworzenia list uporządkowanych i musi zawierać przynajmniej jeden element <li> reprezentujący punkt listy. Wszystkie elementy danej listy należą do tej samej grupy, a ich uporządkowanie określa kolejność albo ranking.
  • <ul></ul> – Element ten służy do tworzenia list nieuporządkowanych. Musi zawierać przynajmniej jeden element <li> reprezentujący punkt listy. Wszystkie elementy należą do tej samej grupy, ale nie mają określonej kolejności.
  • <dl></dl> – Element ten służy do tworzenia list definicji. Musi zawierać przynajmniej jeden termin <dt> i jedną definicję <dd>. Wszystkie terminy należące do danej listy są powiązanymi ze sobą synonimami, a wszystkie definicje terminów za równoważne definicje tych terminów. W specyfikacji języka HTML napisano ponadto, że listy definicji mogą mieć także szersze zastosowanie, np. do wyświetlania autorów wypowiedzi i dialogów. Ogólnie rzecz biorąc, lista definicji to struktura wiążąca ze sobą pary klucz-wartość.
  • <table></table> – Element ten służy do tworzenia tabel, których struktura opiera się na wierszach <tr> oraz zawartych w nich komórkach <td><th>. Można także tworzyć grupy wierszy: jeden nagłówek tabeli <thead>, jedną stopkę tabeli <tfoot> oraz dowolną liczbę grup treści tabeli <tbody>, a także grupy kolumn <colgroup> zawierające jedną lub więcej kolumn <col />. Grupy kolumn i kolumny to jedyne bloki strukturalne, które mają charakter relacyjny, a nie hierarchiczny, inaczej mówiąc, każdy element <col /> jest powiązany z komórkami w tworzonej przez siebie kolumnie, ale w rzeczywistości nie jest ich rodzicem. Tabela może mieć też podpis <caption>.

Elementy blokowe terminalne

Terminalne elementy blokowe zazwyczaj mają iście znaczenie semantyczne, ponieważ zawierają tylko treść właściwą.

Bloki terminalne są węzłami końcowymi blokowej struktury dokumentu i nie mogą zawierać innych bloków, z wyjątkiem elementów śródliniowych i tekstu. Ponadto, wszystkie zawierają treść odnoszącą się do treści elementu nadrzędnego.
  • Od <h1></h1> do <h6></h6> – Elementy te służą do tworzenia nagłówków dowolnego bloku, np. akapitu. Za ich pomocą budujemy hierarchię treści w danym kontenerze. <h1> jest najważniejszym nagłówkiem i zazwyczaj stanowi tytuł strony, podczas gdy <h6> jest najmniej istotny.
  • <p></p> – Element ten służy do tworzenia akapitów. Pod względem semantycznym akapit to zbiór zdań. Pierwsze zdanie określa temat akapitu, a pozostałe go rozwijają. Temat akapitu zazwyczaj odnosi się do wcześniejszego nagłówka i elementów siostrzanych.
  • <hr /> – Element ten reprezentuje zmianę tematu pomiędzy akapitami, np. zmiana sceny w powieści lub przejście do innego tematu w sekcji. Ma on ściśle zdefiniowane semantyczne znaczenie i nie służy względom prezentacyjnym, chociaż, że w poprzednich wersjach HTML znacznik ten reprezentował tylko poziomą linię.
  • <dt></dt> – Element ten służy do oznaczania terminów; pod względem semantycznym jest to termin, którego definicja lub definicje znajdują się wewnątrz elementu <dl>. Gdy używa się elementu <dl> jako struktury asocjacyjnej, to element <dt> pod względem semantycznym staje się kluczem, który jest powiązany z przynajmniej jedną wartością. Klucze, podobnie jak terminy, można wyszukiwać w celu odczytania powiązanych z nimi informacjami. Ponadto, można go zaliczyć do bloku strukturalnego pomocniczego, ponieważ jest potomkiem elementu strukturalnego <dl>.
  • <blockquote></blockquote> – Element ten służy do tworzenia cytatów blokowych. Pod względem semantycznym oznacza on cytat z zewnętrznego źródła powiązany tematycznie z elementami siostrzanymi. Jest odpowiednikiem śródliniowego elementu <q>.
  • <address></address> – Element ten reprezentuje informacje dotyczące samego dokumentu. Nie służy do przechowywania innych typów adresów, jak np. naszej ulubionej restauracji. Specyfikacja HTML zezwala na umieszczanie w tym elemencie każdego rodzaju treści, a więc adresów ulic, adresów internetowych, numerów telefonicznych itp.
  • <caption></caption> – Element ten tworzy podpis tabeli. Pod względem semantycznym jest to etykieta tabeli. Ponadto, można go zaliczyć do bloku strukturalnego pomocniczego, ponieważ jest potomkiem elementu strukturalnego <table>.

Elementy blokowe wszechstronne

Wszechstronne elementy blokowe mają najszersze zastosowanie ze wszystkich elementów blokowych.

Elementy wszechstronne można używać do budowy struktury stron i wtedy mają one znaczenie strukturalne. Gdy natomiast zostaną użyte jako elementy terminalne, zyskują znaczenie semantyczne.
  • <div></div> – Jest to najważniejszy wszechstronny element blokowy. Może być zarówno strukturalny, gdy element ten tworzy na stronie kontener dla innych elementów blokowych (co jest podstawą budowy każdego dokumentu) i/lub strukturalnym pomocniczym, gdy jest potomkiem innego elementu strukturalnego. Natomiast gdy zawiera jedynie treść właściwą staje się blokiem terminalnym.
  • <form></form> – Element ten reprezentuje formularz internetowy. Formularz użyty jako terminalny oznacza po prostu kontener dla kontrolek śródliniowych (np. <input>). Jeśli jednak element taki zawiera bloki strukturalne (np. służące do organizacji pól formularza jak <div>) lub bloki terminalne (jak nagłówki czy akapity), wtedy pełni funkcję węzła w większej strukturze.
  • <li></li> – Element ten reprezentuje element listy. Normalnie jest to blok terminalny zawierający treść właściwą, ale może też zawierać bloki strukturalne, jak tabele i inne listy, a także bloki terminalne, jak nagłówki i akapity. Ponadto, można go zaliczyć do bloku strukturalnego pomocniczego, ponieważ jest potomkiem elementu strukturalnego <ol> lub <ul>.
  • <dd></dd> – Element ten reprezentuje definicję w liście definicji. Normalnie jest to blok terminalny zawierający treść właściwą, ale może też zawierać bloki strukturalne i terminalne. Ponadto, można go zaliczyć do bloku strukturalnego pomocniczego, ponieważ jest potomkiem elementu strukturalnego <dl>.
  • <td></td> oraz <th></th> – Elementy te reprezentują komórki tabeli. Pierwszy służy do tworzenia komórek danych, a drugi komórek nagłówka. Zazwyczaj używa się ich jako bloków terminalnych zawierających treść właściwą, ale mogą też przechowywać bloki strukturalne i terminalne. Ponadto, można elementy te zaliczyć do bloków strukturalnych pomocniczych, ponieważ są potomkami elementu strukturalnego <thead>, <tbody>, <tfoot>, czy też po prostu <table>.
  • <noscript></noscript> – Element ten reprezentuje treść, która zastanie wyświetlona, gdy przeglądarka internetowa nie obsługuje skryptów lub zostały w niej one wyłączone. W jego zawartości mogą się znajdować zarówno zwykłe elementy śródliniowe, jak i kompletne dokumenty.

Przykład reprezentatywny

Na koniec zamieszczam przykład praktycznego zastosowania poznanych elementów blokowych. Poza ich semantyką, istotną uwagę zwracam na właściwy sposób zagnieżdżania znaczników, który ma kluczowe znaczenie w budowie strukturalnej prawidłowego dokumentu HTML. Oto kod:

<body>
	<noscript>Ten napis pokaże się, jeśli nie
	będzie można wykonać skryptu.</noscript>
	<header>
		<h1>Tytuł strony internetowej</h1>
		<p>Akapit</p>
		<nav>
			<h2>Menu</h2>
			<ul>
				<li>Pierwsze hiperłącze w formie
				elementu listy nieuporządkowanej</li>
				<li>Drugie hiperłącze w formie
				elementu listy nieuporządkowanej</li>
				<li>Trzecie hiperłącze w formie
				elementu listy nieuporządkowanej</li>
			</ul>
			<p>Opcjonalny akapit</p>
		</nav>
	</header>
	<main>
		<article>
			<header>
				<h2>Tytuł wpisu na blogu</h2>
				<!-- Tutaj można umieścić element śródliniowy <time>
				omawiany w następnej części tego artykułu -->
				<p>Wprowadzenie do wpisu na blogu.</p>
			</header>
			<div>
				<table>
					<caption>Podpis tabeli</caption>
					<colgroup>
						<col /><col />
					</colgroup>
					<thead>
						<tr>
							<th>Wiersz pierwszy, kolumna pierwsza</th>
							<th>Wiersz pierwszy, kolumna druga</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Wiersz drugi, kolumna pierwsza</td>
							<td>Wiersz drugi, kolumna druga</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td>Wiersz trzeci, kolumna pierwsza</td>
							<td>Wiersz trzeci, kolumna druga</td>
						</tr>
					</tfoot>
				</table>
				<ol>
					<li>Pierwszy element listy uporządkowanej</li>
					<li>Drugi element listy uporządkowanej</li>
					<li>Trzeci element listy uporządkowanej</li>
					<li>Czwarty element listy uporządkowanej</li>
				</ol>
				<dl>
					<dt>Termin pierwszy</dt>
					<dd>Definicja terminu pierwszego</dd>
					<dt>Termin drugi</dt>
					<dd>Definicja terminu drugiego</dd>
					<dt>Termin trzeci</dt>
					<dd>Definicja terminu trzeciego</dd>
				</dl>
				<form>
					<!-- Tutaj należy umieścić kontrolki formularza
					omawiane w następnej części tego artykułu -->
				</form>
			</div>
			<section>
				<h2>Komentarze</h2>
				<article>
					<h3>1</h3>
					<p>Pierwszy komentarz.</p>
					<footer>
						<p>Podpis autora komentarza</p>
					</footer>
				</article>
				<article>
					<h3>2</h3>
					<p>Drugi komentarz.</p>
					<footer>
						<p>Podpis autora komentarza</p>
					</footer>
				</article>
			</section>
		</article>
	</main>
	<aside>
		<h2>Panel boczny</h2>
		<blockquote>Cytat blokowy</blockquote>
		<hr />
		<address>Dane adresowe</address>
	</aside>
	<footer>
		<p>Informacja o prawach autorskich.</p>
	</footer>
</body>

Zakończenie

W ten sposób dobrnęliśmy do końca pierwszej części przewodnika po semantyczności elementów HTML. W tej części omawialiśmy elementy blokowe, natomiast w następnej weźmiemy pod lupę elementy śródliniowe. Do zobaczenia niebawem! Dziękuję za uwagę i proszę o komentarz!

Komentarze

Ten wpis nie ma jeszcze żadnych komentarzy. 😟

Dodaj własny komentarz

Formularz dodawania komentarza
Kontynuując przeglądanie niniejszej witryny internetowej automatycznie wyrażasz zgodę na wykorzystanie plików cookies.