HTML5
HTML5 ( HyperText Markup Language 5 ) er den siste store revisjonen av HTML ( et dataformat designet for å representere websider ). Denne versjonen ble avsluttet den28. oktober 2014. HTML5 spesifiserer to syntakser for en abstrakt modell definert i DOM- termer : HTML5 og XHTML5 .
Språket inkluderer også:
Arbeidet ble overtatt av W3C i mars 2007 etter å ha blitt initiert av WHATWG . De to organisasjonene jobber parallelt med det samme dokumentet for å opprettholde en enkelt versjon av teknologien . W3C lukker funksjonstillegg på22. mai 2011, kunngjør en ferdigstillelse av spesifikasjonen i 2014, og oppfordrer webutviklere til å bruke HTML 5 fra dette tidspunktet. Slutt på 2016, versjon 5.1 er offisielt utgitt og tilbyr flere nye funksjoner som skal lette arbeidet til utviklere av webapplikasjoner .
Historisk sammenheng
Endringer fra HTML 4.X og XHTML 1.X
Doktype
Akkurat som HTML eller XHTML -sider , HTML5 dokumenter krever en DOCTYPE erklæring som angir standard nettleser gjengivelse metode . Når det gjelder HTML 5 , må du spesifisere " <!DOCTYPE html> " i begynnelsen av et hvilket som helst HTML-dokument. For XML- dokumenter er denne erklæringen imidlertid valgfri, nettleseren tolker den som standard i standardmodus. For å bruke XML-strukturen ( XHTML 5 ), må du spesifisere i overskriften : " Content-Type: application/xhtml+xml ".
Eksempel på bruk med HTML5
Eksempel på kildekode
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>titre de la page
</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<!-- mon icon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- mon template.css -->
<link rel="stylesheet" href="main.css" media="screen">
</head>
<body>
<header>
<!-- menu du haut -->
<nav>
<ul>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
</ul>
</nav>
</header>
<!-- contenu de ma page -->
<div>
<!-- article n°1 -->
<article>
<h1>titre de mon article
</h1>
<p>texte de mon article
</p>
<section>
<h2>sous-titre mon article
</h2>
<p>texte de mon sous-titre
</p>
<figure>
<a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a>
</figure>
</section>
</article>
<!-- article n°2 -->
<article>
<h1>titre de mon article
</h1>
<p>texte de mon article
</p>
<section>
<h2>sous-titre mon article
</h2>
<p>texte de mon sous-titre
</p>
<figure>
<a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a>
</figure>
</section>
</article>
</div>
<footer>
<!-- menu du bas -->
<nav>
<ul>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Doctype-erklæringen er ikke mellom store og små bokstaver, og det er ikke lenger noen referanse til en DTD ( Document Type Definition , eller Document Type Definition , dokument som brukes til å beskrive en SGML- eller XML-dokumentmodell).
Koding
Den kodingsdeteksjonsprosessen er også blitt modifisert og er utført i rekkefølge, for å sjekke nærværet av en "Content-Type" HTTP- header , og deretter detektere BOM ved starten av filen.
Elementer av språk
XHTML5
For XHTML5-dokumenter, må forfatteren spesifisere kodingen i XML- prologen , men også innholdstypen: " application/xhtml+xml ". Hele siden må være i samsvar med XML- syntaks . På grunn av XML-språkets utvidbare natur er det mulig å legge til andre koder (eksempel :) ; en slik utvidelse krever å deklarere de tilsvarende navneområdene , ellers vil siden være feil, og nettleseren kan ikke vise den. Det er den strengeste modusen som pålegger å ha en nesten perfekt syntaks.
<mabalise></mabalise>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Exemple
</title>
</head>
<body>
<!-- Contenu de la page respectant la syntaxe XML. -->
</body>
</html>
Nye elementer
-
main : definerer hovedinnholdet på siden, den må være unik på siden.
Eksempel på kildekode
<html lang="fr">
<head>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#contenu-principal">contenu principal
</a></li>
</ul>
</nav>
</header>
<main id="contenu-principal">
<!-- Contenu principal de la page -->
</main>
</body>
</html>
-
section : definerer delene av dokumentet, for eksempel kapitler, topptekster, bunntekster.
-
article : uavhengig del av nettstedet, som en kommentar.
-
aside : assosiert med merkelappen som går foran den.
-
header : spesifiserer en introduksjon eller en gruppe navigasjonselementer for dokumentet.
-
footer : definerer bunnteksten til en artikkel eller et dokument. Inneholder vanligvis forfatterens navn, datoen dokumentet ble skrevet og / eller kontaktinformasjon.
-
nav : definerer et avsnitt i navigasjonen.
-
figure : definerer bilder, diagrammer, bilder, kode, etc.
-
figcaption : forklaring for <figur> -koden.
-
audio : for å definere en lyd, for eksempel musikk eller andre lydstrømmer ( streaming ).
-
video : lar deg sette inn streaming videoinnhold .
-
track : lar deg sette inn en undertekst (i WebVTT- format ) til en video som vises med videokoden .
-
embed : definerer innebygd innhold, for eksempel en plugin-modul .
-
mark : definerer en merket tekst.
-
meter : lar deg bruke målingene med et kjent minimum og maksimum, for å vise en måler.
-
progress : angir en fremdriftslinje for den gjeldende jobben.
-
time : angi en dato eller et tidspunkt, eller begge deler. Denne taggen ble avviklet ioktober 2011til fordel for merkelappen datafør den blir introdusert på nytt.
-
canvas : brukes til å vise grafiske elementer, må du bruke et skript for å animere det.
-
command : definerer en knapp. Denne koden støttes bare av Internet Explorer 9 . Det anbefales derfor ikke å bruke den .
-
details : Spesifiserer ytterligere detaljer som kan skjules eller vises på forespørsel.
-
keygen : brukes til å generere en (sikker) nøkkel.
-
output : representerer resultatet av en beregning.
-
ruby, rtog rp : ruby-merknader .
Nye attributter
For taggen :
<a>
-
media : lar deg spesifisere hvilket medium eller hvilken enhet det er optimalisert.
-
type : definerer MIME for mål-URL.
For taggen :
<area>
-
hreflang : spesifiserer språk for url.
-
media : lar deg spesifisere hvilket medium eller hvilken enhet det er optimalisert.
-
rel : indikerer forholdet mellom gjeldende dokument og mål-URL.
-
type : definerer MIME for mål-URL.
For taggen :
<button>
-
autofocus : indikerer at knappen skal ha fokus mens siden lastes inn.
-
form : angir hvilket skjema knappen tilhører.
-
formaction : spesifiserer hvor skjemadata skal sendes når skjema sendes inn. Erstatter handlingsattributtet til skjemaet.
-
formenctype : angir hvordan skjemadataene skal kodes før de sendes til en server. Erstatter enctype-attributtet til skjemaet.
-
formmethod : definerer hvordan skjemadata skal sendes.
-
formnovalidate : hvis til stede, indikerer at skjemaet ikke må valideres når det sendes.
-
formtarget : angir hvor handlingen skal åpnes / utføres.
For taggen :
<fieldset>
-
name : definerer navnet på feltsettet.
-
disabled : deaktiver feltsettet.
-
form : definerer feltsettets form.
For taggen :
<form>
-
autocomplete : autofullføring.
-
novalidate : hvis det er tilstede, blir skjemaet ikke validert når det sendes inn.
For taggen :
<html>
-
manifest : URL for erklæring ( manifest ) for filer for offline bruk.
For taggen :
<iframe>
-
sandbox : spesifiserer begrensninger på innholdet i iframe
-
seamless : indikerer at iframe må være perfekt integrert i dokumentet.
-
srcdoc : HTML-koden til dokumentet som vises i iframe.
For taggen :
<input>
-
autocomplete : autofullføring.
-
autofocus : setter fokus når du laster inn siden.
-
form : spesifiserer hvilket skjema kontrollen tilhører.
-
formaction : erstatter "action" -attributtet til skjemaet. Spesifiserer URL-en som skjemadataene skal sendes til.
-
formenctype : erstatter "enctype" -attributtet til skjemaet. Indikerer hvordan dataskjemaet skal kodes før det sendes til serveren.
-
formmethod : erstatter "metode" -attributtet til skjemaet. Definerer HTTP-metoden for sending av data til URL-en.
-
formnovalidate : erstatter "novalidate" -attributtet til skjemaet. Hvis det er til stede, bør ikke inndatafeltet valideres når det sendes.
-
formtarget : erstatter "target" -attributtet til skjemaet. Angir målvinduet som brukes når skjemaet sendes inn.
-
height : definerer høyden.
-
list : angir en "dataliste" som inneholder forhåndsdefinerte alternativer for redigeringskontrollen.
-
max : angir maksimumsverdien for inndatafeltet.
-
min : angir minimumsverdien til inndatafeltet.
-
multiple : hvis den er tilstede, kan brukeren angi flere verdier.
-
pattern : definerer et mønster.
-
placeholder : et tips for å hjelpe brukerne med å fylle ut inndatafeltet.
-
required : indikerer at verdien av inndatafeltet er nødvendig for å sende inn skjemaet.
-
step : angir intervallet mellom verdiene.
- nye typer:
- datetime
- datetime-local
- date
- month
- week
- time
- tel
- number
- range
- email
- url
- search
- color
For taggen :
<link>
-
sizes : definerer størrelse, høyde og bredde.
For taggen :
<menu>
-
label : etikett synlig fra menyen.
-
type : definerer hvilken menytype som skal vises. Standard er "liste".
For taggen :
<meta>
-
charset : definerer tegntabellen for koding av siden.
For taggen :
<ol>
-
reversed : hvis den er tilstede, endre visningsrekkefølgen.
For taggen :
<script>
-
async : definerer om skriptet skal kjøres asynkront eller ikke.
For taggen :
<select>
-
autofocus : aktiver fokuset på dette elementet.
-
form : definerer ett eller flere skjemaer for "velg".
For taggen :
<style>
-
scoped : hvis den er tilstede, brukes stilen bare på foreldrene og barna.
For taggen :
<textarea>
-
autofocus : fokuser tekstområdet element.
-
dirname : angir navnet på tekstområdet.
-
form : definerer ett eller flere skjemaer for tekstområdet.
-
maxlength : maksimalt antall tegn.
-
placeholder : definerer et tips for å hjelpe brukeren.
-
required : indikerer at verdien til redigeringskontrollen er nødvendig.
-
wrap : definerer hvordan teksten vises i tekstområdet.
I tillegg til de globale attributtene som gjelder for alle tagger:
- contenteditable
- contextmenu
- data-*
- draggable
- hidden
-
on* (hendelsesbehandlere)
- spellcheck
P2P-tilkobling og distribusjon
- HTML 5 er utstyrt med muligheten til å opprette forbindelser mellom PeerToPeerConnection () brukere , og også takket være websockets .
Endringer i koder og attributter
Følgende tagger fjernes fordi effektene var rent representative, som er rollen som CSS .
-
basefont,
-
big,
-
center,
-
font,
-
strike,
-
tt,
-
u,
The frame, framesetog tags noframeser også fjernet; de var allerede foreldet fordi de skapte tilgjengelighets- og bruksproblemer for sluttbrukeren.
Følgende tagger fjernes også:
-
acronym er ikke lenger inkludert fordi det skapte mye forvirring;
-
appleterstattes av object ;
-
isindex, fordi den kan erstattes av bruk av formkontroller;
-
direr foreldet til fordel for ul.
Til slutt, noscripter det bare gitt i HTML-versjonen, den er ikke inkludert i XML-versjonen.
Foreldelse av attributter
På taggen a
- charset
- koordinerer
- navn (foretrekker id- attributtet )
- metoder
- rev
- form
- urne
På området tag
På innebygd tag
- navn (foretrekker id- attributtet )
På skjemaet
På hodet tag
På html- koden
På iframe- koden
På inngangskoden
På img- taggen
- longdesc
- laveste
- navn (foretrekker id- attributtet )
På koblingstaggen
- charset
- metoder
- rev
- mål
- urne
På metakoden
På objektlappen
- arkiv
- klassisk
- kodet
- kodebase
- kodetype
- erklært
- vent litt
På alternativet
- navn (foretrekker id- attributtet )
På param- taggen
På script tag
På bordet
På td- taggen
På th tag
API
HTML5 introduserer flere nye APIer som kan bidra til å bygge webapplikasjoner og kan brukes sammen, og gir nye elementer introdusert for applikasjoner, inkludert:
- 2D-tegning brukt med den nye lerretstaggen ,
- spille av videoer og lyder / musikk som brukes med de nye video- og lydkodene,
- frakoblede applikasjoner ,
- utgave i kombinasjon med det nye attributtet kalt contenteditable ,
-
dra og slipp i kombinasjon med attributtet som heter draggable ,
- tilgang til nettleserloggen og sider for å legge til denne funksjonen for nettleserloggen, for å forhindre tilbakeslagsknappproblemer .
I tillegg er tredjeparts API-er integrert i denne standarden, for eksempel WebGL fra Khronos Group, slik at 3D-innhold kan legges til sider.
Kontroverser
Mot slutten av 2012 forsøkte en kampanje ledet av flere foreninger for forsvar av digitale friheter, inkludert Free Software Foundation , å trekke oppmerksomhet mot inkluderingen av digitale låser (DRM) i HTML5-standarden.
Merknader og referanser
-
(no) W3C bekrefter at HTML5 vil være tilgjengelig i mai 2011 for kommentar , www.w3.org, 14. februar 2011.
-
" Hvilke nye funksjoner tilbyr HTML 5.1?" " ,14. august 2017
-
(in) W3C arbeidsutkast .
-
(in) Bug 13240 - Vurder å erstatte med , w3.org.
-
(in) W3C legger til tidselement tilbake til HTML5 , webmonkey.com, publisert i november 2011 ..
-
http://www.w3schools.com/tags/att_command_type.asp
-
" <kommando>: HTML-kommandeelementet " , på MDN Web Docs (åpnet 11. juli 2020 ) .
-
(no) W3C informasjon :
-
(in) HTML 5-bilder for å tillate peer-to-peer-tilkoblinger fra javascript, vil avhandlingens målforbindelser ikke være rå TCP. Den komplette spesifikasjonen finner du på http://dev.w3.org/html5/websockets/ .
-
(in) smarte klienter: ReverseHTTP & WebSockets .
-
(in) Vil HTML5-webapper tillate å lage peer-to-peer HTTP-tilkoblinger?
-
P2P, lyd og video på HTML 5- menyen .
-
Si til W3C: vi vil ikke ha et Hollyweb http://www.defectivebydesign.org/no-drm-in-html5/en
-
Avskjerming mot ankomsten av DRM i HTML5 http://www.numerama.com/magazine/25802-levee-de-boucliers-contre-l-arrivee-des-drm-au-sein-du- html5.html
Se også
Bibliografi
- (no) Mark Pilgrim , HTML5: Up and Running , O'Reilly ,august 2010, 205 s. ( ISBN 978-0-596-80602-6 )
- (no) Jeremy Keith ( pref. Jeffery Zeldman), HTML5 for webdesignere , A Book Apart,2012, 87 s. ( ISBN 978-0-9844425-0-8 )
Relaterte artikler
Eksterne linker