HTML 5

HTML5
(HyperText Markup Language)
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	WHATWG Editor's draft; W3C Editor's draft;
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
< &#33, DOCTYPE>	Estàndard o cap
< a>	href \| target &#124, rel &#124, hreflang &#124, mitjà \| type	Atribut Afegit: mitjana Atribut canviat: Target
< abbr>	Estàndard o cap
~~< acronym>~~		Etiqueta Eliminada
< address>	Estàndard o cap
~~< applet>~~		Etiqueta eliminada
< area>	Estàndard o cap
< article>	Atributs globals	Nova etiqueta </div>
< aside>	Atributs globals	Nova etiqueta </div>
< audio>	autobuffer \| autoplay &#124, controls &#124, loop \| src	Nova etiqueta </div>
< b>	Atributs globals	Etiqueta canviada
< base>	Estàndard o cap
~~< basefont>~~		Etiqueta eliminada
< bb>	Estàndard o cap
< bdo>	Estàndard o cap
~~< big>~~		Etiqueta eliminada
< blockquote>	Estàndard o cap
< body>	Estàndard o cap
< br>	Estàndard o cap
< button>	Estàndard o cap
< canvas>	height \| width	Nova etiqueta </div>
< caption>	Estàndard o cap
~~< center>~~		Etiqueta eliminada
< cite>	Atributs globals	Etiqueta canviada
< code>	Estàndard o cap
< col>	Estàndard o cap
< colgroup>	Estàndard o cap
< command>	checked \| default &#124, disabled &#124, hidden \| icon &#124, label &#124, radiogroup \| type	Nova etiqueta </div>
< datagrid>	Estàndard o cap
< datalist>	Atributs globals	Nova etiqueta </div>
< dd>	Estàndard o cap
< del>	Estàndard o cap
< details>	open	Nova etiqueta </div>
< dialog>	Atributs globals	Nova etiqueta </div>
~~< dir>~~		Etiqueta eliminada
< div>	Estàndard o cap
< dfn>	Estàndard o cap
< dl>	Estàndard o cap
< dt>	Estàndard o cap
< em>	Estàndard o cap
< embed>	height \| src &#124, type \| width	Nova etiqueta </div>
< fieldset>	Estàndard o cap
< figure>	Atributs globals	Nova etiqueta </div>
~~< font>~~		Etiqueta eliminada
< footer>	Atributs globals	Nova etiqueta </div>
< form>	Estàndard o cap
~~< frame>~~		Etiqueta eliminada
~~< frameset>~~		Etiqueta eliminada
< h1> ... < h6>	Estàndard o cap
< head>	Estàndard o cap
< header>	Atributs globals	Nova etiqueta </div>
< hgroup>	Atributs globals	Nova etiqueta </div>
< hr>	Cap	Etiqueta canviada
< html>	Estàndard o cap
< i>	Cap	Etiqueta canviada
< iframe>	Estàndard o cap
< img>	Estàndard o cap
< input>	accept \| alt \| auto-completi \| autofocus &#124, chek &#124, disabled &#124, form &#124, formaction &#124, formenctype &#124, formmethod &#124, formnovalidate &#124, formtarget &#124, height \| list \| màx &#124, maxlength &#124, min &#124, múltiple &#124, name \| pattern1 placeholder \| Readonly &#124, required &#124, size \| src &#124, step &#124, type &#124, value \| width	Etiqueta canviada: Afegits 13 elements a type
< ins>	Estàndard o cap
~~< isindex>~~		Etiqueta eliminada
< kbd>	Estàndard o cap
< label>	Estàndard o cap
< legend>	Estàndard o cap
< li>	Estàndard o cap
< link>	Estàndard o cap
< mark>	Atributs globals	Nova etiqueta </div>
< map>	Estàndard o cap
< menu>	Estàndard o cap
< meta>	Estàndard o cap
< meter>	high \| low &#124, màx &#124, min &#124, optimum \| value	Nova etiqueta </div>
< nav>	Atributs globals	Nova etiqueta </div>
~~< noframes>~~		Etiqueta eliminada
< noscript>	Estàndard o cap
< object>	Estàndard o cap
< ol>	Estàndard o cap
< optgroup>	Estàndard o cap
< option>	Estàndard o cap
< output>	form	Nova etiqueta </div>
< p>	Estàndard o cap
< param>	Estàndard o cap
< pre>	Estàndard o cap
< progress>	màx \| value	Nova etiqueta </div>
< q>
< ruby>	citi	Nova etiqueta </div>
< rp>	Atributs globals	Nova etiqueta </div>
< rt>	Atributs globals	Nova etiqueta </div>
~~< s>~~		Etiqueta eliminada
< samp>	Estàndard o cap
< script>	Estàndard o cap
< section>	citi	Nova etiqueta </div>
< select>	Estàndard o cap
< small>	Atributs globals	Etiqueta Canviada
< source>	media \| src \| type	Nova etiqueta </div>
< span>	Estàndard o cap
~~< strike>~~		Etiqueta eliminada
< strong>	Estàndard o cap
< style>	Estàndard o cap
< sub>	Estàndard o cap
< sup>	Estàndard o cap
< table>	Estàndard o cap
< tbody>	Estàndard o cap
< td>	Estàndard o cap
< textarea>	Estàndard o cap
< tfoot>	Estàndard o cap
< th>	Estàndard o cap
< thead>	Estàndard o cap
< time>	datetime \| pubdate	Nova etiqueta </div>
< title>	Estàndard o cap
< tr>	Estàndard o cap
~~< tt>~~		Etiqueta eliminada
~~< u>~~		Etiqueta eliminada
< ul>	Estàndard o cap
< var>	Estàndard o cap
< video>	src \| pòster &#124, autobuffer &#124, autoplay &#124, loop &#124, controls &#124, width \| height	Nova etiqueta </div>
~~< xmp>~~		Etiqueta eliminada

Notes: En groc aquelles etiquetes introduïdes en aquesta nova versió, en blau les etiquetes que han estat canviades tot o en part i en gris 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.

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 reproduir audio sense flash:

<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ències

↑ W3C. «HTML 5» (en anglès). Ian Hickson y David Hyatt, 06-10-2009. [Consulta: 6 octubre 2009].

Enllaços externs

A Wikimedia Commons hi ha contingut multimèdia relatiu a: HTML 5

[w3cSpec-1] W3C. «HTML 5» (en anglès). Ian Hickson y David Hyatt, 06-10-2009. [Consulta: 6 octubre 2009].

[1]