Wstęp do HTML5
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
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
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]