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ą (lub precyzyjniej mówiąc – może rozpoznać konkretne typy elementów na stronie np. tytuł artykuł).

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ć” ją 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. Ćwicz i używaj od samego początku tagów z html5.

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" Siatkówka (GeoVolley Team) na pozycji środkowego Hobby: Oprócz programowania i wszystkiego co z tym związane... 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 wejść głębiej 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. Wymagane pola są oznaczone *

Facebook