HTML5 - szybki przewodnik

HTML5 jest kolejną dużą poprawką standardu HTML zastępującą HTML 4.01, XHTML 1.0 i XHTML 1.1. HTML5 to standard strukturyzacji i prezentacji treści w sieci WWW.

HTML5 to współpraca między konsorcjum World Wide Web Consortium (W3C) a Grupą Roboczą Technologii Hipertekstowych Aplikacji Sieciowych (WHATWG).

Nowy standard obejmuje funkcje, takie jak odtwarzanie wideo i przeciąganie i upuszczanie, które wcześniej zależały od wtyczek do przeglądarek innych firm, takich jak Adobe Flash, Microsoft Silverlight i Google Gears.

Wsparcie przeglądarki

Najnowsze wersje Apple Safari, Google Chrome, Mozilla Firefox i Opera obsługują wiele funkcji HTML5, a Internet Explorer 9.0 również obsługuje niektóre funkcje HTML5.

Mobilne przeglądarki internetowe, które są preinstalowane na iPhone'ach, iPadach i telefonach z Androidem, mają doskonałą obsługę HTML5.

Nowe funkcje

HTML5 wprowadza szereg nowych elementów i atrybutów, które mogą pomóc w tworzeniu nowoczesnych witryn internetowych. Oto zestaw niektórych z najważniejszych funkcji wprowadzonych w HTML5.

New Semantic Elements - Są to takie jak <header>, <footer> i <section>.
Forms 2.0 - Ulepszenia formularzy internetowych HTML, w których wprowadzono nowe atrybuty dla tagu <input>.
Persistent Local Storage - Aby osiągnąć bez uciekania się do wtyczek innych firm.
WebSocket - Dwukierunkowa technologia komunikacyjna nowej generacji dla aplikacji internetowych.
Server-Sent Events - HTML5 wprowadza zdarzenia, które przepływają z serwera WWW do przeglądarek internetowych i nazywane są zdarzeniami wysłanymi przez serwer (SSE).
Canvas - Obsługuje dwuwymiarową powierzchnię rysunkową, którą można programować za pomocą JavaScript.
Audio & Video - Możesz osadzać dźwięk lub wideo na swoich stronach internetowych bez korzystania z wtyczek innych firm.
Geolocation - Teraz odwiedzający mogą udostępniać swoją fizyczną lokalizację w aplikacji internetowej.
Microdata - Pozwala to tworzyć własne słowniki poza HTML5 i rozszerzać strony internetowe o niestandardową semantykę.
Drag and drop - Przeciągnij i upuść elementy z jednego miejsca do drugiego na tej samej stronie internetowej.

Kompatybilność wsteczna

HTML5 został zaprojektowany, aby w miarę możliwości był wstecznie zgodny z istniejącymi przeglądarkami internetowymi. Nowe funkcje zostały oparte na istniejących funkcjach i umożliwiają udostępnianie zawartości zastępczej dla starszych przeglądarek.

Zaleca się wykrycie obsługi poszczególnych funkcji HTML5 za pomocą kilku wierszy JavaScript.

Jeśli nie jesteś zaznajomiony z żadną poprzednią wersją HTML, polecam przejrzenie naszego HTML Tutorial przed poznaniem funkcji HTML5.

Język HTML 5 ma „niestandardową” składnię HTML, która jest zgodna z dokumentami HTML 4 i XHTML1 publikowanymi w Internecie, ale nie jest zgodna z bardziej ezoterycznymi funkcjami SGML w HTML 4.

HTML 5 nie ma tych samych reguł składni, co XHTML, gdzie potrzebowaliśmy nazw znaczników pisanych małymi literami, cytowania naszych atrybutów, atrybut musiał mieć wartość i zamykać wszystkie puste elementy.

HTML5 zapewnia dużą elastyczność i obsługuje następujące funkcje -

Nazwy znaczników pisane wielkimi literami.
Cytaty są opcjonalne dla atrybutów.
Wartości atrybutów są opcjonalne.
Zamykanie pustych elementów jest opcjonalne.

DOCTYPE

DOCTYPE w starszych wersjach HTML były dłuższe, ponieważ język HTML był oparty na SGML i dlatego wymagał odniesienia do DTD.

Autorzy HTML 5 używaliby prostej składni do określenia DOCTYPE w następujący sposób -

<!DOCTYPE html>

W powyższej składni nie jest rozróżniana wielkość liter.

Kodowanie znaków

