Znaczniki HTML

Moja przygoda z HTML rozpoczęła się w 2004 roku, kiedy to pracowałam nad jakże ambitnym projektem mojej pierwszej strony internetowej. Była to galeria zdjęć kolegów i koleżanek z mojej klasy ze szkoły średniej. Nie miałam wtedy pojęcia, że po wielu latach wrócę do tej wiedzy.

Narodziny infant-webmastera

Podpisy pod zdjęciami wykonywałam w MS Paint, a same obrazy były jakości przecudnej, wszak wykonane zostały przy użyciu chińskiej kompaktowej cyfrówki za 200 PLN. Wspomniana witryna powstawała przy użyciu takich zaawansowanych technologii front-endowych, jak Pajączek czy Microsoft Frontpage. Moja praca polegała na posklejaniu elementów w edytorze graficznym i jak za dotknięciem magicznej różdżki dostałam kod HTML.

A jednak to właśnie graficzne edytory były moją pierwszą szkołą pisania kodu. Podpatrywałam zapis HTML, metodą prób i błędów osiągałam zamierzone efekty, spędzałam godziny na dłubaniu przy tej stronie. Najpierw dowiedziałam się do czego służą parametry „width” i „height” oraz „div-align” (wszystkie style były pisane w HTML, ofkors). Przez lata byłam pewna, że w tagu „img src” to „src” jest skrótem od „screen”, a nie „source” 😉 (tak, wiem, że literki trochę w złej kolejności).

Pozytyw(istycz)na praca u podstaw

Piszę o tym troszkę z ironią, a troszkę z nostalgią i wyrozumiałością, bo doskonale pamiętam jaką satysfakcję odczuwałam, kiedy zmiana w kodzie (!) dawała rezultat zgodny z moimi wyobrażeniami. Nauczyłam się jak przez FTP wysłać stronę na serwer, jak podpiąć grafikę, jakie formaty i nazwy powinny mieć konkretne pliki.

Z racji tego, że moimi „nauczycielami” były ww. programy oraz różne fora, a w 2004 o HTML5 mało kto słyszał, od kilku miesięcy nadrabiam braki w mojej edukacji. Zatem nadeszła pora na uzupełnienie wiedzy o znaczniki, których nie znałam.

Znaczniki HTML

<sup>
Znacznik indeksu górnego używany np. przy potęgowaniu.

<sub>
Znacznik indeksu dolnego stosowany np. przy wzorach chemicznych.

<hr />
Jest to znacznik, który wstawia wiersz przerwy wraz z poziomą linią w tym wierszu (jak <br /> + linia). Jako jeden z niewielu, nie wymaga znacznika zamykającego (jest elementem pustym), powinno się jedynie dodać spację oraz ukośnik po nazwie tagu.

<strong>
To znacznik semantyczny, który służy do wskazania istotnej treści i pogrubienia go. Nie jest to jednak to samo co znacznik <b>, ponieważ ten drugi nie służy do określania znaczenia wybranego tekstu, a jedynie do wywołania efektu pogrubienia.

<em>
Również jest znacznikiem semantycznym, który służy do wskazania treści z dodatkowym znaczeniem. Przeglądarki najczęściej publikują taki tekst kursywą. Analogicznie do znaczników <strong> i <b>, nie należy stosować <em> oraz <i> zamiennie, ponieważ <i> nie jest znacznikiem semantycznym.

<blockquote>
Służy do konstruowania osobnego bloku z cytatem, najczęściej przez przeglądarki zaznaczanego wcięciem z lewej strony (wewnątrz należy umieścić znacznik akapitu <p>).

<q>
Tag, dzięki któremu zaznaczymy obecność akapitu wewnątrz linii tekstu, opatrywany przez przeglądarki cudzysłowami (UWAGA! IE tego nie robi).

<abbr>
To znacznik używany do sygnalizowania skrótów i akronimów. Wykorzystując atrybut title podajemy pełne brzmienie skróconego tekstu.

<cite>
Służy do zaznaczenia źródła: książki, filmu, magazynu, etc. Może być również używany jako atrybut znaczników <q> oraz <blockquote> w celu określenia źródła cytatu.

<dfn>
Tego znacznika należy użyć, kiedy po raz pierwszy objaśniany jest jakiś termin.

Przy okazji tagu <dfn> warto wspomnieć o listach definicji. HTML poza standardowymi listami numerowanymi (<ol>, ordered list) oraz nienumerowanymi (<ul>, unordered list) udostępnia listy dedykowane seriom terminów wymagającym wyjaśnienia. Do ich utworzenia używamy znacznika <dl>, a wewnątrz korzystamy z tagów:
– <dt> dla objaśnianego terminu;
– <dd> dla definicji terminu.

<address>
Jest to element, który służy do podawania danych autora strony, takich jak adres zamieszkania, telefon oraz adres poczty elektronicznej. Podanie tych danych jest oczywiście dobrowolne.

<ins>
Znacznik, dzięki któremu możemy zaznaczyć na stronie obecność nowej treści. Przeglądarki często podkreślają ten tekst.

<del>
W przeciwieństwie do <ins>, znacznik <del> określa treści usunięte z artykułu, wyświetlane z przekreśleniem.

<s>
Tag analogicznie do <del> najczęściej wyświetlany z przekreśloną treścią – służy do zaznaczenia treści nieaktualnej.

<figure>
Jest to element, który służy do semantycznego powiązania obrazka wtaz z jego opisem. Wewnątrz tego tagu można umieścić więcej obrazków, o ile podpis odnosi się do tych obrazów.

<figcaption>
Ten znacznik umieszczony wewnątrz znacznika <figure>, służy do oznaczenia opisu zdjęcia/zdjęć tego znacznika.

Astrologowie ogłaszają czas nauki. Zasób ogarniętych tagów zwiększa się 😉

źródło: Duckett J. „HTML i CSS. Zaprojektuj i zbuduj witrynę WWW