nowe elementy HTML5

nowe elementy w HTML5

Poniżej wymienione są nowe elementy HTML5 oraz ich opisy.

nowe elementy semantyczne/strukturalne

Nowe elementy HTML5 mogą tworzyć lepszą strukturę dokumentu:

Znak Opis
<article> definiowanie artykułu w dokumencie.
<aside> definiowanie treści poza treścią strony.
<bdi> definiowanie kierunku tekstu innego niż standardowy.
<details> definiowanie dodatkowych szczegółów, które mogą być wyświetlane lub ukryte przez użytkownika.
<dialog> definiowanie okienka lub okna.
<figcaption> definiowanie tytułu elementu <figure>.
<figure> definiowanie samowystarczalnych treści, takich jak ilustracje, diagramy, zdjęcia, listy kodów itp.
<footer> definiowanie narożnika dokumentu lub sekcji.
<header> definiowanie nagłówka dokumentu lub sekcji.
<main> definiowanie głównego treści dokumentu.
<mark> definiowanie ważnych lub podkreślonych treści.
<menuitem> definiowanie poleceń/menów, które mogą być wywoływane z menu rozwijanego przez użytkownika.
<meter> definiowanie skalowych pomiarów w已知范围内(skala).
<nav> definiowanie linków nawigacyjnych w dokumencie.
<progress> definiowanie postępu zadania.
<rp> definiowanie tego, co jest wyświetlane w przeglądarkach nieobsługujących komentarzy ruby.
<rt> definiowanie wyjaśnienia/artykułacji znaku (dla azjatyckich czcionek).
<ruby> definiowanie komentarzy ruby (dla azjatyckich czcionek).
<section> definiowanie sekcji w dokumencie.
<summary> definiowanie widocznego tytułu elementu <details>.
<time> definiowanie daty/czasu.
<wbr> definiowanie możliwych przecineków (line-break).

Przeczytaj więcej na temat semantyka HTML5zawartości.

nowe elementy formularza

Znak Opis
<datalist> definiowanie przewidzianych opcji dla kontrolki wejścia.
<keygen> definiowanie pól generatora kluczy (dla formularzy).
<output> definiowanie wyników obliczeń.

Przeczytaj więcej na temat Elementy formularzy HTMLnowe, stare i przestarzałe elementy.

nowe typy wejścia

nowe typy wejścia nowe atrybuty wejścia
  • kolor
  • data
  • datetime
  • datetime-local
  • email
  • miesiąc
  • liczba
  • zakres
  • search
  • tel
  • czas
  • url
  • tydzień
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • szerokość i wysokość
  • list
  • min i max
  • wielokrotne
  • wzorzec (regexp)
  • placeholder
  • wymagany
  • krok

Nauka Typy wejścia HTMLwszystkich nowych i starych typów wejścia.

Nauka Atrybuty wejścia HTMLwszystkich input atrybutów.

Nowa gramatyka atrybutów HTML5

HTML5 pozwala na cztery różne gramatyki atrybutów.

Ten przykład pokazuje różne gramatyki używane w etykiecie <input>:

Znak Opis
Pusty <input type="text" value="Bill Gates" wyłączony>
Bez znaków <input type="text" value=Bill>
Ciąg znaków podwójnych <input type="text" value="Bill Gates">
Ciąg znaków pojedynczych <input type="text" value='Bill Gates'>

W HTML5, w zależności od wymagań atrybutów, można użyć wszystkich czterech gramatyk.

Obraz HTML5

Znak Opis
<canvas> Definiowanie rysowania obrazu za pomocą JavaScript.
<svg> Definiowanie rysowania obrazu za pomocą SVG.

Przeczytaj więcej na temat HTML5 Canvas zawartości.

Przeczytaj więcej na temat SVG HTML5 zawartości.

Nowe elementy mediów

Znak Opis
<audio> Definiowanie treści dźwięku lub muzyki.
<embed> Definiowanie kontenerów aplikacji zewnętrznych (np. wtyczek).
<source> Definiowanie źródeł <video> i <audio>.
<track> Definiowanie ścieżek <video> i <audio>.
<video> Definiowanie treści wideo lub filmu.

Przeczytaj więcej na temat Wideo HTML5zawartości.

Przeczytaj więcej na temat Audio HTML5zawartości.