Główne zdjęcie witryny
Oni rzekli: Panie, tu są dwa miecze. Odpowiedział im: Wystarczy. – Łk 22, 35-38

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

Logo HTML5

W poprzedniej części tego poradnika przedstawiłem Ci podział elementów blokowych HTML ze względu na ich przeznaczenie oraz pokrótce opisałem co tak naprawdę oznaczają. Jak się okazuje, witryna z prawidłową semantyką kodu wykonana jest profesjonalnie i ma korzystny wpływ na pozycjonowanie SEO w wyszukiwarkach internetowych, a także ma ogromne znaczenie w jej obsłudze przez osoby niepełnosprawne (np. niewidome). Dlatego tak ważne jest stosowanie się do podstawowych zasad semantyczności w języku HTML. W drugiej części tego artykułu przedstawię Ci podział elementów śródliniowych HTML z semantycznego punktu widzenia.

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 śródliniowych na cztery grupy elementów, które wymieniam poniżej:

  • Element śródliniowy neutralny
  • Elementy śródliniowe typowo semantyczne
  • Elementy śródliniowe dotyczące układu
  • Elementy śródliniowo-blokowe

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 użycia poznanych elementów na praktycznym przykładzie w celu lepszego zrozumienia sposobu ich wykorzystania na naszej stronie internetowej.

Element śródliniowy neutralny

Istnieje jeden element śródliniowy neutralny, który choć nie ma żadnego specjalnego zastosowania, jest bardzo często wykorzystywany.

  • <span></span> – Element ten przeznaczony jest do frazowania treści, który z natury nie reprezentuje niczego. Ogólnie nie posiada żadnej semantyki, dlatego powinien być używany tylko wtedy, gdy nie ma zastosowania żaden inny element semantyczny. Może być używany np. do grupowania tekstu w celu jego stylizacji za pomocą styli CSS lub odwoływania się do niego z poziomu języka JavaScript.
Pamiętaj, aby unikać mieszania elementów blokowych z blokami anonimowymi, które są tworzone zakulisowo, gdy poprzedzisz lub zakończysz blok strukturalny zwykłym tekstem nieujętym żadnym znacznikiem. W takich przypadkach dla tego tekstu zawsze wykorzystuj neutralny element śródliniowy!

Elementy śródliniowe typowo semantyczne

Elementy śródliniowe typowo semantyczne najczęściej składają się z tekstu zawartego wewnątrz dowolnego elementu określającego jaki rodzaj treści się w nim znajduje. Ze względu na domyślny przydzielony im styl, można je podzielić na pogrubienie, pochylenie, podkreślenie, pismo niepropocjonalne oraz wyrównujące w pionie.

  • <strong></strong> – Element ten przeznaczony jest do mocnego uwypuklenia ważnej treści, które jest bardziej uwzględniane przez wyszukiwarki internetowe. Oczywiście, należy z niego korzystać rozsądnie, gdyż w przeciwnym razie może on zaszkodzić. Domyślny styl tego elementu to pogrubienie. Jeśli chcemy jedynie wytłuścić czcionkę, nie zmieniając jego priorytetu w tekście możemy użyć starego elementu <b>.
  • <em></em> – Element ten przeznaczony jest do lekkiego uwypuklenia ważnej treści, które jest nieco bardziej uwzględniane przez wyszukiwarki internetowe. Oczywiście, należy z niego korzystać rozsądnie, gdyż w przeciwnym razie może on zaszkodzić. Domyślny styl tego elementu to kursywa. Jeśli chcemy jedynie pochylić czcionkę, nie zmieniając jego priorytetu w tekście możemy użyć starego elementu <i>.
  • <a></a> – Element ten przeznaczony jest do tworzenia hiperłączy do innych stron internetowych lub miejsc na tej samej stronie z wykorzystaniem kotwic. Za jego pomocą można tworzyć również odsyłacze do pobierania plików, poczty elektronicznej e-mail lub innych adresów URL. Domyślny styl tego elementu to podkreślenie oraz (zazwyczaj) inny kolor czcionki.
  • <abbr></abbr> – Element ten reprezentuje skrót lub akronim, którego opis lub rozwinięcie można zdefiniować w opcjonalnym atrybucie title. W domyślnym stylu tego elementu dodawane jest kropkowane podkreślenie. Element ten jest następcą przestarzałego i usuniętego ze specyfikacji HTML5 znacznika <acronym>, którego nie powinno się już używać.
  • <dfn></dfn> – Element ten wprowadza definicję jakiegoś terminu. Znacznikiem tym powinien być objęty tylko definiowany termin, a nie cała treść definicji. Domyślny styl tego elementu to kursywa.
  • <q></q> – Element ten służy do tworzenia krótszych cytatów. Pod względem semantycznym oznacza on cytat z zewnętrznego źródła powiązany tematycznie z elementami siostrzanymi. Jest odpowiednikiem blokowego elementu <blockquote>. Domyślnie niektóre przeglądarki internetowe na początku i końcu jego treści dodają cudzysłowy.
  • <cite></cite> – Element ten reprezentuje zawartość, którą powinna być treść wskazująca na tytuł, źródło lub autora danej pracy twórczej. Domyślny styl tego elementu to kursywa.
  • <sup></sup> oraz <sub></sub> – Elementy ten reprezentują w tekście odpowiednio indeks góry oraz indeks dolny. Domyślny styl tych elementów to zmniejszona czcionka z podniesioną lub obniżoną linią bazową (tzw. wyrównanie w pionie).
  • <var></var> – Element ten reprezentuje nazwę zmiennej w kontekście matematycznym lub programistycznym. Domyślny styl tego elementu to kursywa.
  • <code></code> – Element ten reprezentuje kod komputerowy. Domyślny styl tego elementu to czcionka o stałej szerokości (tzw. pismo niepropocjonalne lub maszynowe).
  • <samp></samp> – Element ten reprezentuje przykładowy wynik działania programu komputerowego. Domyślny styl tego elementu to czcionka o stałej szerokości (tzw. pismo niepropocjonalne lub maszynowe).

