HTML którego nie znasz

poniedziałek, 18 kwietnia 2022

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> 70%

👉 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.

Jakiego systemu używasz?

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

Zróbmy razem fajną stronę dla Twojej firmy

Nie masz strony internetowej, albo potrzebujesz zmian na swojej aktualnej?

Podaj swój numer telefonu, oddzwonię do Ciebie i porozmawiamy.