Znaczniki (tagi) w HTML

Przypomnijmy ogólną konwencję języka opartego na znacznikach (pojedynczych lub podwójnych). Znaczniki zapisujemy w nawiasach ostrych, wewnątrz których mogą również znajdować się tak zwane atrybuty z zapisanymi w cudzysłowie wartościami.

Znacznik pojedynczy:

<znacznik atrybut="wartosc">
   

Znacznik podwójny (tj. złożony z dwóch tagów – otwierającego i zamykającego):

<znacznik atrybut="wartosc"> </znacznik>
   

Zwróćmy uwagę, że jeżeli znacznik jest podwójny, to jego ewentualne atrybuty umieszczamy w tagu otwierającym. W klasycznej konwencji wartość atrybutu powinna zostać zapisana w cudzysłowie, nawet jeśli jest typu liczbowego.

Hiperłącza (linki)

Znacznik definiujący hipełącze na stronie internetowej wygląda następująco:

<a href="https://zpe.gov.pl">ZPE</a>
   

Nazwa tagu <a> pochodzi najprawdopodobniej od angielskiego słowa anchor, które oznacza kotwicę. Zwróćmy uwagę, że w kodzie źródłowym hiperłącze jest złożone z dwóch znaczników: ma tag otwierający oraz zamykający.

Wynika to z faktu, że należy zdefiniować obszar, którego kliknięcie aktywuje link. Czasem podlinkowany może być wieloliniowy tekst albo np. tekst wraz z obrazem,  wówczas przeglądarka musi wiedzieć, dokąd obowiązuje link.

Atrybut href to skrót od ang. hypertext reference. Określa adres dokumentu, do którego hiperłącze ma zaprowadzić. Reference w języku angielskim oznacza odniesienie i rzeczywiście czasami tak określamy linki – mówimy, że są to odnośniki do innych dokumentów.

Hiperłączem nazywamy jedynie taki element <a>, który posiada określoną wartość atrybutu href – sam element <a> odnośnikiem nie jest.

Hiperłącze może także mieć atrybut target (z ang. cel), który określa, gdzie docelowo w hierarchii kart przeglądarki ma trafić podlinkowany dokument:

<a href="https://zpe.gov.pl" target="_blank">ZPE</a>
   

Możliwe wartości atrybutu target :

• target="_self" – otwórz stronę w tej samej karcie/ramce, w której znajduje się link; ponieważ jest to zachowanie domyślne, można ten atrybut pominąć;

• target="_blank" – otwórz adres w nowej, nieużywanej karcie przeglądarki; nie należy nadużywać tego mechanizmu; aby zapewnić użytkownikowi komfort, otwieraj nowe karty tylko tam, gdzie rzeczywiście jest to potrzebne, np. przy wskazywaniu linków prowadzących poza stronę;

• target="_parent" oraz target="_top" – otwórz adres hiperłącza w odpowiedniej ramce – jest to związane z tzw. framesetem (ang. zestaw ramek). Wartość _parent otworzy witrynę w ramce o jeden poziom wyższej we framesetowej hierarchii, zaś _top w nadrzędnej ramce.

Warto wiedzieć, że budowanie witryny na ramkach jest przestarzałym rozwiązaniem, z którego rezygnuje się ze względu na SEOSEOSEO oraz wygodę użytkownika.

Obrazy w witrynie

Obrazek można wstawić z użyciem HTML dzięki znacznikowi <img> (od ang. image – obrazek).

<img src="logo.jpg" alt="Moja firma">
   

Zwróćmy uwagę, że jest to tag pojedynczy. Mamy tu bowiem do czynienia z obrazem, który jest obiektem. W takim wypadku nie trzeba dookreślać, gdzie się zaczyna, a gdzie kończy, ponieważ o tym decyduje rozmiar źródłowej grafiki lub ewentualnie określone przez nas właściwości CSS (szerokość, wysokość).

Atrybut src to z ang. source – ścieżka dostępu do źródłowej grafiki. Atrybut src jest wymagany dla obrazu (ang. required), ponieważ bez źródłowego pliku graficznego ciężko mówić o istnieniu obrazu w dokumencie.

Atrybut alt, czyli ang. alternative, to alternatywny, tekstowy opis, który oddaje, czym jest dana grafika, co na niej się znajduje. Jest to również atrybut wymagany. Dlaczego atrybut alt jest według standardu konieczny?

Pamiętajmy, że na stronę internetową trafią także użytkownicy, którzy wyłączyli w swojej przeglądarce ładowanie obrazów, bądź są osobami słabowidzącymi, korzystającymi z czytników witryn. Wówczas taki alternatywny opis, zapewniający słowną reprezentację zawartości obrazu, pomoże im komfortowo przeglądać witrynę.

Wspomnijmy jeszcze o znanej rozterce dotyczącej sposobu domykania tagów w standardzie HTML5. Porównajmy je ze starszymi standardami XHTML i HTML 4.01 – jak powinien wyglądać zapis?

<img src="logo.jpg" alt="Moja firma">
   

A może znacznik powinno się zakończyć w taki sposób?

