Znaczniki HTML, których (być może) nie znasz

Temat być może brzmieć trywialnie, ale okazuje się, że znaczniki HTML nadal mogą zaskoczyć. W tym artykule przedstawię Ci kilka interesujących znaczników HTML. Nie będą to jednak typowe elementy, które pojawiają się na praktycznie każdej stronie i na każdym kursie HTML. W tym wpisie chciałbym skupić swoją uwagę na znacznikach, których używanie należy raczej do rzadkości, a które niejednokrotnie okazują się naprawdę przydatne. Nie będę się skupiał tu na tych oznaczonych jako deprecated, ponieważ nie ma sensu zagłębiać się w coś, czego i tak finalnie nie ma sensu wykorzystywać.

base

Znacznik <base> pozwala nam na ustawienie innego URL bazowego niż domyślny. Przez URL bazowy mam na myśli domenę, pod którą jest dostępna strona. Ów tag przyjmuje atrybuty znane linkom: href oraz target. Skutkiem umieszczenia elementu na stronie jest zmiana sposobu działania wcześniej już wspomnianych linków. Załóżmy, że istnieje na naszej stronie następujący link: <a href="/foo">Foo</a>. Chcemy, aby ten link oraz każdy inny link o takiej strukturze przekierowywał nas na inną domenę, oraz na podaną w nim ścieżkę. W tym wypadku możemy skorzystać z dobrodziejstw elementu base i ustawić niestandardowy adres tylko w jednym miejscu.

Również wykorzystanie atrybutu target na znaczniku <base> będzie miał działanie globalne. Warto w tym miejscu dodać, że powinien on występować na stronie tylko raz ( każdy kolejny zostanie po prostu zignorowany ), jest tagiem nieposiadającym zamknięcia oraz powinien być umieszczony w sekcji <head>.

noscript

Tag <noscript> odpowiada za wyświetlenie przygotowanej wcześniej treści w momencie, gdy nasza przeglądarka blokuje wykonywanie JavaScriptu. We wnętrzu tego tagu warto poinformować użytkownika, dlaczego pewne funkcjonalności naszej strony nie są dostępne lub nie działają prawidłowo. Szczególnie warto dodać taki znacznik w aplikacjach SPA, gdzie zasadniczą część aplikacji stanowi właśnie JavaScript.

pre

Znacznik <pre> odpowiada za wyświetlenie tekstu preformatowanego. Domyślnie w strukturze HTML białe znaki tj. taby, entery czy wielokrotne spacje są ignorowane. Tag <pre> pozwala nam ominąć ten mechanizm. Innym, bardzo dobrym i wykorzystywaniem przeze mnie zastosowaniem jest czytelne wyświetlanie kodu. Gdy potrzebuję tymczasowo wyświetlić, na przykład na potrzeby debugowania, sformatowane tablice czy obiekty w PHP na stronie, to używam do tego właśnie elementu <pre>.

Phrase tags

Phrase tags to znaczniki HTML, które odpowiadają nie tylko za zmianę wyglądu zawartego w nich tekstu, ale też za nadanie im znaczenia semantycznego. Jednym z takich tagów jest <strong>, który oprócz wytłuszczenia zwiększa znaczenie słowa w nim zawartego. Poniżej przedstawiam Ci listę takich tagów:

<em> — emfaza
<strong> — wzmocnienie
<code> — fragment kodu
<kbd> — sugerowany tekst do wpisania
<samp> — output programu komputerowego
<var> — nazwa zmiennej — można go użyć na przykład przy omawianiu pojęć matematycznych
<address> — adres

progress

Dzięki temu znacznikowi możemy osadzić pasek postępu na stronie. Element <progress> przyjmuje dwa niestandardowe atrybuty: value i max. Pierwszy odpowiada za przyjmowaną wartość, natomiast max ogranicza z góry wartości, jakie możemy przekazać do value. Zastosowaniem elementu <progress> może być oczywiście pokazywanie postępu jakiejś czynności na stronie tj. ładowanie czegoś czy formularze z kilkoma krokami. Znalazłem również inne zastosowanie tego elementu. Zdarzyło mi się wykorzystać go do graficznego pokazania stanu magazynowego na stronie produktowej sklepu internetowego.

template

Cechą charakterystyczną tagu <template> jest to, że jego zawartości nie zobaczymy na stronie od razu. Dodanie go do pliku HTML nie sprawi, że po otwarciu owego pliku zobaczymy zawartość wcześniej wspomnianego elementu. Aby wyświetlić jego zawartość w przeglądarce, należy go umieścić w DOM za pomocą JavaScriptu. Jak sama nazwa wskazuje, zastosowaniem tego elementu jest zdefiniowanie jakiegoś szablonu. Znacznik ten możesz wykorzystać jako kontener dla dynamicznie generowanego kodu HTML. Z tym elementem spotkasz się przy tworzeniu aplikacji za pomocą VueJS, gdzie jako kontener w komponentach wykorzystano właśnie tag <template>.

Podsumowanie

Jak zwykle mam nadzieję, że dowiedziałeś/aś się czegoś nowego oraz że zostawisz komentarz. Koniecznie pochwal się, jeśli postanowiłeś/aś przetestować poznane dziś znaczniki HTML. Zachęcam też do zapoznania się ze źródłami i materiałami dodatkowymi.

Źródła i materiały dodatkowe

Czy wiesz, że devszczepaniak.pl jest na Facebooku?

Chcesz otrzymywać informację o nowych wpisach zaraz po publikacji?
Koniecznie zaobserwuj devszczepaniak.pl na Facebooku.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

Chcesz docenić moją pracę? Postaw mi kawę!

Zapisz się na mailing i odbierz e-booka

Zapisując się na mój mailing, otrzymasz darmowy egzemplarz e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer! Będziesz też otrzymywać wartościowe treści i powiadomienia o nowych wpisach na skrzynkę e-mail.

2 komentarzy

oceniany

najnowszy najstarszy

Inline Feedbacks

View all comments

Comandeer

4 lat temu

Zdarzyło mi się wykorzystać go do graficznego pokazania stanu magazynowego na stronie produktowej sklepu internetowego.

progress jest od procesów, które się dynamicznie zmieniają (np. postęp instalacji). Od bardziej statycznych rzeczy (typu stan zapełnienia dysku twardego czy właśnie stan magazynowy) jest znacznik meter.

A co do elementów frazowych, to jest ich więcej, w tym – niesłusznie! – zapomniane b, i, u. Chyba najciekawszym z tych tagów jest jednak data, którego nikt nie używa 😉

Odpowiedz

Dominik Szczepaniak

Reply to Comandeer

Od bardziej statycznych rzeczy (typu stan zapełnienia dysku twardego czy właśnie stan magazynowy) jest znacznik meter.

Przyznam się, że znacznika meter wcześniej nie znałem, a z tego co widzę na MDN jego możliwości znacznie bardziej wpasowują się we wspomniany przeze mnie stan magazynowy. Dzięki wielkie, na pewno przy najbliższej okazji wykorzystam 👍