Autorzy HTML 5 mogą użyć prostej składni, aby określić kodowanie znaków w następujący sposób -

<meta charset = "UTF-8">

W powyższej składni nie jest rozróżniana wielkość liter.

Tag <script>

Powszechną praktyką jest dodawanie atrybutu typu o wartości „text / javascript” do elementów skryptu w następujący sposób -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 usuwa dodatkowe wymagane informacje i możesz użyć po prostu następującej składni -

<script src = "scriptfile.js"></script>

Tag <link>

Do tej pory pisałeś <link> w następujący sposób -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 usuwa dodatkowe wymagane informacje i możesz po prostu użyć następującej składni -

<link rel = "stylesheet" href = "stylefile.css">

Elementy HTML5

Elementy HTML5 są oznaczane za pomocą tagów początkowych i końcowych. Znaczniki są rozdzielane nawiasami ostrymi z nazwą znacznika pomiędzy.

Różnica między tagami początkowymi i końcowymi polega na tym, że te ostatnie zawierają ukośnik przed nazwą tagu.

Poniżej znajduje się przykład elementu HTML5 -

<p>...</p>

W nazwach tagów HTML5 wielkość liter nie jest rozróżniana i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest trzymanie się małych liter.

Większość elementów zawiera jakąś treść, np. <p> ... </p> zawiera akapit. Jednak niektóre elementy nie mogą w ogóle zawierać treści i są one znane jako elementy void. Na przykład,br, hr, link, metaitp.

Oto pełna lista elementów HTML5 .

Atrybuty HTML5

Elementy mogą zawierać atrybuty używane do ustawiania różnych właściwości elementu.

Niektóre atrybuty są definiowane globalnie i mogą być używane w dowolnym elemencie, podczas gdy inne są definiowane tylko dla określonych elementów. Wszystkie atrybuty mają nazwę i wartość i wyglądają tak, jak pokazano poniżej w przykładzie.

Poniżej znajduje się przykład atrybutu HTML5, który ilustruje, jak oznaczyć element div atrybutem o nazwie class, używając wartości „przykład” -

<div class = "example">...</div>

Atrybuty można określać tylko w tagach początkowych i nigdy nie można ich używać w tagach końcowych.

W atrybutach HTML5 nie jest rozróżniana wielkość liter i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest używanie małych liter.

Oto pełna lista atrybutów HTML5 .

Dokument HTML5

Dla lepszej struktury wprowadzono następujące tagi -

section- Ten tag reprezentuje ogólny dokument lub sekcję aplikacji. Może być używany razem z h1-h6 do wskazania struktury dokumentu.
article - Ten znacznik reprezentuje niezależny fragment treści dokumentu, na przykład wpis na blogu lub artykuł w gazecie.
aside - Ten tag reprezentuje fragment treści, który jest tylko nieznacznie powiązany z pozostałą częścią strony.
header - Ten tag reprezentuje nagłówek sekcji.
footer - Ten tag reprezentuje stopkę sekcji i może zawierać informacje o autorze, informacje o prawach autorskich itp.
nav - Ten tag reprezentuje sekcję dokumentu przeznaczoną do nawigacji.
dialog - Tego tagu można użyć do zaznaczenia rozmowy.
figure - Tego znacznika można użyć do powiązania podpisu z pewną zawartością osadzoną, taką jak grafika lub wideo.

Znaczniki dokumentu HTML 5 wyglądałyby następująco -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

To da następujący wynik -

Jak wyjaśniono w poprzednim rozdziale, elementy mogą zawierać atrybuty używane do ustawiania różnych właściwości elementu.

Poniżej znajduje się przykład atrybutów HTML5, który ilustruje, jak oznaczyć element div atrybutem o nazwie class, używając wartości „przykład” -

<div class = "example">...</div>

Atrybuty można określić tylko w start tags i nigdy nie może być używane w end tags.

W atrybutach HTML5 nie jest rozróżniana wielkość liter i można je pisać wielkimi lub mieszanymi, chociaż najczęstszą konwencją jest używanie małych liter.

Atrybuty standardowe

Wymienione poniżej atrybuty są obsługiwane przez prawie wszystkie tagi HTML 5.

