Semantyka kodu w HTML5

 Gru, 02 - 2014   1 komentarz   HTML

Logo HTML5HTML w wersji 5 jest obecny już od jakiegoś czasu i jest to kolejna próba lepszego ustandaryzowania języka opisu stron internetowych. Zaproponowano kilka nowych znaczników, wyrzucona kilka starych, opracowano lepszy opis dokumentu, zwłaszcza dotyczące jego semantyki. W tym artykule postaram się przedstawić moim zdaniem podstawowe elementy HTML5, które każdy koder powinien znać i stosować.

 

Na wstępie chciałbym zaznaczyć, że nie będę szczegółowo opisywał wszystkich zmian jakie przyniósł HTML5. W sieci jest wystarczająco dużo materiałów, które o tym mówią – w szczególności polecam stronę w3schools.com, gdzie w dziale HTML znajduje się szczegółowe przedstawienie wszystkich elementów wraz z przykładami. Ja natomiast skupię się na kilku wybranych znacznikach, których zadaniem jest lepsze opisanie zawartości dokumentu.

 

Struktura dokumentu

Zacznijmy od podstawowej struktury kodu, który w HTML5 wygląda następująco:

Trzeba przyznać, iż powyższa struktura jest nieco bardziej przejrzysta w porównaniu z np. XHTML Transitional:

 

 

Wybrane znaczniki

Jak już wspomniałem wcześniej nie będę opisywał wszystkich znaczników, ale jedynie te które dotyczą przede wszystkim semantyki struktury strony internetowej. Zanim HTML5 stał się popularny, aby opisać strukturę dokumentu koderzy nagminnie wykorzystywali znacznik blokowy <div> … </div>, który dzielił stronę na poszczególne części. Bloki bardzo dobrze się do tego nadają, jednak mają jedną podstawową wadę – w żaden sposób nie opisują poszczególnych części. Twórcy nowego standardu postanowili to zmienić i wprowadzili szereg nowych znaczników, które w doskonały sposób opisują zawartość kodu.

Znacznik głównej zawartości strony:

Znacznik sekcji, czyli określonej części strony:

Znacznik artykułu, czyli materiału tekstowego na stronie. Zazwyczaj złożony z nagłówka, akapitów, zdjęć, filmików, itp.

Nagłówek:

Znaczniki wykorzystywane do umieszczania zdjęć, obrazków, wykresów:

Znacznik nawigacji:

Znacznik wykorzystywany do umieszczania treści, nie będącej główną częścią strony, np. pasek boczny, dodatkowa nawigacja, tagowanie, itp.

Stopka:

Media:

 

Przykładowa budowa kodu strony w HTML5

Wykorzystując powyżej przedstawione znaczniki, możemy zbudować stronę WWW, której kod w bardzo jednoznaczny sposób opisuje jej zawartość.

Powyższy kod można zobrazować za pomocą obrazka:

Przykładowa struktura dokumentu HTML5

 

Podsumowanie

HTML5 jest standardem promowanym i powszechnie wykorzystywanym przez koderów na całym świecie. W powyższym artykule skupiłem się jedynie na tych podstawowych elementach, które związane są ze strukturą kodu. Jednak zalet jest o wiele więcej:

  • skrócenie i uproszczenie struktury
  • poprawienie wyglądu w urządzeniach mobilnych
  • integracja audio i video
  • integracja API – Geolocatio, Local Storage, App Cache, Web Sockets i inne
  • element Canvas
  • i wiele innych…

Reasumując, polecam zapoznanie się z HTML5 oraz zapraszam do pisania komentarzy.


 Komentarze 1 komentarz

  • maquiagem noite pisze:

    Aposte em uma maquiagem muito neutra e suave. http://CELSOKAMURAMAQUIAGEM.COM.BR


  • Dodaj komentarz

    Twój adres email nie zostanie opublikowany.