HTML 5

De Viquipèdia
Dreceres ràpides: navegació, cerca
HTML5
(HyperText Markup Language)
HTML 5
Extensió del fitxer HTML: .html, .htm
XHTML: .xhtml, .xht, .xml
MIME HTML: text/html
XHTML: application/xhtml+xml, application/xml
Codi tipus TEXT
Uniform Type Identifier public.html
Desenvolupador: W3C HTML WG, WHATWG
Tipus de format: Markup language
Estàndard

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 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 | modifica el codi]

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[modifica | modifica el codi]

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 | modifica el codi]

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
<acronym>
Etiqueta eliminada
<address>
Estàndard o cap
<applet>
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
<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
<captin>
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 | 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
<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 | type | width
Nova etiqueta
<fieldset>
Estàndard o cap
<figure>
Atributs globals
Nova etiqueta
<font>
Etiqueta eliminada
<footer>
Atributs globals
Nova etiqueta
<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
<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
<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
<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
<noframes>
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
<s>
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
<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
<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 | poster | autbuffer | autplay | loop | controls | width | height
Nova etiqueta
<xmp>
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 | modifica el codi]

  • 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 | modifica el codi]

  • 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 | modifica el codi]

  • 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[modifica | modifica el codi]

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">
 El teu navegador no suporta l'etiqueta d'audio a HTML5.
 </audio>
 </body>
</html>

Referències[modifica | modifica el codi]

  1. W3C. «HTML 5» (en anglès). Ian Hickson y David Hyatt, 6 de octubre de 2009. [Consulta: 6 d'octubre de 2009].

Enllaços externs[modifica | modifica el codi]

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