Atrybut	Opcje	Funkcjonować
klucz dostępu	Określony przez użytkownika	Określa skrót klawiaturowy umożliwiający dostęp do elementu.
wyrównać	prawo, lewo, środek	Poziomo wyrównuje etykiety
tło	URL	Umieszcza obraz tła za elementem
bgcolor	wartości numeryczne, szesnastkowe, RGB	Umieszcza kolor tła za elementem
klasa	Określony przez użytkownika	Klasyfikuje element do użycia z kaskadowymi arkuszami stylów.
Zadowolony	prawda fałsz	Określa, czy użytkownik może edytować zawartość elementu, czy nie.
menu kontekstowe	Identyfikator menu	Określa menu kontekstowe elementu.
data-XXXX	Określony przez użytkownika	Atrybuty niestandardowe. Autorzy dokumentu HTML mogą definiować własne atrybuty. Musi zaczynać się od „data-”.
przeciągalny	prawda, fałsz, auto	Określa, czy użytkownik może przeciągać element.
wysokość	Wartość numeryczna	Określa wysokość tabel, obrazów lub komórek tabeli.
ukryty	ukryty	Określa, czy element powinien być widoczny, czy nie.
ID	Określony przez użytkownika	Nazywa element do użycia z kaskadowymi arkuszami stylów.
pozycja	Lista elementów	Służy do grupowania elementów.
itemprop	Lista rzeczy	Służy do grupowania przedmiotów.
sprawdzanie pisowni	prawda fałsz	Określa, czy element musi mieć sprawdzoną pisownię lub gramatykę.
styl	Arkusz stylów CSS	Określa wbudowany styl elementu.
Przedmiot	Identyfikator zdefiniowany przez użytkownika	Określa odpowiedni element elementu.
tabindex	Numer karty	Określa kolejność tabulacji elementu.
tytuł	Określony przez użytkownika	Tytuł „Pop-up” dla Twoich elementów.
valign	góra, środek, dół	Ustawia tagi w pionie w elemencie HTML.
szerokość	Wartość numeryczna	Określa szerokość tabel, obrazów lub komórek tabeli.

Aby uzyskać pełną listę tagów HTML5 i powiązanych atrybutów, sprawdź nasze odniesienie do tagów HTML5 .

Atrybuty niestandardowe

Nowością wprowadzoną w HTML 5 jest dodanie niestandardowych atrybutów danych.

Niestandardowy atrybut danych zaczyna się od data-i zostanie nazwany na podstawie Twoich wymagań. Oto prosty przykład -

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

Powyższy kod będzie całkowicie poprawny HTML5 z dwóch atrybutów niestandardowych nazwie datasubject i danych poziomie . Możesz uzyskać wartości tych atrybutów za pomocą JavaScript API lub CSS w podobny sposób, jak w przypadku standardowych atrybutów.

Kiedy użytkownicy odwiedzają Twoją witrynę, wykonują różne czynności, takie jak klikanie tekstu, obrazów i linków, najeżdżanie kursorem na zdefiniowane elementy itp. Oto przykłady wywołań JavaScript events.

Możemy napisać nasze programy obsługi zdarzeń w Javascript lub VBscript i możesz określić te programy obsługi zdarzeń jako wartość atrybutu tagu zdarzenia. Specyfikacja HTML5 definiuje różne atrybuty zdarzeń wymienione poniżej -

Możemy użyć następującego zestawu atrybutów, aby wywołać dowolny plik javascript lub vbscript kod podany jako wartość, gdy istnieje jakiekolwiek zdarzenie, które ma miejsce dla dowolnego elementu HTML5.

Omawialiśmy wydarzenia związane z elementami, omawiając te elementy szczegółowo w kolejnych rozdziałach.

