Dlaczego warto dbać o semantykę na stronie?

Wstęp

Elementy semantyczne HTML to takie, które jasno opisują swoje znaczenie zarówno dla ludzi, jak i maszyn. Elementy takie jak <header>, <footer> i <article> uważane są za semantyczne, ponieważ dokładnie opisują przeznaczenie elementu oraz rodzaj zawartości, jaka się w nich znajduje.

Czym są elementy semantyczne?

HTML został pierwotnie stworzony jako język znaczników do opisu dokumentów w początkowych fazach internetu. W miarę rozwoju i rozpowszechniania się internetu, zmieniały się jego potrzeby.

Internet, pierwotnie przeznaczony do udostępniania dokumentów naukowych, zaczął być wykorzystywany do dzielenia się również innymi treściami. Szybko ludzie zaczęli dążyć do tego, aby strony internetowe wyglądały atrakcyjniej.

Ponieważ internet nie został początkowo zbudowany z myślą o projektowaniu, programiści używali różnych sztuczek, aby umieszczać elementy na stronach w różny sposób. Zamiast używać <table> do opisywania informacji w tabeli, programiści używali ich do pozycjonowania innych elementów na stronie.

W miarę rozwoju wizualnego projektowania stron, programiści zaczęli używać ogólnych, „niesemantycznych” znaczników jak <div>. Często przypisywali tym elementom atrybuty klasy lub id, aby opisać ich przeznaczenie. Na przykład, zamiast <header> często pisano <div class=”header”>.

Pomimo że HTML5 jest stosunkowo nowy, użycie niesemantycznych elementów jest nadal bardzo powszechne na stronach internetowych.

Lista nowych elementów semantycznych

Do semantycznych elementów dodanych w HTML5 należą: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> Elementy takie jak <header>, <nav>, <section>, <article>, <aside> i <footer> działają mniej więcej jak elementy <div>. Grupują inne elementy w sekcjach strony. Jednak w przeciwieństwie do znacznika <div>, który może zawierać dowolny typ informacji, łatwo jest zidentyfikować, jakiego rodzaju informacje powinny znaleźć się w semantycznym regionie <header>.

Dlaczego warto używać elementów semantycznych?

Aby przyjrzeć się korzyściom płynącym z użycia elementów semantycznych, oto dwa fragmenty kodu HTML. Pierwszy blok kodu używa elementów semantycznych:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

Pierwszy z nich jest znacznie łatwiejszy do odczytania. Jest to prawdopodobnie pierwsza rzecz, którą zauważysz, patrząc na pierwszy blok kodu używający elementów semantycznych. Jest to mały przykład, ale jako programista możesz czytać setki lub tysiące linii kodu. Im łatwiej jest czytać i rozumieć ten kod, tym łatwiejsza staje się praca.

Poprawia dostępność. Nie tylko ty znajdujesz elementy semantyczne łatwiejsze do zrozumienia. Wyszukiwarki i technologie wspomagające (takie jak czytniki ekranowe dla użytkowników z zaburzeniami wzroku) również lepiej rozumieją kontekst i zawartość twojej strony, co oznacza lepsze doświadczenia dla twoich użytkowników.

Ogólnie rzecz biorąc, elementy semantyczne prowadzą również do bardziej spójnego kodu. Tworząc nagłówek za pomocą elementów niesemantycznych, różni programiści mogą to zapisać jako <div class="header">, <div id="header">, <div class="head"> lub po prostu <div>. Istnieje wiele sposobów na stworzenie elementu nagłówka, a wszystko zależy od osobistych preferencji programisty. Tworząc standardowy element semantyczny, ułatwia to pracę wszystkim.

Od października 2014 r., HTML4 został uaktualniony do HTML5, wraz z kilkoma nowymi elementami „semantycznymi”. Do dziś niektórzy z nas mogą nadal być zdezorientowani, dlaczego istnieje tak wiele różnych elementów, które nie wydają się przynosić żadnych znaczących zmian.

<section> i <article>

„Jaka jest różnica?”, możesz zapytać. Oba te elementy są używane do sekcjonowania treści i tak, z pewnością mogą być używane zamiennie. To kwestia tego, w jakiej sytuacji. HTML4 oferował tylko jeden rodzaj elementu kontenerowego, którym jest <div>. Chociaż jest on nadal używany w HTML5, HTML5 dostarczyło nam <section> i <article> jako sposób na zastąpienie <div>.

Elementy <section> i <article> są koncepcyjnie podobne i wymienne. Aby zdecydować, który z nich wybrać, zwróć uwagę na następujące kwestie:

