HTML 5
HTML5 (HyperText Markup Language, versió 5) és la cinquena gran revisió del llenguatge bàsic de la World Wide Web, HTML. HTML5 especifica dues variants de sintaxi per a HTML: un «clàssic» HTML (text / html), la variant coneguda com a HTML5, i una variant XHTML coneguda com a 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.
 | |
 | |
| 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… |
Nous elements
modificaHTML5 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 dona èmfasi en la importància de l'scripting DOM per al comportament de la web.
Diferències amb HTML5 i XHTML
modificaCom 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
modificaEtiqueta
|
Atributs
|
Comentaris
|
<!-- -->
|
Estàndard o cap
|
|
<!DOCTYPE>
|
Estàndard o cap
|
|
<a>
|
href | target | rel | hreflang | media | type
|
Atribut afegit: media Atribut canviat: Target |
<abbr>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
<address>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
<area>
|
Estàndard o cap
|
|
<article>
|
Atributs globals
|
Nova etiqueta
|
<aside>
|
Atributs globals
|
Nova etiqueta
|
<audi>
|
autbuffer | autplay | controls | loop | src
|
Nova etiqueta
|
<b>
|
Atributs globals
|
Etiqueta canviada
|
<base>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
<bb>
|
Estàndard o cap
|
|
<bdo>
|
Estàndard o cap
|
|
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
|
<captin>
|
Estàndard o cap
|
|
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 | disabled | hidden | icon | label | radigroup | type
|
Nova etiqueta
|
<datagrid>
|
Estàndard o cap
|
|
<datalist>
|
Atributs globals
|
Nova etiqueta
|
<dd>
|
Estàndard o cap
|
|
<del>
|
Estàndard o cap
|
|
<details>
|
open
|
Nova etiqueta
|
<dialog>
|
Atributs globals
|
Nova etiqueta
|
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 | type | width
|
Nova etiqueta
|
<fieldset>
|
Estàndard o cap
|
|
<figure>
|
Atributs globals
|
Nova etiqueta
|
Etiqueta eliminada
| ||
<footer>
|
Atributs globals
|
Nova etiqueta
|
<form>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
Etiqueta eliminada
| ||
<h1> ... <h6> |
Estàndard o cap
|
|
<head>
|
Estàndard o cap
|
|
<header>
|
Atributs globals
|
Nova etiqueta
|
<hgroup>
|
Atributs globals
|
Nova etiqueta
|
<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 | aut-complete | autfocus | cheked | disabled | form | formactin | 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
|
<ins>
|
Estàndard o cap
|
|
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
|
<map>
|
Estàndard o cap
|
|
<menu>
|
Estàndard o cap
|
|
<meta>
|
Estàndard o cap
|
|
<meter>
|
high | low | max | min | optimum | value
|
Nova etiqueta
|
<nav>
|
Atributs globals
|
Nova etiqueta
|
Etiqueta eliminada
| ||
<noscript>
|
Estàndard o cap
|
|
<object>
|
Estàndard o cap
|
|
<ol>
|
Estàndard o cap
|
|
<optgroup>
|
Estàndard o cap
|
|
<optin>
|
Estàndard o cap
|
|
<output>
|
form
|
Nova etiqueta
|
<p>
|
Estàndard o cap
|
|
<param>
|
Estàndard o cap
|
|
<pre>
|
Estàndard o cap
|
|
<progress>
|
max | value
|
Nova etiqueta
|
<q>
|
||
<ruby>
|
cite
|
Nova etiqueta
|
<rp>
|
Atributs globals
|
Nova etiqueta
|
<rt>
|
Atributs globals
|
Nova etiqueta
|
Etiqueta eliminada
| ||
<samp>
|
Estàndard o cap
|
|
<script>
|
Estàndard o cap
|
|
<sectin>
|
cite
|
Nova etiqueta
|
<select>
|
Estàndard o cap
|
|
<small>
|
Atributs globals
|
Etiqueta Canviada
|
<source>
|
media | src | type
|
Nova etiqueta
|
<span>
|
Estàndard o cap
|
|
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
|
<title>
|
Estàndard o cap
|
|
<tr>
|
Estàndard o cap
|
|
Etiqueta eliminada
| ||
Etiqueta eliminada
| ||
<ul>
|
Estàndard o cap
|
|
<var>
|
Estàndard o cap
|
|
<video>
|
src | poster | autbuffer | autplay | loop | controls | width | height
|
Nova etiqueta
|
Etiqueta eliminada
|
Notes: En groc aquelles etiquetes introduïdes en aquesta nova versió, en blau les etiquetes que han sigut canviades tot o en part i en gris les etiquetes eliminades d'aquesta versió. Si bé a la pràctica els navegadors no ho estan tenint en compte per evitar perdre quota de mercat.
Novetats
modifica- Incorpora etiquetes (canvas 2D i 3D, àudio, vídeo) amb còdecs 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
modifica- 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
modifica- 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 HTML5
modificaCodi HTML5 per a reproduir audio sense flash:
<html>
<head>
<title>font de múltiples elements</title>
</head>
<body>
<audio id="audioTestElem" autobuffer controls >
El teu navegador no suporta l'etiqueta d'audio a HTML5.
</audio>
</body>
</html>Referències
modificaEnllaços externs
modifica