Elementy śródliniowe dotyczące układu

Elementy śródliniowe dotyczące układu służą do kontrolowania rozmieszczenia tekstu.

  • <br /> – Element ten pozwala wstawiać złamania wiersza poprzez przejście do nowej linii i powrót karetki.
  • <bdo></bdo> – Element ten wraz z atrybutem dir="rtl" pozwala na odwrócenie kierunku tekstu (dokładniej znaków) poprzez zmianę strony jego pisma „z lewej do prawej” na „z prawej do lewej”.

Elementy śródliniowo-blokowe

Elementy śródliniowo-blokowe są w układzie elementów zaliczane do kontekstu śródliniowego oraz dzielą się na elementy zastępowane i kontrolki. Te pierwsze służą do wyświetlania na stronach treści zewnętrznych np. obrazów graficznych lub innych jakieś obiektów. Natomiast kontrolki to elementy formularzy przyjmujące dane od użytkowników, np. pola tekstowe.

  • <img /> – Element ten pozwala wstawiać obraz graficzny. Więcej o umieszczaniu responsywanych obrazków możesz poczytać tutaj.
  • <audio></audio> – Element ten pozwala odtwarzać dźwięk na stronie internetowej. Wraz z atrybutem controls umożliwia wstawianie interaktywnego odtwarzacza plików dźwiękowych. Mimo, że wystarczające jest podanie jednego źródła pliku w atrybucie src, to zalecane jest podanie kilku różnych formatów pliku, umieszczając wewnątrz tego elementu znaczniki <source /> wraz z odpowiednimi do nich ścieżkami dostępu.
  • <video></video> – Element ten pozwala wyświetlać film na stronie internetowej. Wraz z atrybutem controls umożliwia wstawianie interaktywnego odtwarzacza plików wideo. Mimo, że wystarczające jest podanie jednego źródła pliku w atrybucie src, to zalecane jest podanie kilku różnych formatów pliku, umieszczając wewnątrz tego elementu znaczniki <source /> wraz z odpowiednimi do nich ścieżkami dostępu.
  • <canvas></canvas> – Element ten pozwala na wstawianie płutna, na którym możemy rysować grafiki lub różne animacje przy użyciu skryptów (zazwyczaj z wykorzystaniem JavaScriptu).
  • <svg></svg> – Element ten pozwala wstawiać dwuwymiarowy wektorowy obraz graficzny zdefiniowany w języku XML osadzanym bezpośrednio w kodzie HTML strony internetowej.
  • <input /> – Element ten służy do tworzenia interaktywnych kontrolek w celu odbierania danych od użytkownika. Za jego pomocą udostępnia szeroką gamę widżetów sterujących obsługujących różne typy danych wejściowych. Jest jednym z najpotężniejszych i najbardziej złożonych ze wszystkich elementów HTML ze względu na duża liczbę możliwych kombinacji jego ustawień. Zazwyczaj jest wykorzystywany do budowy tzw. formularzy internetowych i jest potomkiem elementu blokowego <form>.
  • <textarea></textarea> – Element ten reprezentuje wielowierszową kontrolkę edycji zwykłego tekstu, która jest przydatna, gdy chcesz zezwolić użytkownikom na wprowadzanie dużej ilości tekstu w dowolnym formacie, na przykład komentarza lub opinii. Zazwyczaj jest wykorzystywany do budowy tzw. formularzy internetowych i jest potomkiem elementu blokowego <form>.
  • <select></selet> – Element ten służy do tworzenia interaktywnej kontrolki w postaci menu wyboru opcji w celu odbierania danych od użytkownika. Jego struktura opiera się na zawartych w nim liście pozycji w postaci elementów <option>. Zazwyczaj jest wykorzystywany do budowy tzw. formularzy internetowych i jest potomkiem elementu blokowego <form>.
  • <button></button> – Element ten służy do tworzenia interaktywnej kontrolki w postaci klikalnego przycisku. Zazwyczaj jest wykorzystywany do wysyłania lub resetowania tzw. formularzy internetowych i jest potomkiem elementu blokowego <form>. Jednak jego przeznaczenie nie jest z góry narzucone, dlatego może wykonywać dowolną inną akcję.

