HTML 5

De Viquipèdia
Jump to navigation Jump to search
Infotaula de format de fitxerHTML5
(HyperText Markup Language)
HTML5 logo and wordmark.svg
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
LocFDD fdd000481
PRONOM fmt/471
Lloc web https://www.w3.org/TR/html5/
Modifica dades a Wikidata

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]

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 5 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
<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]

  • 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 HTML 5[modifica]

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

Referències[modifica]

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

Enllaços externs[modifica]

A Wikimedia Commons hi ha contingut multimèdia relatiu a: HTML 5 Modifica l'enllaç a Wikidata