HTML5 – semantyka (tagi)

Loading Likes...

Dzisiaj zajmiemy się semantyką wprowadzoną w html5. Temat ten nie jest wcale taki trudny, jak mogłoby się wydawać. Trzeba zrozumieć różnicę pomiędzy tagami i pamiętać o wolnej ręce w niektórych kwestiach. Mamy nadzieję, że po tym artykule wszystko się rozjaśni. Standardowo spis treści:

  1. Dlaczego należy stosować tagi html5?
  2. Tagi
  3. Main
  4. Różnica między section, a article
  5. Do czego zatem służą divy?
  6. HTML5shiv
  7. Przykład wykorzystania

Miłej lektury!

Nowa semantyka wpływa na SEO (search engine optimimization), czyli na tak zwane pozycjonowanie naszej strony. To nic innego jak kolejność w wynikach wyszukiwarek. Aby polepszyć wyszukiwanie naszej strony, należy stosować tagi html5. Dzięki temu przeglądarka nie musi “prześwietlać” całej strony html, a jedynie części, które ją interesują.

Pomysł na tagi wziął się z nazewnictwa divów i ich roli na stronie. W3C postanowiło ułatwić sprawę web developerom i przy okazji wykorzystać to. Oto i one wraz z opisem:

Main – tag, który może być umieszczony na podstronie tylko raz i powinien znajdować się bezpośrednio w body(może być umieszczony dodatkowo wewnątrz diva, który np.pełni rolę kontenera). Trzeba o tym pamiętać, ponieważ dzięki tej zasadzie, przeglądarka łatwiej dociera do naszej głównej treści na stronie.

Różnica między section i article

Wielu mogłoby pomyśleć: “No nieźle! To po co nam teraz będą divy? Dlaczego ich nie usunęli?” Odpowiedź jest dość prosta i oczywista, jeśli się zastanowimy. Po pierwsze nie wszystkie funkcje divów zostały zastąpione tagami – wciąż nie mamy tagu, który pełniłby rolę tylko kontenera na stronie. Po drugie i tutaj to jest WAŻNE, nie należy nadużywać stylów odwołując się do znaczników semantycznych html5. One mają swoją rolę tzn pozycjonują na stronie, kategoryzują elementy, natomiast układ i położenie powinniśmy wciąż definiować za pomocą divów.

Niestety nie każda przeglądarka poradzi sobie ze znacznikami html5 (chyba domyślamy się która 😛 ). W gwoli ścisłości nie tyle przeglądarka, co jej wersja. Chodzi oczywiście o Internet Explorer w wersji niższej niż 9. Ta przeglądarka jest na tyle dużym pośmiewiskiem, że chcąc oszczędzić jej szyderstw, postanowiono jakoś “nauczyć” radzić sobie z nowymi znacznikami. Z tego powodu powstał html5shiv. To instrukcja w komentarzu, który umieszczamy w naszym źródłowym pliku html. Wygląda następująco:<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
<![endif]–>

Przykład wykorzystania znaczników


Widzisz jakie to łatwe? Przebrnęliśmy przez to jakoś razem. Pamiętaj, że nasza wiedza jak pościel – potrzebuje czasu, aby się porządnie i równo ułożyła. 😉 Dlatego ćwicz i używaj od samego początku tagów z html5. Dzięki za uwagę i do usłyszenia w nowym wpisie!

You May Also Like

About the Author: Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie Profil: "Informatyka i Ekonometria" Specjalizacja: "Programowanie urządzeń mobilnych i aplikacji sieciowych" Hobby:
  • Programowanie: Typowy front: HTML/JS/CSS Do tego: Vue/Vuex/Nuxt/Angular/
  • Rozwój osobisty
  • siatkówka (GeoVolley Team) na pozycji środkowego
  • Filmy - od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) - w liceum dzięki profilowi z modułem filmowym mogłem bardziej wejść w szczegóły kadrów, ujęć itd.
  • Psychologia - niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę :(

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Facebook
Inline
Inline