10 najważniejszych znaczników języka HTML. Jak je wykorzystać?

10 najważniejszych znaczników języka HTML. Jak je wykorzystać?

Wraz z HTML5 pojawił się nowy sposób tworzenia struktury HTML. Wcześniej wykorzystywało się głównie elementy div oraz span. Tworzyły one strukturę, która poza klasami czy identyfikatorami nie niosła ze sobą żadnych dodatkowych informacji.

Jak sytuacja wygląda obecnie?

W HTML5 doszły nowe znaczniki, które określają sposób ich użycia – jest to tak zwana semantyka. Używanie znaczników zgodnie z ich przeznaczeniem daje nam wymierne korzyści. Pierwszą i najważniejszą jest to, że semantyka jest interpretowana przez wyszukiwarki internetowe. Zastosowanie przykładowo do stopki znacznika z div może i nie jest błędem, ale po co skoro mamy znacznik <footer>, który właśnie do stopki został stworzony? Identyczna sytuacja z występuje z nagłówkami – można użyć innych elementów niż h1 –  h6, jednak żadnych korzyści z tego byśmy nie mieli. Kolejnym aspektem, dla którego warto skorzystać z nowych możliwośći sa syntezatory mowy. Zastosowanie przykładowo znacznika h1 czy strong może wygenerować inny ton, czytanego tekstu przez co będzie łatwiejszy i ciekawszy w odbiorze. Dlatego przedstawiam najważniejsze znaczniki HTML, które trzeba znać i jak można je wykorzystać

10 najważniejszych znaczników języka HTML na stronach internetowych

1. <main>

Znacznik wykorzystywany, do oznaczenia najważniejszej części witryny. Powinien być unikalny w całym dokumencie. Nie można w nim osadzać powtarzających się elementów takich jak sidebary, menu navigacyjne, stopki czy formularze. Nie można go zastosować wewnątrz takich znaczników jak <asticle>, <aside>, <footer>, <header> oraz <nav>. To co jest interesujące w przypadku znacznika <main> to fakt, że wspiera wszystkie globalne atrybuty. Dobrym pomysłem jest, aby wewnątrz taga <main>, umieścić na przykład wpisy na sronie.

2. <section>

Znacznik definiuje pewną sekcję na stronie. Jak sama nazwa mówi – sekcję, a więc miejsce, gdzie znajdą się kolejne znaczniki w jakiś sposób ze sobą powiązane. Przykładowo można umieścić w znaczniku <section> cały nagłówek lub pasek boczny.

3. <article>

Znacznik definiuje pewną niezależną, pełna treść. Poprzez pełną na myśli mam to, że można ten kawałek wyciąć i wkleić w zupełnie inne miejsce a nawet inny serwis, jej zawartość oraz znaczenie będzie kompletne. Doskonałym przykładem będą tutaj wpisy na forum, na blogu czy poszczególne komentarze.

4. <header>

Znacznik reprezentuje wprowadzenie do zawartości lub zbioru odnośników nawigacyjnych. Zazwyczaj zawiera jeden lub więcej nagłówków (<h1> – <h6>, dlatego nie można powiedzieć, że <headerto znacznik na nagłówek. Jest to znacznik-kontener na kolejne elementy, w tym często nagłówek<h1> – <h6>), logo czy informacje o autorze. Może występować wielokrotnie w jednym dokumencie.  To co w przypadku <header> jest ważne, to że nie można go umieszczać w <footer>, <address>  lub wewnątrz samego siebie.

5. <nav>

Znacznik definiujący zestaw głównych odnośników nawigacyjnych. Kluczowym słowem jest głównych. Nie powinniśmy tego znacznika używać, na przykład dla linków nawigacyjnych w panelu bocznym – to nie jest główne menu nawigacyjne.

6. <aside>

Znacznik definiuje sekcję, która trochę odbiega znaczeniowo od głównej treści. Jednak ze względu na to, że jest to sekcja, po jej przeniesieniu w całości do innego miejsca, cały czas powinna zachować swój indywidualny, wspólny znaczeniowo charakter. Dobrym przykładem jest zastosowanie jej do bannerów, widgetów (np. portali społecznościowych) czy reklam.

7. <footer>

Znacznik określający stopkę dokumentu lub sekcji. Typowymi elementami zawierającymi się w stopce są prawa autorskie, informacje kontaktowe czy mapa strony. Znacznik ten nadaje się idealnie na stopkę strony, jak i stopkę każdego wpisu na blogu.

8. <figure> i <figcaption>

Znaczniki <figure> i <figcaption> są wzajemnie ze sobą powiązane. Pierwszy jest kontenerem dla zdjęć, ilustracji, diagramów, kodów i tak dalej natomiast drugi znacznik – <figcaption> – określa podpis dla wcześniej wymienionych elementów, znajduje się on wewnątrz znacznika <figure>.

9. <h1> – <h6>

Znaczniki nagłówków. Reprezentują 6 poziomów nagłówków. To co się zmieniło w HTML5 to sposób w jaki możemy ich używać. Wcześniej mogliśmy używać tylko 1 nagłówka np. <h2> na stronie. Obecnie sytuacja się zmieniła i możemy mieć na stronie więcej powtarzających się nagłówków. Ważne jednak jest to, aby semantycznie były one od siebie oddzielone. Przykładowo możesz utworzyć znacznik <h2> jako tytuł sejchu (<section>) blogu przy równoczesnym zastosowaniu znaczniku <h2> dla artykułu w blogu wewnątrz znacznika <article>. Jest to w pełni dozwolone i wyszukiwarka Google w pełni obsługuje ten mechanizm – jeżeli tylko DOCTYPE strony jest ustawiony na html, a nie np. XHTML czy HTML4 to dokument zostanie poprawnie zwalidowany bez żadnych błędów.

10. <div>

Nieśmiertelny <div>. Jest to znacznik blokowy rozciągający się na całą swoją szerokość. Nie niesie ze sobą żadnego znaczenia semantycznego, dlatego używany jest wszędzie tam, gdzie nie możemy zastosować żadnego innego znacznika ze specyfikacji HTML5. Równie często używany jest jako zwykły kontener, ułatwiający ostylowanie elementów.

Znacznik <div> nie umarł i nie umrze. Ma się świetnie, tak samo jak jego kolega <span>, który domyślnie jest znacznikiem śródliniowym. Zmieniły się co najwyżej konteksty, w których te znaczniki możemy zastosować.

W powyższej liście mogłeś zapoznać się z najczęściej używanymi znacznikami HTML5. Nie jest to kompletna lista, ale tylko mały jej przegląd. Jeżeli chcesz się zapoznać z kompletną listą znaczników oraz ich zastosowaniem na stronach www, zachęcam do odwiedzenia witryny w3schools.com.

 

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.