Etiquetas HTML 5

Hoy es un día de Navidad atípico, con muchas restricciones debido a la pandemia mundial por COVID-19.

Sin más dilación, vamos al turrón:

a; Enlace a una URL. Tiene un parámetro href para poder pasar la URL.
```
<a href="codingpotions.com">Coding Potions</a>
```
abbr; Abreviación, suele incluir un parámtro title para incluir toda la descripción.
```
<abbr title="Hypertext Markup Language">HTML</abbr>
```

address; Información de contacto.

<address>Visítanos en calle de ejemplo, 10, Sevilla (España)</adress>

area; Indica un área interactiva dentro de un mapa.

<map name="workmap"><area shape="rect" coords="34,44,270,350" alt="Computer"></area></map>

article; Indica una sección independiente que puede existir en cualquer contexto. Dentro puede tener header, footer, etc.
```
<article><header><h2>Artículo 1</h2></header><p>Descripción</p></article>
```
aside; Sección del contenido relaccionada al contenido principal. Normalmente se usa para definir sidebars o barras de navegación laterales.
audio; Sirve para meter una fuente de audio que provenga de una URL. La URL se pasa mediente una etiqueta src.
```
<audio src="ejemplo.mp3" controls></audio>
```
b; Convierte un texto en negrita.
```
Hello <b>World</b>
```
bdi; Aisla una parte del texto para poder voltearlo. Se suele usar cuando se inserta una palabra en un lenguaje que se lee de derecha a izquerda dentro de una frase que se lee al revés.
```
Hello <bdi>World</bdi>
```
bdo; Igual que el tag HTML bdi solo que en lugar de asilar para poder decidir cómo tratar cada parte, direcamente se da la vuelta
```
Hello <bdo>World</bd0>
```

blockquote; Define una cita a la que puedes asignar una fuente pasando una URL.

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">Be less curious about people and more curious about ideas.</blockquote>

body; Contenido de toda la web. Solo puede haber in body en la web y tiene que ser el padre de las demás etiquetas.
```
<html><head></head><body></body></html>
```
br; Salto de línea dentro del texto
```
<br>Salto de línea</br>
```
button; Botón clickable en la web
```
<button>Botón</button>
```
canvas; Lienzo en la web para poder pintar gráficos avanzados
```
<canvas>Contenido para navegadores no soportados</canvas>
```

caption; Define el título de una tabla

<table><caption>Título de la tabla</caption></table>

cite; Indica la fuente de un contenido creativo que no pertenece a la web
```
Fuente: <cite>codingpotions.com</cite>
```
code; Para meter código de cualquier lenguaje de programación
```
<code>npm install</code>
```
col; Para definir columnas dentro de las tablas. Esta etiqueta va dentro de la etiqueta colgroup. Útil para aplicar estilos a columnas.
```
<table><col style="background-color: red;"><tr><td>1</td><td>2</td></tr></table>
```

colgroup; Elemento padre de la etiqueta col. Define el conjunto de columnas de las tablas

<table><colgroup><col style="background-color: red;"></colgroup><tr><td>1</td><td>2</td></tr></table>

data; Muestra un valor técnico o númerico en contenido entendible por las personas
```
data value="21053">Cherry Tomato</data>
```

datalist; Define las posibles opciones para el autocompletado de las etiquetas input

<input list="countries" placeholder="Type a country"><datalist id="countries"><option value="Argentina"></datalist>

dd; Descripción de cada item dentro de una lista de definiciones dl
```
<dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>
```
del; Indica que cierto texto ha sido borrado de la web. Los navegadores lo mostrará tachado.
```
Hello <del>world!</del>
```

details; Define un contenido que puede ser ampliado haciendo click sobre el elemento.

<details><summary>Leer más</summary><p>Este contenido solo se muestra si ha sido ampliado por el usuario</p></details>

dfn; Especifica que un contenido va a ser explicado o aclarado dentro del propio contenido más adelante
```
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>
```
div; La etiqueta más común de todas las webs. Bloque genérico de contenido.
```
<div>Contenido</div>
```
dl; La etiqueta padre de las listas de definiciones. Dentro contiene las etiquetas dt y dd
```
<dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>
```
dt; Cada término a definir dentro de las listas de definiciones dl
```
<dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>
```
em; Para enfatizar un texto. Usualmente los navegadores lo renderizan como texto en cursiva.
```
Hello <em>world!</em>
```

embed; Contendio de otra url embebido en la web

<embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480">

fieldset; Para separar grupo de controles dentro de los formularios
```
<form><fieldset><input type="email></fieldset></form>
```

figcaption; Para definir partes dentro de una etiqueta figure

<figure><img src="/images/html-reference-logo.png" alt="HTML Reference logo"><figcaption>The HTML Reference logo</figcaption></figure>

figure; Para definir elementos auto-contenidos, usualmente imágenes o figuras

<figure><img src="/images/html-reference-logo.png" alt="HTML Reference logo"></figure>

footer; Define el pie de página de un elemento o contenido
```
<footer>Pie de página</footer>
```

form; Para definir formularios con controles

<form><fieldset><input type="email></fieldset></form>

