Etiquetas HTML 5
Publicado el 25.12.2020 a las 21:22
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 🖖
¿Te gusta mi contenido? Apóyame
Puede que te interesen los siguientes artículos 👇
