HTML 5 – nowe tagi, więcej możliwości

Wraz z wyjściem nowej wersji HTML – HTML 5 zostało wprowadzonych wiele zmian. Piąta wersja daje użytkownikom wiele nowych możliwości. HTML5 daje większą kontrolę nad treścią, pozwala rozróżniać artykuły oraz całe sekcje strony. Dodane zostały także nowe tagi, atrybuty skladni, typy pól, elementy formularzy a także wiele innych.

Najważniejsze zmiany:

Znacznik początku dokumentu zmieniono z <html> na <!DOCTYPE html>.
Ustawienie kodowania strony zmieniono z <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /> na <meta charset=”UTF-8″ />.
Link do pliku CSS: z <link rel=”stylesheet” type=”text/css” href=”theme.css” /> na <link rel=”stylesheet” href=”styles.css” />.
Link do pliku JS: z <script type=”text/javascript” src=”script.js” /> na <script src=”scripts.js”></script/>.
Dodano nowe elementy semantyczne (strukturalne):
<header> – nagłówek dokumentu lub sekcji.
<footer> – stopka dokumentu lub sekcji.
<section> – jest to blok powiązanych tematycznie elementów. Każda sekcja powinna zawierać odrębne tematycznie informacje. Sekcje można zagnieżdżać tworząc podsekcje. Nie należy traktować ich jak zwykłych div-ów (w praktyce może być kontenerem dla <articles>).
<article> – kompletny, samowystarczalny blok powiązanych elementów (nie powinno się zagnieżdżać artykułów w sobie). W tym znaczniku należy umieszczać treść, która ma sens po wyrwaniu z kontekstu, czyli artykuły, posty na forum, czy blogu.
<nav> – kontener używany do umieszczania dużych bloków linków nawigacyjnych (menu), lecz nie wszystkie linki powinny znajdować się wewnątrz tego elementu.
<aside> – element zawierający „treść boczną” powiązaną z treścią główną.
<figure> – służy do grupowania opisów z obrazkami <img> i <figcaption>.
<figcaption> – znacznik do umieszczania opisu pod obrazkiem <img>.
<detalils> – szczegóły, można w nim umieścić dodatkowe informacje, które mogą być wyświetlone lub ukryte. Domyślnie nie są wyświetlane.
<main> – kontener na główną treść dokumentu, musi być unikalny i nie może zawierać elementów i treści powtarzających się na innych podstronach. Element nie może być umieszczony wewnątrz tagów <header>, <footer>, <nav>, <article>, <aside>.
<mark> – tag używany do wyróżnienia części tekstu.
<summary> – znacznik umieszczany w tagu <details>, definiuje jego widoczny nagłówek, podczas gdy jego pozostała część jest ukryta (pokazuje lub chowa szczegóły po kliknięciu pokaż/ukryj szczegóły) .
<time> – tag do umieszczania i wyświetlania w formie czytelnej daty i godziny.
<bdi> – znacznik pozwala na wydzielenie części tekstu w celu nadania mu innego formatowania (np. tekst arabski czytany od prawej do lewej).
<dialog> – za pomocą tego tagu tworzy się okna pop-up i modal na stronie.
<menuitem> – znacznik, w którym umieszcza się poszczególne pozycje przy tworzeniu menu kontekstowego wywoływanego PPM.
<meter> – definiuje pomiar skalarny w znanym zakresie, w praktyce jest to pasek przedstawiający wykonaną część jakiegoś zadania (nie jest obsługiwany przez IE, Edge 12, Safari 5 i wcześniejsze wersje). Nie powinno się go używać do tworzenia „progress bars” – pasków postępu.
Atrybuty: form (pozwala na umieszczenie elementu formularza poza nim, wystarczy podać id formularza jako wartość tego parametru, można użyć kilku id w jednym „form”),
high, low(wartości wysoka i niska),
max,min,optimum (maksymalna/minimalna/optymalna wartość skali),
value (wartość podana przez użytkownika, powinna być pomiędzy min a max)
<progress> – znacznik prezentuje pasek postępu wykonywanego zadania (brak obsługi przez IE9 i wcześniejsze). Jego atrybuty to value (wykonana część) i max (wymagany czas na wykonanie zadania).
<ruby> – adnotacja ruby, czyli niewielki tekst dołączony do głównej treści, wskazujący sposób wymowy lub objaśnienie wybranych znaków np. w języku japońskim.
<rp> – znacznik do umieszacznia nawiasów wokół tekstu ruby w celu wyświetlania go w przeglądarkach nie obsługujących ruby.
<rt> – tag do umieszczania objaśnienia lub wymowy znaków Azji Wschodniej w adnotacji ruby
<wbr> – znacznik określa w którym miejscu w tekście powinno nastąpić przeniesienie do kolejnej linii w przypadku, gdy nie mieści się on w jednym wierszu. Używa się go gdy słowa są zbyt długie lub gdy istnieje ryzyko, że linia zostanie przełamana w niewłaściwym miejscu.Ważne:dla zachowania kompatybilności ze starymi przeglądarkami należy zdefiniować je jako elementy blokowe:
```
header, section, footer, aside, nav, main, article, figure, ..., wbr {
    display: block;
}
```
Ciekawostka: HTML5 daje możliwość tworzenia własnych tagów i ostylowanie ich np:
```
<style>
    mojTag{display:block; color:#f9f9f9;}
</style>
<mojTag>Jakiś tekst</mojTag>
```
Aby zachować kompatybilność z przeglądarką IE9 i późniejszymi wersjami (we wcześniejszych opcja ta nie zadziała) trzeba dodać kod JavaScript:
```
<script>document.createElement("mojTag")</script>
```
Dla IE<9 w sekcji head strony trzeba dodać kod, który „uczy” starsze przeglądarki jak odczytać nieznane elementy:
```

```
Nowe elementy formularzy:
<datalist> – tag umieszcza się wewnątrz <input>, służy do tworzenia listy podpowiedzi wyświetlanych po kliknięciu w pole input (coś w stylu autocomplete).
<keygen> – określa pole generowania pary kluczy, przy wysyłaniu formularza klucz prywatny jest zostaje lokalnie u użytkownika a publiczny wysyłany jest do serwera. Jest to rodzaj zabezpieczenia przesyłanych danych.
Atrybuty: autofocus (ustawia pole aktywne po załadowaniu formularza),
challenge (wymagane wypełnienie pola przed wysłaniem formularza),
disabled (wyłączone pole),
form (opisany w <meter>),
keytype (określa rodzaj klucza, dostępne są atrybuty (algorytmy szyfrujące): RSA, EC – możliwość wyboru siły klucza, DSA – możliwość wybrania długości klucza.),
name (nazwa klucza)
<output> – wynik, dane wyjściowe.
Atrybuty: for (zależność między składnikami równania a wynikiem obliczenia),
form (opisany w <meter>),
name (opisany w <keygen>)
Nowe typy pól (Input Types) i atrybuty (Attributes):
Input Types:
color – pole z paletą kolorów do wyboru,
date – data rrrr-mm-dd/dd-mm-rrr,
datetime – data i czas (jeszcze nie obsługiwany przez przeglądarki),
datetime-local – data i czas rrrr-mm-dd hh:mm,
email – pole email,
month – miesiąc i rok,
number – cyfra (możliwość wybrania zakresu min i max),
range – pasek ze znacznikiem (możliwość ustawienia skali za pomocą min i max),
search – pole wyszukiwarki,
tel – pole numer telefonu,
time – czas hh:mm,
url – pole adres url,
week – tydzień i rokUwaga: Niektóre typy pól nie są obsługiwane przez większość przeglądarek. Przed wykorzystaniem należy sprawdzić kompatybilność z preferowanymi przeglądarkami.
Input Attributes:
autocomplete – możliwość włączenia/wyłączenia autouzupełniania pola wcześniej wpisywanymi frazami,
autofocus – ustawia aktywne pole po załadowaniu strony,
form – pozwala przypisać pole do jednego lub wielu formularzy. Jako wartość należy wpisać id jednego, lub kilku formularzy do których pole ma należeć oddzielając je spacjami,
formaction – wywołuje kod wybranego pliku. Jako wartość podaje się adres url do pliku, którego kod ma się wykonać. Uwaga, nadpisuje atrybut form, używany jest też do pól typu „submit” i „image”,
formenctype – określa sposób kodowania danych przesyłanych na serwer (dotyczy tylko metody POST). Uwaga, nadpisuje atrybut form, używany jest też do pól typu „submit” i „image”,
formmethod – definiuje metodę HTTP przesyłania danych do url (GET/POST),
formnovalidate – wyłączenie walidacji formularza. Uwaga, nadpisuje atrybut form, używany jest też do pól typu „submit”,
formtarget – wskazuje miejsce wyświetlenia formularza po jego wysłaniu np: _blank – nowe okno. Uwaga, nadpisuje atrybut form, używany jest też do pól typu „submit” i „image”,
height and width – wysokość i długość pola, używane są wyłącznie dla pól typu image,
list – odwołuje się do tagu <detalist> (jako wartość należy podać id tagu <datalist>) pozwala utworzyć rozwijaną listę opcji,
min and max – minimalna i maksymalna wartość pola. Atrybut można wykorzystać przy polach typu: month, number, range, date, datetime, datetime-local, time, week,
multiple – umożliwia wprowadzanie kilku wartości do pola. Wykorzystywany jest w polach typu: email i file.
pattern (regexp) – umożliwia wstawienie wyrażenia regularnego (wzoru) np. kodu pocztowego, nr. telefonu. Wartość wpisywana w polu porównywana jest do wyrażenia podanego jako wartość atrybutu pattern i na tej podstawie jest walidowana. Atrybut używany przy polach typu: password, search, text, url, email, tel,
placeholder – wyświetla oczekiwaną wartość, którą należy wpisać w polu wewnątrz okna. Podpowiedź wyświetla się do momentu wpisania pierwszego znaku w polu. Wykorzystywany jest w polach typu: text, password, search, url, email, tel,
required – pole wymagane, które należy wypełnić aby można było wysłać formularz. Atrybut używany w polach typu: password, search, checkbox, radio, number, email, text, file, tel, date picker, url,
step – pozwala ustawić przeskok pomiędzy wartościami w danym polu. Przykładowo ustawiając wartość „2”, można będzie wybierać np: -4, -2, 0, 2, 4, 6. Atrybut można używać w połączeniu z atrybutami min/max. Używany jest w polach typu: month, week, date, datetime-local, datetime, time, range, number,
novalidate – atrybut nadawany formularzom, wyłącza walidację pól wewnątrz formularza
Nowe tagi:
Graficzne:
<svg> – kontener dla grafiki Scalable Vector Graphics (skalowalna wektorowa grafika).
<canvas> – kontener do rysowania grafiki na stronie za pomocą JavaScript.
Multimedialne (nie każdy format pliku obsługuje dana przeglądarka):
<audio> – tag do umieszczania plików w formatach audio: MP3 , WAV, OGG.
<video> – tag do umieszczania plików w formatach wideo: MP4, WebM, Ogg.
<embed> – służy do umieszczania zewnętrznych aplikacji oraz interaktywnych elementów, np. mapa, plik audio/video.
<source> – tag do określenia wielu zasobów dla elementów multimedialnych, używany jest np. do określania pliku alternatywnego na podstawie typu pliku lub kodeka.
<track> – tag do umieszczania tekstów używanych w trakcie odtwarzania plików audio/video np. karaoke lub film z tłumaczeniem tekstowym.

