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 ✌️