9 przydatnych tagów HTML, których prawdopodobnie nie używasz

HTML jest często traktowany w sposób powierzchowny. Co więcej, wielu z nas pewnie uważa, że ten język znaczników nie jest niezbędny i nie musimy go dobrze znać. To bardzo irytujące. A to dlatego, że wszyscy twierdzą, że HTML jest zbyt prosty i nie jest nawet językiem programowania. Pytanie tylko dlaczego? Skoro jest za prosty, to dlaczego nie zaczniemy go badać i prawidłowo używać tagów?

Dlaczego tagi HTML są ważne?

Oto kilka powodów:

Sprawiają, że kod jest czystszy i łatwiejszy w utrzymaniu

Dobrze skonstruowany kod HTML bez wątpienia sprawia, że kod jest czystszy i łatwiejszy do utrzymania. 

Poprawiają pozycjonowanie SEO

Celem każdej witryny jest zwiększenie ruchu, a większość odwiedzających pochodzi z wyszukiwarek. Jednym z najlepszych sposobów poprawy widoczności w wyszukiwarkach jest prawidłowe używanie tagów HTML.

Pomagają utrzymać lepszą dostępność (WWW)

Podrzucam artykuł na Wikipedii. 

[Dostępność (WWW) (ang. web accessibility)] to dziedzina wiedzy z zakresu interakcji człowieka z komputerem zajmująca się problematyką tworzenia stron i serwisów internetowych dostępnych dla jak najszerszego grona odbiorców, ze szczególnym uwzględnieniem osób narażonych na wykluczenie cyfrowe (niepełnosprawnych, starszych, gorzej wykształconych, pozbawionych dostępu do szerokopasmowego internetu). Dostępność serwisu internetowego oznacza stopień, w jakim może być on postrzegany, rozumiany i przeglądany przez wszystkich użytkowników, niezależnie od ich cech lub upośledzeń, a także niezależnie od właściwości używanego przez nich oprogramowania i sprzętu.

Zakładam, że większość ludzi zna podstawowe tagi HTML, dlatego chciałbym pokazać Ci te, których prawdopodobnie nie używasz, a które mogą się przydać.

<wbr>

Tag <wbr> określa, w którym miejscu w tekście można wstawić koniec linii. Powinno się go używać, gdy słowo jest zbyt długie, i boisz się, że przeglądarka przerwie wiersz w niewłaściwym miejscu.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

<time>

<time> określa czytelną dla człowieka datę oraz godzinę. Można go również używać do kodowania daty i godziny w sposób możliwy do odczytu maszynowego, dzięki czemu przeglądarki mogą oferować dodawanie przypomnień do kalendarza. <time> pozwala również wyszukiwarkom na generowanie inteligentniejszych wyników wyszukiwania.

<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

<blockquote>

Tag <blockquote> określa treść cytowaną ze źródła zewnętrznego (gazeta, praca naukowa itp.).

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The    world's leading conservation organization, WWF works in 100   countries and is supported by 1.2 million members in the United   States and close to 5 million globally.
</blockquote>

<picture>

Tag <picture> zapewnia programistom stron internetowych większą elastyczność w określaniu zasobów obrazu. Zamiast jednego obrazu skalowanego w górę lub w dół to, w zależności od rozmiaru viewportu, można dobrać wiele obrazów tak, żeby dla każdej rozdzielczości ładnie wypełnić okno przeglądarki.

Element <picture> ma dwa różne tagi: jeden lub więcej tagów <source> oraz jeden tag <img>.

Tag <source> ma następujące właściwości:

• srcset (wymagany): określa URL obrazu do wyświetlenia
• media: akceptuje wszelkie prawidłowe media query, które normalnie byłyby ustawione w CSS
• rozmiary: definiuje pojedynczy deskryptor szerokości, media query z deskryptorem szerokości lub rozdzieloną przecinkami listę media query z deskryptorem szerokości
• type: określa typ MIME

Przeglądarka użyje wartości atrybutów, aby załadować najbardziej dopasowany obraz. Tag <img> służy do zapewnienia kompatybilności wstecznej, jeśli przeglądarka nie obsługuje tagu <picture>.

<article>

Tag <article> określa niezależną i osobną treść. Najczęściej  używa się go na blogach. 

<article>
  <h1>Google Chrome</h1>
  <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

<main>

Tag <main> określa główną treść dokumentu. Może to ułatwić korzystanie ze skrótów klawiszowych, przybliżaniu w przeglądarkach mobilnych i przy innych czynnościach. W dokumencie musi znajdować się jeden element <main>. Element <main> nie może być zagnieżdżony w żadnym z tych elementów: <article>, <aside>, <footer>, <header> lub <nav>.

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome is a free, open-source web browser developed by Google,released in 2008.</p>
  </article>
  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
  </article>
  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
  </article>
</main>

<nav>

Tag <nav> definiuje zestaw linków nawigacji. W tagu nav powinny się znaleźć podstawowe linki służące do nawigacji, a nie wszystkie linki na stronie.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<footer>

Tag <footer> definiuje stopkę dokumentu lub sekcji i powinien zawierać informacje o stronie, która go zawiera. Ten tag zwykle zawiera informacje o autorze, prawach autorskich, dane kontaktowe, mapę witryny, powrót do góry oraz linki do powiązanych dokumentów.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer>

<header>

Tag <header> reprezentuje kontener na treść wprowadzającą lub zestaw linków nawigacyjnych. Zazwyczaj zawiera logo, linki nawigacyjne lub nagłówki.

<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>