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
- <base>: The Document Base URL element
- <noscript>: The Noscript element
- <pre>: The Preformatted Text element
- HTML <kbd> Tag
- <strong>: The Strong Importance element
- <progress>: The Progress Indicator element
- <template>: The Content Template element
- <address>: The Contact Address element
Zaobserwuj mnie na LinkedIn!
LinkedIn jest głównym medium, poza blogiem, gdzie publikuję swoje przemyślenia. Zaobserwuj mój profil na LinkedIn, by być na bieżąco!
Zachęcam też do zaobserwowania devszczepaniak.pl na Facebooku, gdzie oprócz informacji o nowych artykułach publikuję linki do ciekawych treści.
Udostępnij wpis
Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!
📖 Koniecznie sprawdź ofertę księgarni Helion oferującej tysiące książek dla programistów w dobrych cenach! Kupując z tego linku, pomagasz w rozwoju bloga.
Chcesz docenić moją pracę? Postaw mi kawę! 
progressjest 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 znacznikmeter.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 jednakdata, którego nikt nie używa 😉Przyznam się, że znacznika
meterwcześ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 👍