Etiquetas HTML 5

En este artículo te enumeraré las etiquetas HTML5

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 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2