Najczęściej używanymi tagami HTML to oczywiście <div>, <p>, <section>, czy <article>.
Istnieją inne tagi, które w bardziej precyzyjny sposób mogą opisać tekst na stronie internetowej.
Dokładniejsze opisanie struktury strony na pewno poprawi czytelność, oraz wpłynie pozytywnie na pozycjonowanie strony.
👉 abbr <abbr> - Abbreviation
Prosty trick na tzw. tooltip, który pojawia się chwilę po najechaniu myszką na wybrany tekst. W naszym przypadku ten tekst jest w znaczniku abbr, a jego atrybut title to hej, tu Marcin.
👉 mark <mark> - Wyróżnienie
Nie każdy tekst na stronie musi być pogrubiony. Można wyróżnić dowolny tekst używając tagu <mark>.
Możesz również zmienić domyślny styl, np. zmienić tło. Aby to zrobić musisz w swoim CSS odwołać się bezpośrednio
do tagu mark {}
👉 figure, figcaption <figure>, <figcaption> — Opisy obrazków
Tag figure jest bardzo przydatny, w środku <figure> możemy dodać obrazek <img> i jako ostatni tag dodać opis
obrazka w tagu <figcaption>. Figcaption jest odpowiedzialny za opis obrazka.
👉 progress <progress> - Pasek postępu
Możesz w łatwy sposób pokazać pasek postępu, przydatne np. w przypadku kroków na stronie czy formach.
<progress max="100" value="70">70%</progress>
👉 details <details> - Rozwijane menu
Kiedyś aby uzyskać taki efekt musieliśmy używać jquery, teraz html oferuje taką opcję w standardzie.
Tag details posiada atrybut open, który sprawia, że nasza odpowiedź będzie domyślnie otwarta.
JAMstack czy Wordpress?
Tutaj odpowiedź<details>
<summary>JAMstack czy Wordpress?</summary>
Tutaj odpowiedź
</details>
👉 dialog <dialog> - Modal / Pop up
Tak, w HTML możesz stworzyć modal korzystając z tagu <dialog>. Niestety dialog w wersji podstawowej jest
bardzo ubogi, więc dodatkowe style oraz JavaScript jest wskazany.
👉 fieldset <fieldset> - Grupowanie elementów
Najlepiej użyć tagu <fieldset> w formie, aby zgrupować np checkboxy.
<fieldset>
<legend>Jakiego systemu używasz?</legend>
<input type="radio" id="osx" name="os" />
<label for="osx">OS X</label><br />
<input type="radio" id="windows" name="os" />
<label for="windows">Windows</label><br />
<input type="radio" id="linux" name="os" />
<label for="linux">Linux</label>
</fieldset>
Podsumowanie
Tagów HTML jest dużo więcej, na dziś tyle. W kolejnych wpisach postaram się dodać inne, również ciekawe tagi HTML, aby Twoja strona była jeszcze lepsza.
Marcin ✌️