Dodano atrybuty składni:
Empty

<input type="text" value="nazwisko" disabled>

Unquoted

<input type="text" value=nazwisko>

– wartość bez cudzysłowu
Double-quoted

<input type="text" value="imie i nazwisko">

– wartość w cudzysłowu
Single-quoted

<input type="text" value='imie i nazwisko'>

– wartość w apostrofach

Nowe API HTML5 zawiera ciekawe funkcje takie jak:
HTML Geolocation – pozwala określić pozycję geograficzną użytkownika (wyświetlenie współrzędnych geograficznych), można też pokazać położenie na mapie.
HTML Drag and Drop – metoda przeciągnij i upuść, można zastosować ją do wszystkich elementów.
HTML Local Storage – możliwość przechowywania przez aplikacje danych w przeglądarce użytkownika. Działa na zasadzie podobnej do cookies, ale nie wpływa negatywnie na wydajność strony w przypadku dużej ilości danych. Większy jest także limit przechowywania danych (minimum 5MB). Dane nigdy nie są przesyłane na serwer, co podnosi bezpieczeństwo w porównaniu do cookies.
HTML Application Cache – funkcja umożliwia utworzenie wersji offline aplikacji.
HTML Web Workers – umożliwia wykonywanie kodu JavaScript w tle, co poprawia wydajność strony. Kod js i inne elementy strony ładowane są jednocześnie.
HTML SSE – funkcja umożliwia automatyczne aktualizacje bez sprawdzania, czy są one dostępne.
W HTML 5 zamieniono niektóre tagi z HTML4, niektóre zostały zastąpione CSS-em a inne całkiem usunięto.
Tagi zmienione:
<acronym> na <abbr>
<applet> na <object>
<dir> na <ul>
<div id=”header”> na <header>
<div id=”menu”> na <nav>
<div id=”content”> na <section>
<div id=”post”> na <article>
<div id=”footer”> na <footer>
Tagi zastąpione CSS-em:
<basefont>
<big>
<center>
<font>
<strike>
<tt>
Tagi usunięte:
<frame>
<frameset>
<noframes>