Artykuł jest przeznaczony do niezależnego dystrybuowania lub ponownego wykorzystania. Sekcja to tematyczne grupowanie treści.

<section>
  <p>Najważniejsze wiadomości</p>
  <section>
    <p>Aktualności</p>
    <article>Historia 1</article>
    <article>Historia 2</article>
    <article>Historia 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Historia 1</article>
    <article>Historia 2</article>
    <article>Historia 3</article>
  </section>
</section>

<header>
  <h1>Firma A</h1>
  <ul>
    <li><a href="/home">Strona główna</a></li>
    <li><a href="/about">O nas</a></li>
    <li><a href="/contact">Kontakt</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

<!-- Notatka: Element <hgroup> powinien być używany tam, gdzie chcesz mieć główny nagłówek z jednym lub więcej podtytułami. -->

<hgroup>
  <h1>Nagłówek 1</h1>
  <h2>Podtytuł 1</h2>
  <h2>Podtytuł 2</h2>
</hgroup>

PAMIĘTAJ, że element <header> może zawierać dowolną treść, ale element <hgroup> może zawierać tylko inne nagłówki, to znaczy <h1> do <h6> włącznie z <hgroup>.

<aside>

Element <aside> jest przeznaczony dla treści, które nie są częścią przepływu tekstu, w którym się pojawiają, ale są w jakiś sposób z nim związane. Pomyśl o <aside> jako o pasku bocznym do głównej treści.

<aside>
  <p>To jest pasek boczny, na przykład definicja terminu lub krótkie tło historycznej postaci.</p>
</aside>

Przed HTML5 nasze menu były tworzone z <ul> i <li>. Teraz, razem z tymi, możemy oddzielić nasze elementy menu za pomocą <nav>, do nawigacji między twoimi stronami. Możesz mieć dowolną liczbę elementów <nav> na stronie, na przykład, jest powszechne, aby mieć globalną nawigację na górze (w <header>) i lokalną nawigację w pasku bocznym (w elemencie <aside>).

<nav>
  <ul>
    <li><a href="/home">Strona główna</a></li>
    <li><a href="/about">O nas</a></li>
    <li><a href="/contact">Kontakt</a></li>
  </ul>
</nav>

Jeśli jest <header>, musi być również <footer>. Element <footer> znajduje się zazwyczaj na dole dokumentu, sekcji lub artykułu. Podobnie jak <header>, zawartość zwykle obejmuje metainformacje, takie jak szczegóły dotyczące autora, informacje prawne i/lub linki do powiązanych informacji. Jest również ważne, aby zawierać elementy <section> w stopce.

<footer>©Firma A</footer>

<small>

Element <small> często pojawia się w elemencie <footer> lub <aside> i zwykle zawiera informacje o prawach autorskich lub informacje prawne oraz inne takie drobne druki. Jednak nie jest to przeznaczone do zmniejszania tekstu. Opisuje jego zawartość, a nie przepisuje prezentację.

<footer><small>©Firma A</small> Data</footer> 

<time>

Element <time> pozwala dołączyć niejednoznaczną datę ISO 8601 do czytelnej dla ludzi wersji tej daty.

<time datetime="2017-10-31T11:21:00+02:00">Wtorek, 31 października 2017</time> 

Dlaczego warto używać <time>? Chociaż ludzie mogą czytać czas, który można rozróżnić przez kontekst w normalny sposób, komputery mogą czytać datę ISO 8601 i widzieć datę, czas i strefę czasową.

<figure> i <figcaption>

<figure> służy do otaczania treści obrazu, a <figcaption> do podpisania obrazu.

<figure> 
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" /> 
  <figcaption>Okładka Śródziemia: Cień Mordoru</figcaption> 
</figure>

Chociaż w tym tekście nie omawiam wszystkich dostępnych semantycznych znaczników, zachęcam do dalszego zgłębiania tematu. Dla tych, którzy są zainteresowani i chcieliby dowiedzieć się więcej, przygotowałem linki na dole, które prowadzą do szczegółowych zasobów i przewodników na temat semantycznych elementów HTML5. To fascynujące źródło wiedzy dla każdego, kto chce pogłębić swoje umiejętności w zakresie nowoczesnego projektowania stron internetowych.

Dowiedz się więcej o nowych elementach HTML5:

• w3schools dostarcza proste i jasne opisy wielu nowych elementów oraz informacje, jak i gdzie powinny być używane.
• MDN również dostarcza świetne źródło informacji o wszystkich elementach HTML i zagłębia się w każdy z nich.