Atrybut	Wartość	Opis
offline	scenariusz	Uruchamia się, gdy dokument przechodzi w tryb offline
onabort	scenariusz	Wyzwalacze w przypadku przerwania zdarzenia
onafterprint	scenariusz	Wyzwalacze po wydrukowaniu dokumentu
onbeforeonload	scenariusz	Wyzwalacze przed załadowaniem dokumentu
onbeforeprint	scenariusz	Wyzwalacze przed wydrukowaniem dokumentu
onblur	scenariusz	Uruchamia się, gdy okno traci ostrość
oncanplay	scenariusz	Uruchamia się, gdy multimedia mogą zacząć się odtwarzać, ale mogą zostać zatrzymane w celu buforowania
oncanplaythrough	scenariusz	Uruchamia się, gdy multimedia mogą być odtwarzane do końca, bez zatrzymywania się w celu buforowania
onchange	scenariusz	Uruchamia się, gdy element się zmienia
na kliknięcie	scenariusz	Wyzwalacze po kliknięciu myszą
oncontextmenu	scenariusz	Uruchamia się po wywołaniu menu kontekstowego
ondblclick	scenariusz	Wyzwalacze po dwukrotnym kliknięciu myszą
ondrag	scenariusz	Uruchamia się, gdy element jest przeciągany
ondragend	scenariusz	Wyzwalacze na końcu operacji przeciągania
ondragenter	scenariusz	Uruchamia się, gdy element został przeciągnięty do prawidłowego miejsca docelowego upuszczania
ondragleave	scenariusz	Uruchamia się, gdy element opuszcza prawidłowy cel upuszczania
ondragover	scenariusz	Uruchamia się, gdy element jest przeciągany na prawidłowy cel upuszczania
ondragstart	scenariusz	Wyzwalacze na początku operacji przeciągania
ondrop	scenariusz	Wyzwalacze, gdy przeciągany element jest upuszczany
ondurationchange	scenariusz	Wyzwalane w przypadku zmiany długości nośnika
onemptied	scenariusz	Uruchamia się, gdy element zasobów multimedialnych nagle staje się pusty.
onended	scenariusz	Uruchamia się, gdy media dobiegły końca
onerror	scenariusz	Uruchamia się, gdy wystąpi błąd
skupienie	scenariusz	Uruchamia się, gdy okno staje się aktywne
onformchange	scenariusz	Wyzwalacze, gdy formularz ulega zmianie
onforminput	scenariusz	Wyzwalacze, gdy formularz otrzymuje dane wejściowe użytkownika
onhaschange	scenariusz	Uruchamia się, gdy dokument ulega zmianie
oninput	scenariusz	Uruchamia się, gdy element otrzymuje dane wejściowe użytkownika
oninvalid	scenariusz	Wyzwalacze, gdy element jest nieprawidłowy
onkeydown	scenariusz	Wyzwalane po naciśnięciu klawisza
onkeypress	scenariusz	Uruchamia się po naciśnięciu i zwolnieniu klawisza
onkeyup	scenariusz	Wyzwalacze po zwolnieniu klucza
onload	scenariusz	Uruchamia się po załadowaniu dokumentu
onloadeddata	scenariusz	Wyzwalane po załadowaniu danych multimedialnych
onloadedmetadata	scenariusz	Wyzwalane, gdy czas trwania i inne dane multimedialne elementu multimedialnego są ładowane
onloadstart	scenariusz	Uruchamia się, gdy przeglądarka zaczyna ładować dane multimedialne
onmessage	scenariusz	Uruchamia się po wyzwoleniu wiadomości
onmousedown	scenariusz	Uruchamia się po naciśnięciu przycisku myszy
onmousemove	scenariusz	Uruchamia się, gdy porusza się wskaźnik myszy
onmouseout	scenariusz	Uruchamia się, gdy wskaźnik myszy wychodzi poza element
onmouseover	scenariusz	Uruchamia się, gdy wskaźnik myszy przesuwa się nad elementem
onmouseup	scenariusz	Wyzwalane po zwolnieniu przycisku myszy
onmousewheel	scenariusz	Wyzwalacze podczas obracania kółka myszy
onoffline	scenariusz	Uruchamia się, gdy dokument przechodzi w tryb offline
onoine	scenariusz	Uruchamia się, gdy dokument jest dostępny w trybie online
ononline	scenariusz	Uruchamia się, gdy dokument jest dostępny w trybie online
onpagehide	scenariusz	Uruchamia się, gdy okno jest ukryte
onpageshow	scenariusz	Uruchamia się, gdy okno staje się widoczne
onpause	scenariusz	Uruchamia się, gdy dane multimedialne są wstrzymane
onplay	scenariusz	Wyzwalacze, gdy rozpocznie się odtwarzanie danych multimedialnych
gra	scenariusz	Wyzwalane, gdy zaczną się odtwarzać dane multimedialne
onpopstate	scenariusz	Uruchamia się, gdy zmienia się historia okna
w trakcie	scenariusz	Uruchamia się, gdy przeglądarka pobiera dane multimedialne
onratechange	scenariusz	Wyzwalane, gdy zmieniła się szybkość odtwarzania danych multimedialnych
onreadystatechange	scenariusz	Uruchamia się, gdy zmienia się stan gotowości
onredo	scenariusz	Wyzwalane, gdy dokument wykonuje ponowienie
onresize	scenariusz	Wyzwalacze po zmianie rozmiaru okna
onscroll	scenariusz	Uruchamia się, gdy przewijany jest pasek przewijania elementu
onseeked	scenariusz	Uruchamia się, gdy atrybut wyszukiwania elementu multimedialnego nie jest już prawdziwy i wyszukiwanie zostało zakończone
poszukujący	scenariusz	Uruchamia się, gdy atrybut wyszukiwania elementu multimedialnego jest prawdziwy i wyszukiwanie się rozpoczęło
onselect	scenariusz	Uruchamia się po wybraniu elementu
zainstalowany	scenariusz	Uruchamia się, gdy wystąpi błąd podczas pobierania danych multimedialnych
przechowywanie	scenariusz	Uruchamia się po załadowaniu dokumentu
onsubmit	scenariusz	Wyzwalacze po przesłaniu formularza
onsuspend	scenariusz	Wyzwalacze, gdy przeglądarka pobierała dane multimedialne, ale zatrzymała się przed pobraniem całego pliku multimedialnego
ontimeupdate	scenariusz	Uruchamia się, gdy media zmieniają swoją pozycję odtwarzania
onundo	scenariusz	Wyzwalacze, gdy dokument wykonuje cofnięcie
onunload	scenariusz	Uruchamia się, gdy użytkownik opuszcza dokument
onvolumechange	scenariusz	Uruchamia się, gdy multimedia zmieniają głośność, także gdy głośność jest ustawiona na „wyciszenie”
oczekiwanie	scenariusz	Uruchamia się, gdy multimedia przestały być odtwarzane, ale oczekuje się ich wznowienia

