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… |
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.
Nous elements
[modifica]HTML5 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
[modifica]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
[modifica]Etiqueta |
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
[modifica]Codi 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
[modifica]Enllaços externs
[modifica]