Wstęp do HTML5

wstep-html5-title.jpg

W styczniu 2008 roku organizacja W3C opublikowała pierwsze zarysy kolejnej wersji popularnego języka HTML, będącego podstawą do tworzenia stron i aplikacji internetowych. Mam koniec roku 2010, a język ten jest ciągle w fazie tworzenia. Istotne jest jednak to, że praktycznie wszystkie liczące się firmy tworzące silniki przeglądarek internetowych, poważnie zainteresowały się tym projektem. Obecnie większość nowych przeglądarek posiada wsparcie dla HTML5, oraz co jest rzeczą bez precedensu Microsoft, ze swoim nowym IE w wersji 9, również zamierza dołączyć do czołówki, zarówno pod kątem omawianej w tym artykule technologii, jak i wsparciem dla większości możliwości CSS3. Jeżeli jeszcze nie zapoznałeś się z HTML5, to zachęcam do dalszej lektury tego artykułu.

DOCTYPE

Chyba każda początkująca osoba w języku HTML spotkała się z problemem doboru DOCTYPE. Wszyscy zastanawiali się, który lepszy Strict czy Transitional, którego używają liderzy Front-endu HTML 4.0 czy XHTML 1.0. Na szczęście wraz z HTML5 problem całkowicie znika, a obecnie ogranicza się tylko do prostego:

<!DOCTYPE html>

a więc najprostsza struktura naszego pliku wygląda teraz tak:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta content="Krzysztof Bachula">
<title>Wstęp do HTML5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!—Tu kod HTML -->
</body>
</html>

Nowe elementy języka HTML5

Wraz z pojawieniem się wersji 5 pojawiło się sporo nowych tagów HTML. Z założenia mają one poprawić semantykę kodu, czy to się udało pozostawiam wam do oceny. Poniżej opisze kilka najważniejszych tagów pojawiającej się od wersji 5:

  • <section> – opisuje część dokumentu lub aplikacji. Taka jest definicja, a gdzie go stosować tego najwyraźniej nie wie nikt. Na początku programiści używali go w zastępstwie div’ów, ale organizacja W3C w dokumentacji wydała oświadczenie, że nie taka była intencja tego tagu. Obecnie trwają zażyłe dyskusje na temat <section>, polecam śledzić temat, a na razie używać go z dużą dozą nieufności. Drobna lektura na powyższy temat:
    - http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/
    - http://html5doctor.com/the-section-element/
  • <article> - opisuje artykuł lub część treści np: wpis na blogu, komentarz itp.
  • <nav> - część dokumentu odpowiedzialna za nawigacje po stronie.
  • <header> - opisuje nagłówki, nie tylko całej strony, ale także na przykład wstęp do artykułu
  • <footer> - opisuje stopkę dokumentu i podobnie jak w przypadku header nie odnosi się wyłącznie do całej strony, ale także do poszczególnych jej część. Tym sposobem możemy oznaczyć stopkę artykułu z informacjami o autorze itp.
  • <aside> - opisuje treść poboczną, czyli zawartość kolumny bocznej, np. podobne posty, reklamę itp.
  • <video> i <audio> - tagi pozwalające na łatwiejsze dodawanie mediów do swojej strony.

Pełna lista nowych elementów jest dostępna na stronie W3C, polecam przynajmniej pobieżnie przeglądnąć jej zawartość.

Usunięte elementy z HTML5

Oczywiście wraz z rozwojem języka kilka elementów musiało odejść w niepamięć. Są to głównie niepopularne i powszechnie tępione tagi jak na przykład: font, big, u, frame, frameset, noframes i jeszcze kilka mniej znanych wymienionych w dokumentacji. Właściwe elementy te od dawna nie są używane, więc nie będzie to miało większego znaczenia dla naszej pracy.

Nowe możliwości

HTML5 ma również kilka niezwykle ciekawych możliwości:

  • wsparcie dla walidacji formularzy
  • rysowanie w 2d w canvas
  • wspomniane wcześniej wsparcie dla audio i wideo
  • Drag & Drop
  • przechowywanie historii przeglądania, z możliwością zmiany url przeglądarki bez przeładowania strony.
  • możliwość pracy aplikacji w trybie offline

Oczywiście wiele tych opcji jest jeszcze nie dostępnych lub działają częściowo tylko na wybranych przeglądarkach. Ale po wspomnianych właściwościach można zauważyć, że HTML5 czeka świetna przyszłość.

Podsumowanie

Tym krótkim artykułem chciałem opisać podstawowe zmiany w HTML5 w stosunku do wersji 4. Miał to być krótki wstęp do serii artykułów, którym zamierzam powoli publikować w miarę regularnie. Planuje się skupiać na praktycznym stosowaniu HTML5 i nowych możliwości CSS3 w projektowaniu ładnych i użytecznych stron internetowych. Jeżeli macie jakieś propozycje tematów, o których chcielibyście poczytać, zapraszam do wpisywania ich w komentarzach.

DyskusjaKomentarze: 5

  • On 04 lipiec 2012 09:45
    Fajny artykuł. Tylko jedna uwaga. Znaczniki meta i link powinny być domknięte . Pozdrawiam
    • Krzysztof Bachula 09 lipiec 2012 21:33
      Według oficjalnej dokumentacji HTML5 oba znaczniki nie muszą być domknięte i tak też zostawiłem w artykule, aby za bardzo nie mieszać. Osobiście z przyzwyczajenia w projektach również zamykam te znaczniki.

  • Hiya! I Simply Want To Give A Huge Thumbs Up For The Nice Information You May Have Here On This Post. I Will Be Coming Back To Your Blog For Extra Soon. Judi Indonesia Online Terpercaya
  • moto 14 grudzień 2015 09:06
    I Don?t Even Understand How I Stopped Up Here, But I Believed This Submit Was Once Great. I Do Not Recognize Who You Might Be But Definitely You're Going To A Famous Blogger If You Happen To Are Not Already ;) Cheers! http://beritamoto.org
  • diobola 03 kwiecień 2016 13:17
    You Made Some Respectable Points There. I Seemed On The Internet For The Problem And Located Most Individuals Will Go Along With Along With Your Website.
    diobola.com

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]

Copyright © 2021 Webnote

Projekt i wykonanie: Tworzenie stron internetowych

Dodaj link