Emilio Orts López

HOME -> MÁS INFORMACIÓN -> PROGRAMACIÓN -> HTML5

HTML5

HTML5

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML.
HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML.1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
Todavía se encuentra en modo experimental, lo cual indica la misma W3C, aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas. Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.

Nuevos elementos

HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D en los navegadores más importantes (Mozilla, Chrome, Opera, Safari e IE).
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por Hojas de estilo en cascada. También hay un renovado énfasis en la importancia del scripting DOM para el comportamiento de la web. 2.0.

Novedades

  • Incorpora etiquetas (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4 AVC).
  • Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.
  • Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.
  • Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.
  • Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Etiquetas HTML5

Todos los elementos del estandar HTML5 se listan a continuación agrupados por su función:

Elemento raíz

Elemento Descripción
<html> Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

Metadatos del documento

Elemento Descripción
<head> Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title> Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
<base> Define la URL base para las URLs relativas en la página.
<link> Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
<meta> Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<style> Etiqueta de estilo usada para escribir CSS en línea.

Scripting

Elemento Descripción
<script> Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
<noscript> Define una contenido alternativo a mostrar cuando el navegador no soporta scripting.

Secciones

Elemento Descripción
<body>
Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
<section> Define una sección en un documento.
<nav> Define una sección que solamente contiene enlaces de navegación
<article> Define contenido autónomo que podría existir independientemente del resto del contenido.
<aside> Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
<header> Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<footer> Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
<address> Define una sección que contiene información de contacto.
<main> Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.

Agrupación de Contenido

Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.
<hr> Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
<pre> Indica que su contenido esta preformateado y que este formato debe ser preservado.
<blockquote> Representa una contenido citado desde otra fuente.
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista ennumerada.
<dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt> Representa un término definido por el siguiente <dd>.
<dd> Representa la definición de los terminos listados antes que él.
<figure> Representa una figura ilustrada como parte  del documento.
<figcaption> Representa la leyenda de una figura.
<div> Representa un contenedor genérico sin ningún significado especial.

Semántica a nivel de Texto

Elemento Descripción
<a> Representa un hiperenlace , enlazando a otro recurso.
<em> Representa un texto enfatizado, como un acento de intensidad.
<strong> Representa un texto especialmente  importante .
<small> Representa un  comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
<s> Representa contenido que ya  no es exacto o relevante .
<cite> Representa el  título de una obra .
<q> Representa una  cita textual  inline.
<dfn> Representa un término cuya  definición  está contenida en su contenido ancestro más próximo.
<abbr> Representa una  abreviación  o un  acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
<data> Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la  WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
<time> Representa un valor de fecha hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
<code> Representa un código de  ordenador .
<var> Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa .
<samp> Representa la salida de un programa o un ordenador.
><kbd> Representa la entrada de usuario o usuaria, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario o usuaria, como comandos de voz transcritos.
<sub>,<sup> Representan un subíndice y un superíndice, respectivamente.
<i> Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
<b> Representa un texto hacia el cual se llama la atención para  propósitos utilitaros.  No confiere ninguna importancia adicional y no implica una voz alterna.
<u> Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.
<mark> Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
<ruby>

Representa contenidos a ser marcados con anotaciones ruby,  recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.

<rt> Representa el  texto de una anotación ruby .
<rp> Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
<bdi> Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<bdo> Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
<span> Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
<br> Representa un salto de línea.
<wbr> Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.

Ediciones

Elemento Descripción
<ins> Define una adición en el documento.
<del> Define una remoción del documento.

Contenido incrustado

Elemento Descripción
<img> Representa una imagen.
<iframe> Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
<embed> Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
<object> Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un  plugin.
<param> Define parámetros para el uso por los plugins invocados por los elementos <object>.
<video> Representa un  video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos. 
<audio> Representa un sonidostream de audio.
<source> Permite a autores o autoras especificar recursos multimedia alternativos para los elementos multimedia como  <video> o <audio>.
<track> Permite a autores o autoras especificar una pista de texto temporizado para elementos multimedia como <video>   <audio>.
<canvas> Representa un  área de mapa de bits  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
<map> En conjunto con <area>, define un mapa de imagen.
<area> En conjunto con  <map>, define un mapa de imagen.
<svg> Define una imagen vectorial embebida.
<math> Define una fórmula matemática.

Datos tabulares

Elemento Descripción
<table> Representa datos con más de una dimensión.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody> Representa el bloque de filas que describen los  datos contretos  de una tabla.
<thead> Representa el bloque de filas que describen las etiquetas de columna de una tabla.
<tfoot> Representa los bloques de filas que describen los  resúmenes de columna  de una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th>

Representa una celda encabezado en una tabla. 

Formularios

