Introducción a HTML5 - Aprender HTML

HTML5 no es solo una nueva versión de HTML enriquecida con nuevos elementos y atributos, sino un conjunto de tecnologías para crear sitios web y aplicaciones más potentes y versátiles que soportan multimedia e interactúan con interfaces de software, entre otras cosas.

Esta página explica qué cambió en HTML5 respecto a HTML4, los nuevos elementos semánticos, los nuevos tipos de entrada de formularios, las nuevas APIs de JavaScript y cómo insertar audio y video nativos. Si eres completamente nuevo en el marcado, comienza primero por la introducción a HTML.

HTML5 frente al Estándar de HTML Viviente

HTML5 fue publicado como Recomendación estable del W3C en 2014. Desde entonces, el lenguaje no ha quedado congelado en versiones numeradas. Actualmente es mantenido por el WHATWG como el HTML Living Standard — una especificación única que se actualiza de forma continua en lugar de publicarse como "HTML6". En el uso cotidiano, "HTML5" simplemente significa HTML moderno: el estándar que implementa tu navegador hoy.

Beneficios de HTML5

Los principales beneficios de HTML5 se enumeran a continuación:

Es compatible con todos los navegadores actuales, tanto en escritorio como en móvil, y lo ha sido durante más de una década.
Es más amigable con los dispositivos y más fácil de escribir gracias a una declaración <!DOCTYPE html> y <meta charset="UTF-8"> mucho más simples.
Funciona en estrecha colaboración con CSS y JavaScript para crear sitios atractivos e interactivos.
Admite SVG (Scalable Vector Graphics) y <canvas> para gráficos. En versiones anteriores, los gráficos vectoriales requerían complementos como Flash o VML.
El marcado se vuelve más limpio al reemplazar los contenedores genéricos <div> con elementos semánticos, que estructuran mejor la página y mejoran la legibilidad y la accesibilidad.
Expone la ubicación del usuario a través de la API de Geolocalización.
Reproduce multimedia (audio, video) directamente en el navegador mediante los elementos nativos <audio> y <video>, sin complementos adicionales. Consulta multimedia en HTML.
Introduce Web Storage, para que las aplicaciones puedan almacenar datos localmente y conservarlos incluso después de cerrar y volver a abrir el navegador.

Qué cambió de HTML4 a HTML5

Eliminado y obsoleto en HTML5

Varias funciones de presentación de HTML4 fueron eliminadas porque el estilo corresponde a CSS. Los siguientes elementos están obsoletos y no deben usarse:

Elementos de presentación como <font>, <center>, <big>, <strike> y el antiguo rol de estilo de <u>.
El modelo de marcos: <frameset>, <frame> y <noframes> (usa <iframe> cuando realmente se necesite incrustar contenido).
Atributos de presentación como align, bgcolor, border en tablas, y cellpadding/cellspacing — sustitúyelos por CSS.

Añadido en HTML5

Elementos semánticos — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> y más.
Multimedia nativa — los elementos <audio> y <video>.
Nuevos tipos de entrada de formularios y atributos — email, date, range y otros.
Gráficos — el elemento <canvas> para dibujo 2D y <svg> en línea.
APIs de JavaScript — Web Storage, Geolocalización, Web Workers, WebSockets y más (ver a continuación).

Nuevos elementos semánticos

En lugar de marcar cada región de una página con un <div> genérico, HTML5 proporciona elementos que describen el papel del contenido. Esto ayuda a los motores de búsqueda, los lectores de pantalla y otros desarrolladores a comprender la estructura de la página.

Elemento	Propósito
`<header>`	Contenido introductorio o un grupo de enlaces de navegación
`<nav>`	Un bloque de enlaces de navegación principales
`<main>`	El contenido predominante del documento
`<article>`	Una pieza de contenido independiente y distribuible por sí sola
`<section>`	Una agrupación temática de contenido, generalmente con un encabezado
`<aside>`	Contenido tangencialmente relacionado con el contenido circundante, como una barra lateral
`<footer>`	Pie de página de su sección más cercana o de la página
`<figure>` / `<figcaption>`	Contenido multimedia independiente con una leyenda opcional

Para un recorrido completo con ejemplos, lee Elementos semánticos en HTML5.

Nuevos tipos de entrada de formularios y atributos

HTML5 añadió tipos de entrada que ofrecen a los usuarios controles diseñados para un propósito específico (selectores de fecha, controles deslizantes, ruedas de color) y permiten que el navegador valide la entrada automáticamente. Los tipos más comunes incluyen email, url, tel, search, number, range, date y color.

Los nuevos atributos como placeholder, required, autofocus y pattern reducen la cantidad de JavaScript que necesitas para sugerencias y validación.