Web Forms 2.0 to rozszerzenie funkcji formularzy w HTML4. Elementy i atrybuty formularzy w HTML5 zapewniają większy stopień znaczników semantycznych niż HTML4 i uwalniają nas od wielu żmudnych skryptów i stylów, które były wymagane w HTML4.

Element <input> w HTML4

Elementy wejściowe HTML4 używają rozszerzenia type atrybut do określenia typu danych. HTML4 udostępnia następujące typy -

Sr.No.	Typ i opis
1	text Dowolne pole tekstowe, nominalnie wolne od podziałów wierszy.
2	password Dowolne pole tekstowe na poufne informacje, nominalnie wolne od podziałów wierszy.
3	checkbox Zestaw zawierający zero lub więcej wartości ze wstępnie zdefiniowanej listy.
4	radio Wyliczona wartość.
5	submit Dowolna forma przycisku inicjuje przesłanie formularza.
6	file Dowolny plik z typem MIME i opcjonalnie nazwą pliku.
7	image Współrzędna odnosząca się do rozmiaru konkretnego obrazu, z dodatkową semantyczną informacją, że musi to być ostatnia wybrana wartość i inicjuje przesłanie formularza.
8	hidden Dowolny ciąg, który normalnie nie jest wyświetlany użytkownikowi.
9	select Wyliczona wartość, podobnie jak typ radia.
10	textarea Dowolne pole tekstowe, nominalnie bez ograniczeń podziału wiersza.
11	button Dowolna forma przycisku, który może zainicjować dowolne zdarzenie związane z przyciskiem.

Poniżej znajduje się prosty przykład użycia etykiet, przycisków opcji i przycisków przesyłania -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

Element <input> w HTML5

Oprócz wyżej wymienionych atrybutów, elementy wejściowe HTML5 wprowadziły kilka nowych wartości dla typeatrybut. Są one wymienione poniżej.

NOTE - Wypróbuj wszystkie poniższe przykłady przy użyciu najnowszej wersji Opera przeglądarka.