Elemento Descripción
<form> Representa un formulario, consistendo de controles que puede ser enviado a un servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de formulario.
<input> Representa un campo de datos escrito que permite al usuario o usuaria editar los datos.
<button> Representa un  botón .
<select> Represents un control que permite la selección entre un conjunto de opciones.
<datalist> Representa un conjunto de opciones predefiniddas para otros controles.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
<option> Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
<textarea> Representa un control de edición de texto multi-línea.
<keygen> Representa un control de par generador de llaves.
<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de una tarea.
<meter> Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.

Elementos interactivos

Elemento Descripción
<details> Representa un widget desde el que un usuario o usuaria puede obtener información o controles adicionales.
<summary> Representa un resumen, títuloleyenda para un elemento  <details> dado.
<<command> Representa un comando que un usuario o usuaria puede invocar.
<menu> Representa una lista de comandos .

EJEMPLOS PRACTICOS

Código HTML5 para reproducir audio sin la necesidad de plugins.
Para vídeo es algo similar.

<!DOCTYPE HTML>
<html>
  <head>
    <title>fuente de múltiples elementos</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>
                        


Ejemplo de Consulta SQL a una Base de Datos en el Navegador.

  // CREAR BBDD
function prepareDatabase(ready, error) {

  return openDatabase('documents', '1.0', 'Offline document  
      storage', 5*1024*1024, function (db) {
      db.changeVersion('', '1.0', function (t) {
        t.executeSql('CREATE TABLE docids (id, name)');
    }, error);
  });

}

// CONSULTAR BBDD
function showDocCount(db, span) {
  db.readTransaction(function (t) {
    t.executeSql('SELECT COUNT(*) AS c FROM docids', [], function (t, r) {
      span.textContent = r.rows[0].c;
    }, function (t, e) {
      // couldn't read database
      span.textContent = '(unknown: ' + e.message + ')';
    });
  });
}


prepareDatabase(function(db) {
  // got database
  var span = document.getElementById('doc-count');
  showDocCount(db, span);
}, function (e) {
  // error getting database
  alert(e.message);
});

// Ejemplo de SELECT con parámetros

db.readTransaction(function (t) {
  t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) {
    report(data.rows[0].title, data.rows[0].author);
  });
});
                            


Ejemplo de WebWorker (Hilo de ejecución en paralelo)
Es necesario el uso de javascript.

// Prueba.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>

// worker.js (fichero con la tarea del nuevo hilo de ejecución infinito)

var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
                                }
                            


Ejemplo de Canvas 2D utilizando el API de dibujo

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas example</title>
    <script>
      function drawPicture(){

        // Primero se recupera el objeto canvas a modificar
        var canvas = document.getElementById('example');

        // Luego se le indicar la forma de trabajar 2D o 3D 
        var context = canvas.getContext('2d');

        // Se comienza a dibujar en el lienzo utilizando objetos  
        // gráficos

        context.fillStyle = "rgb(0,255,0)";
        context.fillRect (25, 25, 100, 100);

        context.fillStyle = "rgba(255,0,0, 0.6)";
        context.beginPath();
        context.arc(125,100,50,0,Math.PI*2,true);
        context.fill();

        context.fillStyle = "rgba(0,0,255,0.6)";
        context.beginPath();
        context.moveTo(125,100);
        context.lineTo(175,50);
        context.lineTo(225,150);
        context.fill();

      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
  </head>
  <body onload="drawPicture();">

    <canvas id="example" width="260" height="200">
    There is supposed to be an example drawing here, but it's not important.
    </canvas>

  </body>
</html>
                            


Ejemplo de un formulario con nuevos tipos de datos.
Elimina muchas validaciones en Javascript. (La clave está en el atributo Type).

<!DOCTYPE HTML>
<html>
  <body>
  <form>

    <input name="form_number" id="form_number" type="number" min="1" max="10" >
    <input name="form_date" id="form_date" type="date">  
    <input name="form_month" id="form_month" type="month">  
    <input name="form_week" id="form_week" type="week">  
    <input name="form_time" id="form_time" type="time">  
    <input name="form_url" id="form_url" type="url" list="url_list">  
    <datalist id="url_list">  
        <option value="http://www.google.com" label="Google">  
        <option value="http://net.tutsplus.com" label="NetTuts+">  
    </datalist>  
    <input name="form_email" id="form_email" type="email" list="email_list" multiple>  
    <datalist id="email_list">  
       <option value="jane.doe@test.com" label="Jane Doe">  
       <option value="john.doe@test.com" label="John Doe">  
    </datalist>  
    <input name="form_telephone" id="form_telephone" type="tel">  
    <input name="form_color" id="form_color" type="color">  
    <label>
        Attachments: 
        <input type="file" multiple name="att">
    </label>
    <input name="x" type="range" min="100" max="700" step="9.09090909" value="509.090909">

  </form>
  </body>
</html>
                            


Ejemplo de geoposicionamiento.

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>
                            

2017 © eorts.com