<form>
  <label>Email: <input type="email" placeholder="[email protected]" required></label>
  <label>Birthday: <input type="date"></label>
  <label>Volume: <input type="range" min="0" max="100"></label>
  <label>Quantity: <input type="number" min="1" max="10"></label>
  <label>Favorite color: <input type="color"></label>
  <label>Website: <input type="url" autofocus></label>
  <button type="submit">Submit</button>
</form>

Obtén más información en la página de la etiqueta <input>.

Nuevas APIs de JavaScript

HTML5 también estandarizó un conjunto de APIs del navegador que convirtieron las páginas web en aplicaciones completas:

Canvas 2D — dibuja gráficos, tablas y juegos píxel a píxel en el elemento <canvas>.
Web Storage — localStorage y sessionStorage mantienen datos clave/valor en el navegador entre visitas.
Geolocalización — solicita al usuario su posición geográfica.
Web Workers — ejecuta scripts en un hilo de fondo para que la interfaz de usuario siga siendo responsive.
WebSockets — abre una conexión persistente y bidireccional a un servidor para datos en tiempo real.
History API — cambia la URL y el historial de navegación sin una recarga completa de la página.

Audio y video nativos

Los elementos <audio> y <video> reproducen multimedia directamente, sin complementos. Usa el atributo controls para mostrar la interfaz de reproducción del navegador, proporciona uno o más elementos <source> para que el navegador pueda elegir el formato compatible, y añade texto alternativo para navegadores muy antiguos.

<!DOCTYPE html>
<html>
  <head>
    <title>Native audio and video</title>
  </head>
  <body>
    <video width="320" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>

    <audio controls>
      <source src="sound.mp3" type="audio/mpeg">
      <source src="sound.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Consulta multimedia en HTML para una visión más profunda sobre formatos y atributos.

Modelos de contenido de HTML5

En HTML5, el contenido de una página web puede dividirse en grupos semánticos que describen su contenido. Estos grupos se denominan modelos de contenido. Cada uno de estos modelos describe el tipo de elementos que contiene. El modelo de contenido puede incluir texto y elementos hijos. Un elemento puede pertenecer a una o más categorías de contenido.

Los modelos de contenido de HTML5 son los siguientes:

Contenido de metadatos
Contenido de flujo
Contenido de seccionamiento
Contenido de encabezado
Contenido de fraseo
Contenido incrustado
Contenido interactivo
Contenido palpable

Los modelos de contenido pueden solaparse, lo que significa que los elementos pertenecen a varias categorías al mismo tiempo. Por ejemplo, el contenido de seccionamiento, encabezado, fraseo, incrustado, interactivo y algunos metadatos se refieren al contenido de flujo. Los metadatos y el contenido interactivo en ciertos casos pueden referirse al contenido de fraseo.

También existen elementos que se utilizan para propósitos específicos, por ejemplo, para definir formularios. Este tipo de elementos no se refieren a ninguno de los modelos de contenido mencionados anteriormente.

Contenido de metadatos

Los elementos pertenecientes a la categoría de contenido de metadatos contienen información sobre los documentos HTML, establecen enlaces a otros recursos, definen la presentación o el comportamiento del documento. Estos elementos no se muestran en la página web.

Los elementos de esta categoría incluyen: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> y <title>.

Ejemplo de elementos pertenecientes al contenido de metadatos:

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

Contenido de flujo

Los elementos pertenecientes a la categoría de contenido de flujo son típicamente aquellos utilizados en el cuerpo de un documento HTML (incluidos dentro de las etiquetas <body>).

Los elementos de esta categoría incluyen: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.

Ejemplo de elementos pertenecientes al contenido de flujo:

Ejemplo de elementos pertenecientes a la categoría de contenido de flujo

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
    <hr/>
    <div>
      <p>
        Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
      </p>
      <hr/>
      <ol type="A">
        <li>Coca-Cola</li>
        <li>Ice Tea</li>
        <li>Fanta</li>
      </ol>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Los siguientes elementos pertenecen al contenido de flujo, pero solo si se cumple una condición específica:

<area>, solo dentro de <map>,
<link>, solo si se especifica el atributo itemprop,
<meta>, solo si se especifica el atributo itemprop.

Contenido de seccionamiento

Los elementos pertenecientes al contenido de seccionamiento son aquellos que crean secciones independientes en la estructura de un documento HTML (por ejemplo, encabezado, pie de página, etc.). Cabe destacar que cada sección puede tener su propio encabezado y esquema.

Los elementos del modelo de contenido de seccionamiento son: <article>, <aside>, <nav> y <section>.

Ejemplo de elementos pertenecientes al contenido de seccionamiento:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Article about flower</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
    </section>
  </body>