Sr.No.	Typ i opis
1	datetime Data i czas (rok, miesiąc, dzień, godzina, minuta, sekunda, ułamki sekundy) zakodowane zgodnie z ISO 8601 ze strefą czasową ustawioną na UTC.
2	datetime-local Data i czas (rok, miesiąc, dzień, godzina, minuta, sekunda, ułamki sekundy) zakodowane zgodnie z ISO 8601, bez informacji o strefie czasowej.
3	data Data (rok, miesiąc, dzień) zakodowana zgodnie z ISO 8601.
4	miesiąc Data składająca się z roku i miesiąca zakodowana zgodnie z ISO 8601.
5	tydzień Data składająca się z roku i numeru tygodnia zakodowana zgodnie z ISO 8601.
6	czas Czas (godzina, minuta, sekundy, ułamki sekund) zakodowany zgodnie z ISO 8601.
7	numer Przyjmuje tylko wartość liczbową. Atrybut step określa dokładność, domyślnie 1.
8	zasięg Typ zakresu jest używany w przypadku pól wejściowych, które powinny zawierać wartość z zakresu liczb.
9	e-mail Akceptuje tylko wartość e-mail. Ten typ jest używany do pól wejściowych, które powinny zawierać adres e-mail. Jeśli spróbujesz przesłać prosty tekst, wymusza to podanie tylko adresu e-mail w formacie [email protected].
10	url Akceptuje tylko wartość adresu URL. Ten typ jest używany do pól wejściowych, które powinny zawierać adres URL. Jeśli spróbujesz przesłać prosty tekst, wymusza to wprowadzenie tylko adresu URL w formacie http://www.example.com lub http://example.com.

Element <output>

W HTML5 wprowadzono nowy element <output>, który jest używany do reprezentowania wyników różnych typów danych wyjściowych, takich jak dane wyjściowe napisane przez skrypt.

Możesz użyć foratrybut, aby określić związek między elementem wyjściowym a innymi elementami w dokumencie, które wpłynęły na obliczenia (na przykład jako dane wejściowe lub parametry). Wartość atrybutu for to rozdzielona spacjami lista identyfikatorów innych elementów.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

To da następujący wynik -

Atrybut zastępczy

HTML5 wprowadził nowy atrybut o nazwie placeholder. Ten atrybut w elementach <input> i <textarea> stanowi wskazówkę dla użytkownika, co można wprowadzić w polu. Tekst zastępczy nie może zawierać znaków powrotu karetki ani znaków nowego wiersza.

Oto prosta składnia atrybutu zastępczego -

<input type = "text" name = "search" placeholder = "search the web"/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

To da następujący wynik -

Atrybut autofocus

Jest to prosty, jednostopniowy wzorzec, który można łatwo zaprogramować w JavaScript w momencie ładowania dokumentu, automatycznie skupia się na jednym określonym polu formularza.

HTML5 wprowadził nowy atrybut o nazwie autofocus który zostałby użyty w następujący sposób -

<input type = "text" name = "search" autofocus/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Wymagany atrybut

Teraz nie musisz mieć JavaScript do walidacji po stronie klienta, np. Puste pole tekstowe nigdy nie zostanie przesłane, ponieważ HTML5 wprowadził nowy atrybut o nazwie required który byłby używany w następujący sposób i nalegałby na posiadanie wartości -

<input type = "text" name = "search" required/>

Ten atrybut jest obsługiwany tylko przez najnowsze wersje przeglądarek Mozilla, Safari i Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

To da następujący wynik -

SVG oznacza Skalable Vector Graphics i jest to język do opisu grafiki 2D i aplikacji graficznych w XML, a XML jest następnie renderowany przez przeglądarkę SVG.

SVG jest szczególnie przydatny w przypadku diagramów wektorowych, takich jak wykresy kołowe, dwuwymiarowe wykresy w układzie współrzędnych X, Y itp.

SVG stało się rekomendacją W3C 14 stycznia 2003, a najnowszą wersję specyfikacji SVG można sprawdzić na Specyfikacji SVG .

Przeglądanie plików SVG

Większość przeglądarek internetowych może wyświetlać SVG tak samo, jak mogą wyświetlać pliki PNG, GIF i JPG. Użytkownicy Internet Explorera mogą być zmuszeni do zainstalowania Adobe SVG Viewer, aby móc oglądać SVG w przeglądarce.

Osadzanie SVG w HTML5

HTML5 umożliwia osadzanie SVG bezpośrednio przy użyciu <svg>...</svg> tag, który ma następującą prostą składnię -

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7 wprowadził również opcję konfiguracji („about: config”), w której możesz włączyć HTML5, wykonując następujące czynności -

Rodzaj about:config na pasku adresu przeglądarki Firefox.
Kliknij przycisk „Będę ostrożny, obiecuję!” w wyświetlonym komunikacie ostrzegawczym (i upewnij się, że go przestrzegasz!).
Rodzaj html5.enable do paska filtru u góry strony.
Obecnie byłby wyłączony, więc kliknij go, aby przełączyć wartość na true.

Teraz parser Firefox HTML5 powinien być włączony i powinieneś móc poeksperymentować z następującymi przykładami.