Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Kurs HTML5 – wstęp

Prezentujemy nowość na devboard.pl - kurs HTML5. Od dziś systematycznie będę prezentował ciekawe zagadnienia, a także porady i tricki dotyczące nowego HTML'a. W dzisiejszym (pierwszym) tekście chciałbym opisać czym tak na prawdę jest ciągle rozwijany i udoskonalany HTML5 oraz pokazać różnice, nowości oraz szkielet strony. Zaczynamy!

HTML5 jest tworzony i udoskonalany przez grupę WHATWG (Web Hypertext Application Technology Working Group) oraz W3C. Razem tworzyli XHTML 2.0, lecz projekt został porzucony na rzecz HTML 5.0. Tworzenie stron w oparciu o XML’a nie miało już po prostu przyszłości do czego doszli i autorzy. Nowy HTML przyniósł ze sobą bardzo pozytywnych elementów, między innymi:

  • Ograniczenie używania dodatków (takich jak elementy Flash)
  • Lepsza obsługa błędów
  • Grafiki 2D/3D (z użyciem CSS3 lub SVG)
  • Poprawa jakości kodu strony, co przekłada się na lepszą indeksację strony

HTML5 nie jest może standardem, ale wielu twórców stron zaczyna powoli przerzucać się na tę wersję. Jest to wręcz banalnie proste, do tej pory pierwsze linijki naszej strony zaczynały się podobnie do tego:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">

Wystarczy teraz zmienić to na:

<!DOCTYPE html>
<html lang="pl">

I już jesteśmy po stronie HTML5!

Przykładowy szkielet dokumentu prezentuje się następująco:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>HTML5</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--Tutaj treść strony-->

<script src=”javascript.js”> </script>
</div>

</body>
</html>

Kod jest znacznie krótszy – aż około 50%. Teraz wypiszę główne różnice w samym szkielecie:

  • Krótszy DOCTYPE oraz znacznik html
  • Kodowanie znaków o niebo wygodniejsze (zamiast długiego < meta http-equiv='Content-Type' content='text/html; charset=utf-8'> )
  • Przy arkuszach usuwamy zbędne type=”text/css” (arkusze nie mogą być inne!)
  • Tak samo przy skryptach usuwamy type=”javascript” (nie może być to inny skrypt aniżeli javascript!)
  • MathML i SVG

Warto jeszcze dodać, że starsze przeglądarki (chodzi tutaj o archaiczne wersje Internet Explorer) nie obsługują HTML5, dlatego należy między znacznikami dodać następujący kod:

<!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Należy pamiętać również o stylach CSS. Aby znaczniki HTML5 były widoczne w starszych typach przeglądarek w arkuszach musimy dodać:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

A teraz wykaz nowych znaczników:

  • Elementy multimedialne
    • <audio> - określa muzykę
    • <video> - definiuje filmy
    • <source>
    • <embed> - określa blok dla dodatkowych elementów interaktywnych (np. Flash)
    • <track>
  • Elementy formularzy
    • <datalist>
    • <keygen>
    • <output>
  • Elementy strukturalne (semantyczne)
    • <article> - określa artykuł (news etc.)
    • <aside> - definiuje część strony znajdującej się poza
    • <bdi>
    • <command>
    • <details>
    • <dialog>
    • <summary>
    • <figure> - określa elementy takie jak ilustracje, diagramy, zdjęcia
    • <figcaption>
    • <footer> - stopka strony/sekcji
    • <header> - nagłówek strony/sekcji
    • <mark>
    • <meter>
    • <nav>
    • <progress>
    • <ruby>
    • <rt>
    • <rp>
    • <section> - określa sekcję danego dokumentu
    • <time>
    • <wbr>
  • Pozostałe
    • <canvas> - używany jest do wyświetlania rysunków (najczęściej generowyanych przez JavaScript albo SVG)

Pozwoliłem sobie najważniejsze z nich opisać zaś większości z wyżej wymienionych znaczników będę pisał w kolejnych artykułach wraz z przykładami użycia.

Pamiętajcie, że jeżeli nie jesteście jeszcze pewni przy korzystaniu z nowych znaczników – nie używajcie ich. Są one jedynie dodatkami, bez nich strona będzie również poprawnie się wyświetlać.

Zachęcam do odwiedzenia poniższych strony