h1; Encabezado de primer nivel, usualmente solo hay uno por página
```
<h1>Encabezado H1</h1>
```
h2; Encabezado de segundo nivel.
h3; Encabezado de tercer nivel
h4; Encabezado de cuarto nivel
h5; Encabezado de quinto nivel
h6; Encabezado de sexto nivel
header; Define el header de una página o de una sección
```
<header>Contenido del header</header>
```
hr; Suele representarse como una línea horizontal para separar el contenido
```
<hr>
```
i; Covierte un texto en cursiva
```
Texto en <i>cursiva</i>
```
iframe; Sirve para insertar una página web completa dentro de otra. Normalmente se usa para insertar vídeos
```
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
```

img; Para insertar imágenes dentro de la web

<img src="example.jpg" alt="Descripción de la imagen" width="500" height="600">

input; Define un cuadro de texto para que los usuarios puedan escribir
```
<input type="text">
```

ins; Define texto insertado desde otra fuente

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

kbd; Define una combinación de teclado a mostrar al usuario
```
Pulsa <kbd>Cmd</kbd>
```

label; Define el título de un control dentro de un formulario

<label for="#example">Label text</label><input type="text" id="example">

legend; Define la leyenda para un elemento fieldset

<fieldset><legend>Información Personal</legend><label for="nombre">Nombre:</label></fieldset>

li; Define cada item de una lista ul o ol
```
<ul><li>Item</li></ul>
```
main; Contenido principal de la web
```
<main>Main content</main>
```

map; Para definir un mapa con imagen y elementos clickables

<map name="workmap"><area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"><area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm

mark; Define un texto resaltado
```
Texto <mark>resaltado</mark>
```
meter; Define un medidor horizontal
```
<meter value="0.7">Progress</meter>
```
nav; Para definir la navegación de la web
```
<nav><a href="/">Homepaghe</a></nav>
```
object; Define un contenedor para un objeto externo a la web
```
<object data="video.mp4" width="400" height="300"></object>
```

optgroup; Define un conjunto de opciones. Dentro tiene etiquetas

<select><optgroup label="South America"><option>Uruguay</option><option>Brazil</option><option>Argentina</option></optgroup>

option; Cada una de las opciones a escoger por el usuario dentro de los

<select name="country"><option value="Argentina">Argentina</option><option value="Bolivia">Bolivia</option>

output; El resultado de una operación matemática realizada por el usuario

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><input type="range" id="a" value="50">+<input type="number" id="b" value="25">=<output name="x" for="a b

p; Para definir párrafos
```
<p>Párrafos</p>
```
pre; Sirve para preservar el formato del texto contenido. Se suele incluir junto a las etiqueta code
```
<div class="terminal">
        <pre>Párrafos</pre>
      </div>
```

progress; Define una barra de progreso

<progress value="0.7">Progress</progress>

q; Define una cita corta

He looks around and says <q cite="https://en.wikiquote.org/wiki/The_Terminator">I ll be back</q>.

s; Define texto tachado
```
Texto <s>tachado</s>
```
section; Define una sección de contenido dentro de una página
```
<section>Sección 1</section>
```
select; Define un dropdown para que el usuario pueda seleccionar un item. Cada una de las opciones se define con option
small; Define contenido menos importate. Usualmente representado como elementos más pequeños
```
Texto <small>menos inportante</small>
```

source; Define la fuente del contenido de laas imágenes, vídeos y audios

<video controls width="250" height="200" muted> <source src="/media/examples/flower.webm" type="video/webm"> <source src="/media/examples/flower.mp4" type="video/mp4>

span; No representa ningún contenido semántico, igual que los divs pero inline
```
<span>Contenido</span>
```
strong; Representa un elemento dentro del contenido que es muy importante
```
<strong>Contenido importante</strong>
```
sub; Subíndices
```
CO<sub>2</sub>
```

summary; Define el título del elemento details. Es el que se muestra antes de que el usuario lo expanda

<details><summary>Read more</summary><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p></details>

sup; Superíndices

The "power of two" is 2<sup>n</sup> where n is an integer.

table; Tablas

<table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhythm Guitar

tbody; Para definir el contenido principal dentro de las tablas
td; Cada una de las columnas de las tablas

textarea; Cuadro de texta multilínea para que los usuarios puedan escribir más contenido

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

tfoot; El footer de las tablas

<table><thead><tr><th>Name</th> <th>Instrument</th> </tr></thead><tfoot><tr><th>Name</th> <th>Instrument</th> </tr></tfoot><tbody><tr><td>John Lennon</td> <td>Rhythm Guitar

th; Define el header de cada una de las columnas de las tablas
theader; El header de toda la tabla. Contiene los th de cada una de las columnas

time; Define el tiempo en formato 24h

The game starts at <time datetime="2017-04-29T19:00">19:00</time>.

tr; Cada una de las filas de las tablas
u; Hace que un elemento se ponga subrayado
```
Hello <u>World</u>
```
var; Define una variable de una operación matemática
```
The value of <var>x</var> is 12.
```

video; Para meter un video o clip dentro de la página

<video src="/assets/HTML 5 Video.mp4" controls></video>

Hasta el siguiente artículo.

Hasta luego 🖖