Introducción a HTML5
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 diversos que admiten multimedia e interactúan con interfaces de software, etc.
Beneficios de HTML5
A continuación se enumeran los principales beneficios de HTML5:
- HTML5 es compatible con todos los navegadores modernos.
- HTML5 es más amigable con los dispositivos. Es fácil de usar.
- HTML5 puede ayudar a crear sitios web atractivos con CSS, JavaScript, etc.
- HTML5 admite SVG (Scalable Vector Graphics - Wikipedia) y otros gráficos vectoriales. En versiones anteriores, el uso de gráficos vectoriales solo era posible en combinación con tecnologías como Flash, VML, etc.
- El código se vuelve más limpio principalmente gracias a reemplazar las etiquetas div con Elementos semánticos, que ayudan a estructurar mejor el contenido de la página web y mejoran la legibilidad.
- HTML5 admite geolocalización, lo que hace posible determinar la ubicación de los usuarios.
- Los nuevos estándares se especificaron para reproducir multimedia (animación, audio, video) directamente en el navegador sin tener que instalar complementos adicionales.
- La compatibilidad con el almacenamiento web introducida en HTML5 hace posible almacenar grandes cantidades de datos de la aplicación localmente, sin afectar el rendimiento de su aplicación web. Los datos en el almacenamiento local persistirán incluso cuando el navegador del usuario se cierre y se vuelva a abrir.
Desventajas de HTML5:
- No es compatible con navegadores antiguos.
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 llaman modelos de contenido. Cada uno de estos modelos describe el tipo de elementos que contiene. El modelo de contenido puede contener texto y elementos secundarios. El elemento puede pertenecer a una o más categorías de contenido.
Los modelos de contenido de HTML5 se enumeran a continuación:
- 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 superponerse, y eso significa que los elementos pertenecen a varias categorías al mismo tiempo. Por ejemplo, el contenido de seccionamiento, encabezado, fraseo, incrustado, interactivo y parte del contenido de metadatos se refieren al contenido de flujo. El contenido de metadatos e interactivo en ciertos casos puede referirse al contenido de fraseo.
También hay elementos que se utilizan para fines específicos, por ejemplo, para definir formularios. Este tipo de elementos no se refiere a ninguno de los modelos de contenido mencionados anteriormente.
Contenido de metadatos
Los elementos que pertenecen a la categoría de contenido de metadatos contienen información sobre documentos HTML, establecen enlaces a otros recursos, definen su presentación o comportamiento. 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 que pertenecen al contenido de metadatos:
Ejemplo de elementos que pertenecen 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 que pertenecen a la categoría de contenido de flujo suelen ser los que se usan en el cuerpo de un documento HTML (encerrados 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 que pertenecen al contenido de flujo:
Ejemplo de elementos que pertenecen 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>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,<style>, solo si se especifica el atributo scoped.
Contenido de seccionamiento
Los elementos que pertenecen al contenido de seccionamiento son aquellos que crean secciones independientes en la estructura de un documento HTML (por ejemplo, header, footer, etc.). Tenga en cuenta 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 que pertenecen al contenido de seccionamiento:
Ejemplo de elementos que pertenecen 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>Contenido de encabezado
Los elementos que pertenecen 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 que pertenecen al contenido de encabezado:
Ejemplo de elementos que pertenecen 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>Contenido de fraseo
Los elementos que pertenecen 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 que pertenecen al contenido de fraseo:
Ejemplo de elementos que pertenecen 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 <strong> 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>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 que pertenecen al contenido incrustado:
Ejemplos de elementos que pertenecen 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<canvas> 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<img> tag:</h2>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
<h2>Example of the HTML<svg> tag:</h2>
<svg width="350" height="150">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
</svg>
<br />
</body>
</html>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 que pertenecen 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>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,<menu>, si el valor del atributo type es “toolbar”,<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; este es el contenido que se renderiza y tiene sustancia. 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 los que el elemento puede estar vacío. Por ejemplo, puede completarse después de ejecutar un script externo.
Las categorías secundarias de contenido
Las categorías secundarias de contenido son aquellas que admiten scripts. Los elementos que admiten scripts no contribuyen directamente al resultado renderizado de un documento, pero admiten scripts, ya sea conteniendo o especificando directamente código de script, o especificando datos que serán utilizados por scripts. Los elementos que admiten scripts son <script> y <template>. Los elementos <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> y <td> se llaman raíces de seccionamiento. Los elementos que pertenecen 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 contenido permitido en su elemento padre.
Practice
What are some of the new elements introduced in HTML5?