Kilka zasad które pozwalają utrzymać czytelność i porządek w kodzie CSS:
– krótkie reguły CSS powinno się pisać w jednej linii, długie blokowo, reguły jedna pod drugą,
– klamry otwierające reguły powinno się umieszczać w tej samej linii co selektor, zamykające w nowej linii bez poprzedzającej spacji,
– przed klamrą powinno się wstawiać jedną spację, jako wcięcie dwie spacje,
– między selektorem a jego wartością powinno się używać dwukropek i jedną spację,
– należy wstawiać spację po każdym przecinku i średniku,
– po każdym selektorze i jego wartości trzeba wstawić średnik,
– wartości przedzielone spacjami trzeba umieszczać w cudzysłowach,
– stosować linie nie dłuższe niż 80 znaków,
– aby nowe tagi poprawnie wyświetlały się w przeglądarkach nie obsługujących HTML5, należy dodać poniższy kod:

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

audio, canvas, embed, keygen, meter, progress, video {
display: inline-block;
}

[hidden] {
display: none;
}

Ważne wskazówki dotyczące utrzymania porządku w kodzie HTML5:
– nazwy wszystkich elementów należy pisać małymi literami,
– wszystkie elementy należy zamykać (teoretycznie nie wszystkie elementy wymagają zamykania, lecz zamykanie ich poprawia czytelność kodu),
– dobrym zwyczajem jest zamykanie pustych elementów znakiem „/” przykład: <meta charset=”utf-8″ /> (w HTML5 jest to opcjonalne, ale w XHTML i XML wymagane),
– wartości atrybutów umieszczone w znacznikach – „” są bardziej czytelne. Nie wszędzie są wymagane, ale zaleca się ujednolicenie zapisu (pkt. 7).
– wymagane są atrybuty ALT przy każdym obrazku, a każdy obraz powinien mieć zdefiniowane wymiary,
– zaleca się usuwanie zbędnych spacji aby poprawić czytelność kodu, chociaż teoretycznie nie stanowią błędu,
– zaleca się pisanie linii kodu nie dłuższych niż 80 znaków,
– należy zredukować ilość pustych linii kodu, wyjątkiem są te, zostawione dla poprawy jego czytelności,
– tabulator lepiej zastąpić dwoma spacjami,
– HTML5 dopuszcza omijanie tagów <html> i <body>, lecz w pierwszym z nich rekomenduje się deklarowanie wersji językowej, pominięcie tych elementów spowoduje błędy w starszych przeglądarkach, strukturze DOM oraz XML,
– tag <head> jest pomijany, ponieważ domyślnie przeglądarki traktują wszystkie elementy przed body jako sekcję <head>
– tag <title> jest wymagany, powinien być krótki i zrozumiały, aby został dobrze zaindeksowany, strona musi mieć ustawiony odpowiedni język i kodowanie jak najwyżej w strukturze strony,
– wzór komentarzy:

<!-- krótki -->

<!--
długi
-->

– wielkość liter w klasach i identyfikatorach ma znaczenie, warto stosować tylko małe litery aby uniknąć błędów w przypadku użycia tych elementów w funkcjach JS,
– jeśli to możliwe, należy używać tylko małych liter do nazewnictwa plików aby uniknąć błędów związanych z rozróżnianiem wielkości znaków na serwerach,
– dozwolone rozszerzenia plików:
HTML: .html, .htm (rozszerzenia są interpretowane tak samo, różnią się tylko ilością znaków)
CSS: .css
JS: .js

Wzór strony HTML5:

<!DOCTYPE html>
<html lang="pl">
<meta charset="utf-8">
<title>Tytuł strony</title>


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

<style>
body {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ggg;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>

<header>
<h1>Nagłówek</h1>
</header>

<nav>
<ul>
<li>Opcja 1</li>
<li>Opcja 2</li>
<li>Opcja 3</li>
</ul>
</nav>

<section>
<h2>Nazwa sekcji</h2>

<article>
<h2>Nazwa artykułu</h2>
<p></p>
<p></p>
</article>

<article>
<h2>Nazwa kolejnego artykułu</h2>
<p></p>
<p></p>
</article>
</section>

<footer>
<p></p>
</footer>

</body>
</html>

Kategoria: Tworzenie stron www Tagi: HTML 5

HTML 5 – nowe tagi, więcej możliwości

Poprzedni post

Kanibalizacja słów kluczowych

Następny post

Tworzenie nowej taxonomii WordPress cz. 1

HTML 5 – nowe tagi, więcej możliwości

Podobne wpisy:

Poprzedni post

Kanibalizacja słów kluczowych

Następny post

Tworzenie nowej taxonomii WordPress cz. 1