HTML 5
 | |
 | |
| Tipus | Markup language |
|---|---|
| Extensió | HTML: .html, .htm XHTML: .xhtml, .xht, .xml |
| MIME | HTML: text/html XHTML: application/xhtml+xml, application/xml |
| Codi de tipus | TEXT |
| Uniform Type Identifier | public.html |
| Desenvolupador | W3C HTML WG, WHATWG |
| Versió inicial | 28 octubre 2014  |
| Extensió de | Standard Generalized Markup Language |
| Estàndard | |
| Més informació | |
| Stack Exchange | Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta, Etiqueta i Etiqueta |
| LocFDD | fdd000481 |
| PRONOM | fmt/471 |
| Lloc web | html.spec.whatwg.org… |
HTML 5 (HyperText Markup Language, versió 5) és la cinquena gran revisió del llenguatge bàsic de la World Wide Web, HTML. HTML 5 especifica dues variants de sintaxi per a HTML: un «clàssic» HTML (text / html), la variant coneguda com HTML5, i una variant XHTML coneguda com sintaxi XHTML5 que haurà de ser usada com a XML (XHTML) (application/xhtml+xml).[1] Aquesta és la primera vegada que HTML i XHTML s'han desenvolupat en paral·lel. El desenvolupament d'aquest codi és regulat pel Consorci W3C.
Nous elements
HTML 5 estableix una sèrie de nous elements i atributs que reflecteixen l'ús típic dels llocs web moderns. Alguns d'ells són tècnicament similars a les etiquetes <div> i <span>, però tenen un significat semàntic, com ara <nav> (bloc de navegació del lloc web) i <footer>. Altres elements proporcionen noves funcionalitats a través d'una interfície estandarditzada, com els elements <audio> i <video>. També presenta millores en l'element <canvas>.
Alguns elements de HTML 4.01 han quedat obsolets, incloent elements purament de presentació, com <font> i <center>, ja que els efectes són manejats pel CSS. També es dóna èmfasi en la importància de l'scripting DOM per al comportament de la web.
Diferències amb HTML 4 i XHTML
Com a nous elements: article, dialog.
Com a nous atributs: media, ping, autofocus, inputmode, min, max, pattern.
Els elements eliminats són: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u.
Atributs eliminats:
- rev i charset a
<link>i<a> - target a
<link> - nohref a
<area> - profile a
<head> - version a
<html> - name a
<map> - scheme a
<meta> - archive, classid, codetype, declare i standby a
<object> - valuetype a
<param> - charset a
<script> - summary a
<table> - header, axis i abbr a
<td>i<th>
Diferències detallades
Etiqueta </div>
|
Atributs
|
Comentaris
|
Estàndard o cap
|
||
<! DOCTYPE>
|
Estàndard o cap
|
|
<a>
|
target|rel|hreflang|media|type | Atribut Afegit: mitjana Atribut canviat: Target |
Estàndard o cap
|
||
Etiqueta Eliminada
| ||
<address>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
<AREA>
|
Estàndard o cap
|
|
<article>
|
Atributs globals
|
Nova etiqueta </div>
|
<aside>
|
Atributs globals
|
Nova etiqueta </div>
|
<audio>
|
autoplay|controls|loop|src | Nova etiqueta </div>
|
Atributs globals
|
Etiqueta canviada
| |
<base>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
<bb>
|
Estàndard o cap
|
|
Estàndard o cap
|
||
Etiqueta eliminada
| ||
Estàndard o cap
|
||
<body>
|
Estàndard o cap
|
|
Estàndard o cap
|
||
<button>
|
Estàndard o cap
|
|
<canvas>
|
width | Nova etiqueta </div>
|
Estàndard o cap
|
||
Etiqueta eliminada
| ||
Atributs globals
|
Etiqueta canviada
| |
|
Estàndard o cap
|
|
<col>
|
Estàndard o cap
|
|
<colgroup>
|
Estàndard o cap
|
|
<command>
|
default|disabled|hidden|icon|label|radiogroup|type | Nova etiqueta </div>
|
<datagrid>
|
Estàndard o cap
|
|
<datalist>
|
Atributs globals
|
Nova etiqueta </div>
|
Estàndard o cap
|
||
Estàndard o cap
|
||
<details>
|
open
|
Nova etiqueta </div>
|
<dialog>
|
Atributs globals
|
Nova etiqueta </div>
|
Etiqueta eliminada
| ||
Estàndard o cap
|
||
Estàndard o cap
|
||
Estàndard o cap
|
||
Estàndard o cap
|
||
Estàndard o cap
|
||
<embed>
|
src|type|width | Nova etiqueta </div>
|
<fieldset>
|
Estàndard o cap
|
|
<figure>
|
Atributs globals
|
Nova etiqueta </div>
|
Etiqueta eliminada
| ||
<footer>
|
Atributs globals
|
Nova etiqueta </div>
|
<form>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
Etiqueta eliminada
| ||
... |
Estàndard o cap
|
|
<head>
|
Estàndard o cap
|
|
<header>
|
Atributs globals
|
Nova etiqueta </div>
|
<hgroup>
|
Atributs globals
|
Nova etiqueta </div>
|
Cap
|
Etiqueta canviada
| |
<html>
|
Estàndard o cap
|
|
Cap
|
Etiqueta canviada
| |
<iframe>
|
Estàndard o cap
|
|
<img>
|
Estàndard o cap
|
|
<input>
|
alt|auto-completi|autofocus|chek|disabled|form|formaction|formenctype|formmethod|formnovalidate|formtarget|height|list|max|maxlength|min|multiple|name|pattern1 placeholder|Readonly|required|size|src|step|type|value|width | Etiqueta canviada: Afegits 13 elements a type
|
Estàndard o cap
|
||
Etiqueta eliminada
| ||
Estàndard o cap
|
||
<label>
|
Estàndard o cap
|
|
<legend>
|
Estàndard o cap
|
|
Estàndard o cap
|
||
<link>
|
Estàndard o cap
|
|
Atributs globals
|
Nova etiqueta </div>
| |
<MAP>
|
Estàndard o cap
|
|
<menu>
|
Estàndard o cap
|
|
<meta>
|
Estàndard o cap
|
|
<meter>
|
low|max|min|optimum|value | Nova etiqueta </div>
|
<nav>
|
Atributs globals
|
Nova etiqueta </div>
|
Etiqueta eliminada
| ||
<noscript>
|
Estàndard o cap
|
|
<object>
|
Estàndard o cap
|
|
Estàndard o cap
|
||
<optgroup>
|
Estàndard o cap
|
|
<option>
|
Estàndard o cap
|
|
<output>
|
form
|
Nova etiqueta </div>
|
|
Estàndard o cap
|
|
<param>
|
Estàndard o cap
|
|
Estàndard o cap
|
||
<progress>
|
value | Nova etiqueta </div>
|
citi
|
Nova etiqueta </div>
| |
Atributs globals
|
Nova etiqueta </div>
| |
Atributs globals
|
Nova etiqueta </div>
| |
Etiqueta eliminada
| ||
Estàndard o cap
|
||
<script>
|
Estàndard o cap
|
|
<section>
|
citi
|
Nova etiqueta </div>
|
<select>
|
Estàndard o cap
|
|
Atributs globals
|
Etiqueta Canviada
| |
</strong> </div>
|<div Align="center"> mitja|src|type </div>
|<div Align="center"> Nova etiqueta </div>
|-
|<div Align="center"> <strong> <span> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|- Bgcolor = "DarkGray"
|<div Align="center"> <strong> <s> <strike> </s> </strong> </div>
|<div Align="center"> </div>
|<div Align="center"> Etiqueta eliminada </div>
|-
|<div Align="center"> <strong> <strong> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <style> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <sub> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <sup> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <table> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <tbody> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <td> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <textarea> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <tfoot> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <th> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <thead> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|- Bgcolor = "Gold"
|<div Align="center"> <strong> <time> </strong> </div>
|<div Align="center"> datetime|pubdate </div>
|<div Align="center"> Nova etiqueta </div>
|-
|<div Align="center"> <strong> <title> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <tr> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|- Bgcolor = "DarkGray"
|<div Align="center"> <strong> <s> <tt> </s> </strong> </div>
|<div Align="center"> </div>
|<div Align="center"> Etiqueta eliminada </div>
|- Bgcolor = "DarkGray"
|<div Align="center"> <strong> <s> <u> </s> </strong> </div>
|<div Align="center"> </div>
|<div Align="center"> Etiqueta eliminada </div>
|-
|<div Align="center"> <strong> <ul> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|-
|<div Align="center"> <strong> <var> </strong> </div>
|<div Align="center"> Estàndard o cap </div>
|<div Align="center"> </div>
|- Bgcolor = "Gold"
|<div Align="center"> <strong> <video> </strong> </div>
|<div Align="center"> src|poster|autobuffer|autoplay|loop|controls|width|height </div>
|<div Align="center"> Nova etiqueta </div>
|- Bgcolor = "DarkGray"
|<div Align="center"> <strong> <s> <xmp> </s> </strong> </div>
|<div Align="center"> </div>
|<div Align="center"> Etiqueta eliminada </div>
|}
<small> ''' Notes: ''' </small>
<small> En <span style="background-color:Gold"> groc </span> aquelles etiquetes introduïdes en aquesta nova versió, en <span style="background-color:LightBlue"> blau </span> les etiquetes que han estat canviades tot o en part i en <span style="background-color:DarkGray"> gris </span> les etiquetes eliminades d'aquesta versió.
Si bé en la pràctica els navegadors no ho estan tenint en compte per evitar perdre quota de mercat. </Small>
== Novetats ==
* Incorpora etiquetes (canvas 2D i 3D, àudio, vídeo) amb codecs per mostrar els continguts multimèdia. Actualment hi ha una lluita entre imposar còdecs lliures ([[WebM]]+[[VP8]]) o privatius ([[H.264/MPEG-4 AVC]]).
* Etiquetes per manejar grans conjunts de dades: DataGrid, Details, Menu i Command. Permeten generar taules dinàmiques que poden filtrar, ordenar i amagar contingut en client.
* Millores en els formularis. Nous tipus de dades (eMail, number, url, datetime ...) i facilitats per validar el contingut sense Javascript.
* Visors: MathML (fórmules matemàtiques) i SVG (gràfics vectorials). En general es deixa obert a poder interpretar altres llenguatges XML.
* Drag & Drop. Nova funcionalitat per arrossegar objectes com imatges.
== Web Semàntica ==
* Afegeix etiquetes per gestionar la Web Semàntica (Web 3.0): header, footer, article, nav, time (data del contingut), link rel =''(tipus de contingut que s'enllaça).
* Aquestes etiquetes permeten descriure quin és el significat del contingut. Per exemple la seva importància, la seva finalitat i les relacions que existeixen. No tenen especial impacte en la visualització, s'orienten a cercadors.
* Els cercadors poden indexar i interpretar aquesta meta informació per no buscar simplement aparicions de paraules en el text de la pàgina.
* Permet incorporar a les pàgines fitxers RDF/OWL (amb meta informació) per descriure relacions entre els termes utilitzats.
== Noves APIs i Javascript ==
* API per fer Drag & Drop. Mitjançant esdeveniments.
* API per treballar Off-Line. Permet descarregar tots els continguts necessaris i treballar en local.
* API de Geoposicionament per a dispositius que ho suportin.
* API Storage. Facilitat d'emmagatzematge persistent en local, amb bases de dades (basades en SQL Lite) o amb emmagatzematge d'objectes per aplicació o per domini web (Local Storage i Global Storage). Es disposa d'una Base de dades amb la possibilitat de fer consultes SQL.
* WebSockets. API de comunicació bidireccional entre pàgines. Similar als Sockets de C.
* WebWorkers. Fils d'execució en paral·lel.
* ESTÀNDARD FUTUR. System Information API. Accés al maquinari a baix nivell: xarxa, fitxers, CPU, Memòria, ports USB, càmeres, micròfons ... molt interessant però amb nombroses excepcions de seguretat.
== Exemples de codis HTML 5 ==
Codi HTML 5 per a [http://dev.w3.org/cvsweb/~checkout~/html5/tests/validation/full/valid/source.html?rev=1.1&content-type=text/html;%20charset=iso-8859-1 reproduir audio sense ''flash'']:
<source lang="html4strict">
<html>
<head>
<title>font de múltiples elements</title>
</head>
<body>
<audio id="audioTestElem" autobuffer controls >
<source src="test.m4a">
<source src="test.ogg" type="audio/ogg; codecs=vorbis">
<source src="url">
no audio for you
</audio>
</body>
</html>ReferènciesEnllaços externs A Wikimedia Commons hi ha contingut multimèdia relatiu a: HTML 5 |