HTML5
HTML5 ( HyperText Markup Language 5 ) on HTML: n viimeinen merkittävä versio ( tietomuoto, joka on tarkoitettu edustamaan verkkosivuja ). Tämä versio viimeisteltiin28. lokakuuta 2014. HTML5 määrittää kaksi DOM- termeissä määritetyn abstraktin mallin syntaksia : HTML5 ja XHTML5 .
Kieli sisältää myös:
Työn otti W3C maaliskuussa 2007 WHATWG: n aloitettua sen . Molemmat organisaatiot työskentelevät rinnakkain saman asiakirjan kanssa ylläpitääkseen yhden version tekniikasta . W3C sulkee ominaisuuksien lisäykset22. toukokuuta 2011, ilmoitti spesifikaation viimeistelystä vuonna 2014, ja kannustaa web-kehittäjiä käyttämään HTML 5 : ää tästä eteenpäin. End 2016, versio 5.1 on julkaistu virallisesti ja tarjoaa useita uusia ominaisuuksia, jotka pitäisi helpottaa työtä kehittäjät ja web-sovelluksia .
Historiallinen konteksti
Muutokset HTML 4.X: stä ja XHTML 1.X: stä
Doctype
Aivan kuten HTML tai XHTML -sivuja , HTML5 asiakirjat vaativat Doctype julistuksen osoittaa tavallinen selain tekee menetelmällä . HTML 5: n tapauksessa sinun on määritettävä " <!DOCTYPE html> " minkä tahansa HTML-asiakirjan alkuun. XML- asiakirjoille tämä ilmoitus on kuitenkin valinnainen, selain tulkitsee sen oletusarvoisesti vakiotilassa. Jos haluat käyttää XML-rakennetta ( XHTML 5 ), sinun on määritettävä otsikossa : " Content-Type: application/xhtml+xml ".
Esimerkki käytöstä HTML5: n kanssa
Lähdekoodinäyte
<!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-ilmoituksessa ei erotella isoja ja pieniä kirjaimia, eikä DTD: ssä ole enää viittausta ( Document Type Definition tai Document Type Definition , asiakirja, jota käytetään kuvaamaan SGML- tai XML-dokumenttimallia).
Koodaus
Koodauksen havaitsemisprosessia on myös muutettu ja se suoritetaan järjestyksessä tarkistamalla HTTP "Content-Type" -otsikon läsnäolo ja havaitsemalla sitten BOM tiedoston alussa.
Kielen elementit
XHTML5
XHTML5-asiakirjoille kirjoittajan on määritettävä XML- prologin koodaus , mutta myös sisältötyyppi: " application/xhtml+xml ". Koko sivun on oltava XML- syntaksin mukainen . XML-kielen laajennettavan luonteen vuoksi on mahdollista lisätä muita tunnisteita (esimerkki :) ; tällainen laajennus vaatii vastaavien nimitilojen ilmoittamisen , muuten sivu on virheellinen ja selain ei ehkä pysty näyttämään sitä. Se on tiukin tila, joka edellyttää melkein täydellistä syntaksia.
<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>
Uudet elementit
-
main : määrittelee sivun pääsisällön, sen on oltava yksilöllinen sivulla.
Lähdekoodinäyte
<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 : määrittelee asiakirjan osat, kuten luvut, otsikot, alatunnisteet.
-
article : Sivuston itsenäinen osa, kuten kommentti.
-
aside : liittyy sitä edeltävään tunnisteeseen.
-
header : määrittää asiakirjan johdannon tai ryhmän navigointielementtejä.
-
footer : määrittää artikkelin tai asiakirjan alatunnisteen. Yleensä sisältää tekijän nimen, asiakirjan kirjoittamispäivän ja / tai yhteystiedot.
-
nav : määrittää osan navigoinnista.
-
figure : määrittelee kuvat, kaaviot, valokuvat, koodin jne.
-
figcaption : <figure> -tunnisteen selite.
-
audio : määritellä ääni, kuten musiikki tai muu äänivirta ( suoratoisto ).
-
video : voit lisätä suoratoistovideosisältöä .
-
track : voit lisätä tekstityksen ( WebVTT- muodossa ) videotunnisteella näytettyyn videoon.
-
embed : määrittelee upotetun sisällön, kuten laajennuksen .
-
mark : määrittelee merkityn tekstin.
-
meter : voit käyttää mittauksia tunnetulla minimi- ja maksimiarvolla mittarin näyttämiseksi.
-
progress : asettaa etenemispalkin parhaillaan käynnissä olevalle työlle.
-
time : aseta päivämäärä tai aika tai molemmat. Tämä tagi lopetettiinlokakuu 2011tunnuksen puolesta dataennen kuin se otetaan uudelleen käyttöön.
-
canvas : käytetään graafisten elementtien näyttämiseen, sinun on käytettävä komentosarjaa sen animoimiseksi.
-
command : määrittää painikkeen. Tätä tagia tukee vain Internet Explorer 9 . Siksi ei ole suositeltavaa käyttää sitä .
-
details : Määrittää lisätietoja, jotka voidaan piilottaa tai näyttää pyynnöstä.
-
keygen : käytetään (suojatun) avaimen luomiseen.
-
output : edustaa laskutoimituksen tulosta.
-
ruby, rtJa rp : Ruby merkinnät .
Uudet määritteet
Tagille :
<a>
-
media : voit määrittää, mihin mediaan tai laitteeseen se on optimoitu.
-
type : määrittää kohde-URL-osoitteen MIME-arvon.
Tagille :
<area>
-
hreflang : määrittää URL-kielen kielen.
-
media : voit määrittää, mihin mediaan tai laitteeseen se on optimoitu.
-
rel : osoittaa nykyisen asiakirjan ja kohde-URL-osoitteen välisen suhteen.
-
type : määrittää kohde-URL-osoitteen MIME- arvon.
Tagille :
<button>
-
autofocus : osoittaa, että painikkeella tulisi olla kohdistin sivua ladattaessa.
-
form : määrittää, mihin muotoon painike kuuluu.
-
formaction : määrittää, minne lomake lähetetään, kun lomake lähetetään. Korvaa lomakkeen toimintomääritteen.
-
formenctype : ilmaisee, kuinka lomake-tiedot tulisi koodata ennen lähettämistä palvelimelle. Korvaa lomakkeen enctype-määritteen.
-
formmethod : määrittelee, miten lomake-data lähetetään.
-
formnovalidate : jos on, ilmaisee, että lomaketta ei saa vahvistaa sen lähettämisen yhteydessä.
-
formtarget : määrittää, missä toiminto avataan / suoritetaan.
Tagille :
<fieldset>
-
name : määrittää kenttäkokonaisuuden nimen.
-
disabled : poista kenttäjoukko käytöstä.
-
form : määrittää kenttäkokonaisuuden muodon.
Tagille :
<form>
-
autocomplete : automaattinen täydennys.
-
novalidate : jos lomake on olemassa, sitä ei vahvisteta, kun se lähetetään.
Tagille :
<html>
-
manifest : Tiedostojen URL-osoitteet ( luettelo ) offline-käyttöä varten.
Tagille :
<iframe>
-
sandbox : määrittää iframe-kehyksen sisältöä koskevat rajoitukset
-
seamless : osoittaa, että iframe-kehyksen on oltava täysin integroitu asiakirjaan.
-
srcdoc : iframe-kehyksessä näkyvän asiakirjan HTML-koodi.
Tagille :
<input>
-
autocomplete : automaattinen täydennys.
-
autofocus : asettaa tarkennuksen sivua ladattaessa.
-
form : määrittää, mihin muotoon ohjaus kuuluu.
-
formaction : korvaa lomakkeen "action" -määritteen. Määrittää URL-osoitteen, johon lomaketiedot lähetetään.
-
formenctype : korvaa lomakkeen attribuutin "enctype". Osoittaa, kuinka tietolomake tulisi koodata ennen sen lähettämistä palvelimelle.
-
formmethod : korvaa lomakkeen "method" -määritteen. Määrittää HTTP-menetelmän tietojen lähettämiseksi URL-osoitteeseen.
-
formnovalidate : korvaa lomakkeen "novalidate" -määritteen. Jos kenttää on, syöttökenttää ei tule vahvistaa, kun se lähetetään.
-
formtarget : korvaa lomakkeen "target" -määritteen. Ilmaisee kohdeikkunan, jota käytettiin lomakkeen lähettämisen yhteydessä.
-
height : määrittää korkeuden.
-
list : nimeää "datalistin", joka sisältää ennalta määritetyt vaihtoehdot muokkausohjaimelle.
-
max : osoittaa syöttökentän maksimiarvon.
-
min : osoittaa syöttökentän vähimmäisarvon.
-
multiple : jos on, käyttäjä voi syöttää useita arvoja.
-
pattern : määrittelee mallin.
-
placeholder : vinkki, joka auttaa käyttäjiä täyttämään syöttökentän.
-
required : osoittaa, että syöttökentän arvo on välttämätön lomakkeen lähettämistä varten.
-
step : osoittaa arvojen välisen välin.
- uudet tyypit:
- datetime
- datetime-local
- date
- month
- week
- time
- tel
- number
- range
- email
- url
- search
- color
Tagille :
<link>
-
sizes : määrittää koon, korkeuden ja leveyden.
Tagille :
<menu>
-
label : etiketti näkyy valikossa.
-
type : määrittelee näytettävän valikon tyypin. Oletusarvo on "lista".
Tagille :
<meta>
-
charset : määrittelee merkkitaulukon sivun koodaamista varten.
Tagille :
<ol>
-
reversed : jos on, muuta näytön järjestystä.
Tagille :
<script>
-
async : määrittää, suoritetaanko komentosarja asynkronisesti vai ei.
Tagille :
<select>
-
autofocus : aktivoi kohdistus tähän elementtiin.
-
form : määrittelee yhden tai useamman lomakkeen "valitse".
Tagille :
<style>
-
scoped : tyyliä käytetään vain vanhempaan ja lapsiin.
Tagille :
<textarea>
-
autofocus : kohdista teksti-alueen elementti.
-
dirname : osoittaa tekstialueen nimen.
-
form : määrittelee yhden tai useamman lomakealueen tekstialueelle.
-
maxlength : merkkien enimmäismäärä.
-
placeholder : määrittelee vinkin, joka auttaa käyttäjää.
-
required : osoittaa, että muokkausohjaimen arvo on välttämätön.
-
wrap : määrittää, miten teksti näytetään tekstialueella.
Sekä kaikkiin tunnisteisiin sovellettavat yleiset määritteet:
- contenteditable
- contextmenu
- data-*
- draggable
- hidden
-
on* (tapahtumankäsittelijät)
- spellcheck
P2P-yhteys ja jakelu
- HTML 5 tarjoaa mahdollisuuden muodostaa yhteyksiä PeerToPeerConnection () -käyttäjien välillä ja myös verkkopistokkeiden ansiosta .
Muutokset tunnisteissa ja määritteissä
Seuraavat tunnisteet poistetaan, koska niiden vaikutukset olivat puhtaasti edustavia, mikä on CSS: n rooli .
-
basefont,
-
big,
-
center,
-
font,
-
strike,
-
tt,
-
u,
Myös frame, framesetja tunnisteet noframeson poistettu; ne olivat jo vanhentuneita, koska ne loivat esteettömyys- ja käytettävyysongelmia loppukäyttäjälle.
Seuraavat tunnisteet poistetaan myös:
-
acronym ei ole enää mukana, koska se aiheutti paljon sekaannusta;
-
appleton korvattu object ;
-
isindex, koska se voidaan korvata muodonohjaimilla;
-
diron vanhentunut ul.
Lopuksi, noscripttarjotaan vain HTML-versiossa, sitä ei sisälly XML-versioon.
Määritteiden vanhentuminen
Tunnisteessa a
- merkkisarja
- koordinaatit
- nimi (mieluummin tunnus- attribuutti )
- menetelmiä
- rev
- muoto
- uurna
On alue tunniste
Upotetussa tagissa
- nimi (mieluummin tunnus- attribuutti )
Sen muoto tag
Sen pää tag
HTML- tagissa
Iframe- tagissa
Sen tulo tag
Img- tagissa
- pitkädesc
- matala
- nimi (mieluummin tunnus- attribuutti )
On link tag
- merkkisarja
- menetelmiä
- rev
- kohde
- uurna
On meta -tunniste
On objekti tunniste
- arkisto
- klassikko
- koodattu
- koodipohja
- koodityyppi
- ilmoitettu
- Valmiustila
On vaihtoehto tagin
- nimi (mieluummin tunnus- attribuutti )
On param tunniste
Komentosarjan tagissa
Pöydän tagissa
Td- tagissa
Kolmannessa tagissa
API
HTML5 esittelee useita uusia sovellusliittymiä, jotka voivat auttaa luomaan verkkosovelluksia ja joita voidaan käyttää yhdessä, tarjoten sovelluksille uusia elementtejä, kuten:
- 2D-piirustus, jota käytetään uuden piirtoalustan kanssa ,
- toista videoita ja ääniä / musiikkia, jota käytetään uusien video- ja äänitunnisteiden kanssa,
- offline- sovellukset ,
- painos yhdessä uuden attribuutin nimeltä contenteditable kanssa ,
-
vedä ja pudota yhdessä ns. vedettävän määritteen kanssa ,
- pääsy selaushistoriaan ja sivuihin lisätäksesi tämän selaushistoriaominaisuuden, jotta estetään askelpalautinpainikeongelmat .
Lisäksi kolmannen osapuolen API integroidaan tätä standardia, kuten WebGL päässä Khronoksen, jolloin 3D-sisältöä voidaan lisätä sivuille.
Kiistat
Loppuvuodesta 2012 useiden digitaalisia vapauksia puolustavien järjestöjen, mukaan lukien Free Software Foundation , johtamassa kampanjassa yritettiin kiinnittää huomiota digitaalisten lukkojen (DRM) sisällyttämiseen HTML5-standardiin.
Huomautuksia ja viitteitä
-
(en) W3C vahvistaa, että HTML5 on saatavilla toukokuussa 2011 kommentoitavaksi , www.w3.org, 14. helmikuuta 2011.
-
" Mitä uusia ominaisuuksia HTML 5.1 tarjoaa?" " ,14. elokuuta 2017
-
(sisään) W3C: n työluonnos .
-
(in) Vika 13240 - Harkitse vaihtamista kanssa , w3.org.
-
(in) W3C lisää aikaelementin takaisin HTML5: een , webmonkey.com, julkaistu marraskuussa 2011 ..
-
http://www.w3schools.com/tags/att_command_type.asp
-
" <komento>: HTML esikuntayksikön " , on MDN Web-dokumentit (näytetty 11 heinäkuu 2020 ) .
-
(en) W3C-tiedot :
-
(in) HTML 5 -kuvat, jotka mahdollistavat vertaisyhteydet javascriptistä, opinnäytetyön tavoitekytkennät eivät ole raakoja TCP: itä. Täydelliset tiedot löytyvät osoitteesta http://dev.w3.org/html5/websockets/ .
-
(in) Smart Asiakkaat: ReverseHTTP & WebSockets .
-
(in) Voivatko HTML5-verkkosovellukset muodostaa vertaisyhteyksien HTTP-yhteyksiä?
-
P2P, ääni ja video HTML 5 -valikossa .
-
Kerro W3C: lle: emme halua Hollywebiä http://www.defectivebydesign.org/no-drm-in-html5/en
-
Suojaus DRM: n saapumista vastaan HTML5: ssä http://www.numerama.com/magazine/25802-levee-de-boucliers-contre-l-arrivee-des-drm-au-sein-du- html5.html
Katso myös
Bibliografia
- (en) Mark Pilgrim , HTML5: Käynnissä , O'Reilly ,elokuu 2010, 205 Sivumäärä ( ISBN 978-0-596-80602-6 )
- (en) Jeremy Keith ( pref. Jeffery Zeldman), HTML5 Web-suunnittelijoille , A Book Apart,2012, 87 Sivumäärä ( ISBN 978-0-9844425-0-8 )
Aiheeseen liittyvät artikkelit
Ulkoiset linkit