<img src="logo.jpg" alt="Moja firma" />
   

Zgodnie ze specyfikacją HTML5 w tagach pojedynczych obowiązuje brak kończącego znaku /, czyli poprawna jest wersja pierwsza. Jednak warto wiedzieć, że zapis znany z XHTML (domknięcie tagu, wersja druga) nie spowoduje błędu w przeglądarce – będzie ona wiedzieć, iż jest to domknięcie znacznika „w starym stylu”.

Wiele osób nadal używa wersji znanej z XHTML – jest to przykład pokazujący, jak płynne, powolne i kompatybilne wstecz jest wprowadzanie nowych standardów sieciowych.

Paragrafy czy podwójne złamanie linii

Akapit (paragraf, ustęp) tekstu to znacznik <p> (od ang. paragraph). Znacznik ten pozwala podzielić dłuższy tekst na krótsze akapity:

<p>Lorem ipsum dolor sit amet, consectetur elit,
vivamus blandit varius dui, in congue urna fringi.</p>

<p>Suspendisse a magna felis. Donec fermentum
lacus quis quam tincidunt lobortis.</p>
   

Osoby po raz pierwszy używające języka HTML bardzo często (siłą nawyków z edytorów tekstowych) zamiast stosować akapity tekstu, wstawiają co kilka zdań podwójne znaczniki <br><br>, które również tworzą wizualne wrażenie istnienia akapitu:

Lorem ipsum dolor sit amet, consectetur elit,
vivamus blandit varius dui, in congue urna fringi.
<br><br>
Suspendisse a magna felis. Donec fermentum
lacus quis quam tincidunt lobortis.
   

Tag <br> od ang. break, czyli złamanie linii – jest w HTML odpowiednikiem użycia klawisza Enter na klawiaturze (kod sterujący końca linii). Natomiast dwa następujące po sobie złamania linii, jedno po drugim, siłą rzeczy tworzą przerwę w tekście, która wygląda podobnie do akapitu. Lepiej jednak użyć znacznika <p>, bo zyskujemy dzięki temu wpływ np. na rozmiar odstępów pomiędzy akapitami poprzez użycie stylów CSS.

Znaczników <br><br> nie da się dopasować do indywidualnych potrzeb, gdyż stanowią po prostu złamanie linii. Paragraf rządzi się innymi prawami – za jego pomocą określamy przeglądarce fragment tekstu, w którym ma zastosować wskazany krój czcionki, jej rozmiar, kolor, odstępy poziome i pionowe oraz szereg innych właściwości.

W kontekście SEO paragrafy również spisują się efektywniej niż <br><br>, gdyż lepiej przekazują robotowi modularną strukturę zawartości tekstowej witryny. Sprawniej także współpracują z mechanizmem responsywnościresponsywnośćresponsywności serwisu.

Natomiast znacznika <br> można używać, aby złamać linię, gdy to rzeczywiście jest potrzebne – np. w tabeli albo gdy publikujemy poezję lub poemat:

<p>
  Litwo, Ojczyzno moja! ty jesteś jak zdrowie;<br>
  Ile cię trzeba cenić, ten tylko się dowie,<br>
  Kto cię stracił. Dziś piękność twą w całej ozdobie<br>
  Widzę i opisuję, bo tęsknię po tobie.
</p>
   

Nagłówki w HTML

Sekcje dokumentu HTML, podobnie jak w tradycyjnych, papierowych wydaniach gazet, rozpoczynają się od nagłówków (z ang. headings). W standardzie HTML ustanowiono sześć rozmiarów nagłówków – odpowiadają im znaczniki od <h1> do <h6>:

<h1>Nagłówek stopnia pierwszego</h1>
<h2>Nagłówek stopnia drugiego</h2>
<h3>Nagłówek stopnia trzeciego</h3>
<h4>Nagłówek stopnia czwartego</h4>
<h5>Nagłówek stopnia piątego</h5>
<h6>Nagłówek stopnia szóstego</h6>
   

Jak widać, nagłówki są znacznikami podwójnymi – wynika to z faktu, że zawierają one tekst. Domyślnie największy rozmiar czcionki ma nagłówek <h1>, a każdy kolejny przyjmuje proporcjonalnie mniejszą wielkość, aż do nagłówka <h6>:

Nagłówek stopnia pierwszego

Nagłówek stopnia drugiego

Nagłówek stopnia trzeciego

Nagłówek stopnia czwartego

Nagłówek stopnia piątego

Nagłówek stopnia szóstego

Rozmiary czcionki oddają także hierarchię ważności nagłówków. W kontekście SEO szczególnie ważny jest tekst zamknięty w nagłówku <h1> – powinien zawierać frazy ważne dla rezultatów wyszukiwania, zgodne z faktyczną zawartością podstrony.

Nagłówki definiują poszczególne sekcje dokumentu – mechanizm znany z gazet, ulotek, edytorów tekstu przenieśliśmy także do internetu.

Po poznaniu elementarnych zapisów języka HTML, czas na opis fundamentów użycia technologii CSS.