Przykład reprezentatywny

Na koniec zamieszczam przykład praktycznego zastosowania poznanych elementów śródliniowych. Poza ich semantyką, istotną uwagę zwracam co do dodawania do nich nie tylko wymaganych, ale również zalecanych atrybutów, które mają kluczowe znaczenie w poprawnym zapisie wstawianych znaczników do dokumentu HTML. Oto kod:

<body>
	<span>Zwykły tekst</span>
	<br />
	<strong>Mocne uwypuklenie</strong>
	<br />
	<em>Lekkie uwypuklenie</em>
	<br />
	<a href="#" target="_blank">Hiperłącze</a>
	<br />
	<abbr title="Rozwinięcie skrótu">Skrót</abbr>
	<br />
	<dfn>Termin definicji</dfn>
	<br />
	<q>Krótszy cytat</q>
	<br />
	<cite>Tytuł, źródło lub autor danej pracy twórczej</cite>
	<br />
	<sup>Indeks górny</sup>
	<br />
	<sub>Indeks dolny</sub>
	<br />
	<var>Zmienna</var>
	<br />
	<code>Kod komputerowy</code>
	<br />
	<samp>Przykładowy wynik działania programu komputerowego</samp>
	<br />
	<bdo dir="rtl">Tekst pisany od prawej do lewej strony</bdo>
	<br />
	<img src="https://www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
	alt="Tekst alternatywny" />
	<br />
	<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
	controls>
		Tekst wyświetlany, gdy brakuje obsługi elementu audio
	</audio>
	<br />
	<video width="250" height="200" controls>
			<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
		type="video/webm" />
		<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
		type="video/mp4" />
		Tekst wyświetlany, gdy brakuje obsługi elementu video
	</video>
	<br />
	<canvas width="300" height="150">Tekst wyświetlany, gdy brakuje obsługi elementu canvas</canvas>
	<br />
	<svg width="300" height="200">
		<polygon points="100,10 40,198 190,78 10,78 160,198"
		style="fill: orange; stroke: blue; stroke-width: 5; fill-rule: evenodd;" />
	</svg>
	<form action="#" method="post">
	<!-- <form> to element blokowy stanowiący kontener dla kontrolek śródliniowych -->
		<label for="id-pola-tekstowego">Etykieta dla pola tekstowego</label>
		<input type="text" name="nazwa-pola-tekstowego" value="wartość pola tekstowego" id="id-pola-tekstowego" />
		<br />
		<textarea rows="6" cols="30">Dłuższa treść</textarea>
		<br />
		<select name="nazwa-listy-rozwijanej">
			<option value="">-- Proszę wybrać jedną pozycję --</option>
			<option value="wartosc-pozycji-1">Pozycja 1</option>
			<option value="wartosc-pozycji-2">Pozycja 2</option>
			<option value="wartosc-pozycji-3">Pozycja 3</option>
		</select>
		<br />
		<input type="submit" value="Wyślij formularz" />
		<input type="reset" value="Wyczyść formularz" />
		<button type="button">Jakiś przycisk</button>
	</form>
</body>

Zakończenie

W ten sposób dobrnęliśmy do końca drugiej i (niestety) ostatniej części przewodnika po semantyczności elementów HTML. Prawdopodobnie nie dowiedziałeś się z niego nic nowego, ale mam nadzieję, że chcociaż przyczyniłem się do ugruntowania Twojej wiedzy. Dziękuję za uwagę i jak zwykle 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.