</html>

Pruébalo tú mismo »

Contenido de encabezado

Los elementos pertenecientes al modelo de contenido de seccionamiento crean una sección en el esquema actual que define el alcance de los elementos <header>, los elementos <footer> y el contenido de encabezado.

Los elementos del contenido de encabezado son: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> y <hgroup>.

Ejemplo de elementos pertenecientes al contenido de encabezado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
      <h3>Some text or subtitle.</h3>
    </hgroup>
  </body>
</html>

Pruébalo tú mismo »

Contenido de fraseo

Los elementos pertenecientes al contenido de fraseo definen y marcan el texto. Son: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> y <wbr>.

Ejemplo de elementos pertenecientes al contenido de fraseo:

Ejemplo de elementos pertenecientes al contenido de fraseo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example with HTML tags</h1>
    <p>
      Here is some text <sub> with the sup tag</sub>.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
    <p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
    <p>We’ve used &lt;strong&gt; tag to highlight <strong> this important part of the text</strong>.</p>
    <p>The important part of the text is highlighted by the <em> in italic</em>.</p>
  </body>
</html>

Pruébalo tú mismo »

Los siguientes elementos pertenecen al contenido de fraseo, pero solo si se cumple una condición específica:

<a>, si contiene solo contenido de fraseo,
<area> solo dentro del elemento <map>,
<del>, si contiene solo contenido de fraseo,
<ins>, si contiene solo contenido de fraseo,
<link> si se especifica el atributo itemprop,
<map>, si contiene solo contenido de fraseo,
<meta> si se especifica el atributo itemprop.

Contenido incrustado

El contenido incrustado importa otro recurso o inserta contenido de otro lenguaje de marcado o espacio de nombres en el documento. Este modelo de contenido incluye los siguientes elementos: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg> y <video>.

Ejemplos de elementos pertenecientes al contenido incrustado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Examples of the HTML elements:</h1>
    <h2>Example of the HTML&lt;canvas&gt; tag:</h2>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      var canvas = document.getElementById('canvasExample');
      var context = canvas.getContext('2d');
       context.font = '30pt Calibri';
       context.fillStyle = '#1c87c9';
       context.fillText('Canvas Example !', 50, 100);
    </script>
    <h2>Example of the HTML&lt;img&gt; tag:</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Example of the HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br />
  </body>
</html>

Pruébalo tú mismo »

Contenido interactivo

El modelo de contenido interactivo incluye elementos diseñados específicamente para la interacción del usuario. Son: <a> (si se especifica el atributo href), <button>, <details>, <embed>, <iframe>, <label>, <select> y <textarea>.

Ejemplo de elementos pertenecientes al contenido interactivo:

Ejemplo de contenido interactivo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of Interactive content</h1>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
      <br /><br />
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
      <br />
      <button type="button">Send</button>
    </form>
  </body>
</html>

Pruébalo tú mismo »

Los siguientes elementos pertenecen al modelo de contenido interactivo, pero solo si se cumple una condición específica:

<audio>, si se especifica el atributo controls,
<img>, si se especifica el atributo usemap,
<input>, si el atributo type no es hidden,
<object>, si se especifica el atributo usemap,
<video>, si se especifica el atributo controls.

Contenido palpable

El contenido es palpable cuando no está vacío ni oculto; es el contenido que se renderiza y es sustancial. Los elementos cuyo modelo es contenido de flujo o contenido de fraseo deben tener al menos un nodo palpable, y ese nodo no debe tener un atributo hidden.

Esta no es una condición obligatoria; hay casos en que el elemento puede estar vacío. Por ejemplo, puede llenarse después de que se ejecute un script externo.

Las categorías de contenido secundarias

Las categorías de contenido secundarias son aquellas que admiten scripts. Los elementos que soportan scripts no contribuyen directamente a la salida renderizada de un documento, sino que apoyan los scripts, ya sea conteniendo o especificando código de script directamente, o especificando datos que serán utilizados por los scripts. Los elementos que soportan scripts son <script> y <template>. Los elementos <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> y <td> se denominan raíces de seccionamiento. Los elementos pertenecientes al modelo de contenido transparente son <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> y <video>. Estos elementos heredan el tipo del elemento padre y pueden contener el contenido permitido en su elemento padre.

Práctica

¿Qué elemento se introdujo en HTML5 para reproducir multimedia sin un complemento?

El elemento video con un atributo controls e hijos sourceEl elemento fontEl elemento framesetEl elemento center

Práctica

¿Qué DOCTYPE declara un documento HTML5?

DOCTYPE htmlDOCTYPE HTML PUBLIC con una URL DTD largaDOCTYPE html5No se necesita DOCTYPE en HTML5