Tabla de Elementos HTML

Elemento Descripción Código de Implementación Visualización en el Navegador
<p> Párrafo <p>Este es un párrafo.</p>

Este es un párrafo.
<a> Enlace <a href="https://www.ejemplo.com">Enlace de Ejemplo</a> Enlace de Ejemplo
<img> Imagen <img src="imagen.jpg" alt="Descripción de la imagen"> Descripción de la imagen
<h1> - <h6> Títulos <h1>Título Principal</h1>

Título Principal
<ul> Lista Desordenada <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>
  • Elemento 1
  • Elemento 2
  • Elemento 3
<ol> Lista Ordenada <ol> <li>Elemento A</li> <li>Elemento B</li> <li>Elemento C</li> </ol>
  1. Elemento A
  2. Elemento B
  3. Elemento C
<table> Tabla <table> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr> <tr> <td>Celda 1</td> <td>Celda 2</td> </tr> </table>
Encabezado 1 Encabezado 2
Celda 1 Celda 2
<div> División <div>Contenido del Div</div>
Contenido del Div
<form> Formulario <form action="/procesar" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> <input type="submit" value="Enviar"> </form>
<button> Boton button type="button">Haz clic button>

<span> Linea de texto <p>Este es un párrafo.</p>

Texto en rojo

<canvas> Lienzo <canvas>id="myCanvas"</canvas>

<iframe> Inserta un documento HTML externo <iframe>src="documento.html">

<progress> Progress <progress>progress value="50" max="100"> </progress>

<meter> Rango <meter>value="75" min="0" max="100"> </meter>

<datalist> Lista de opciones <input list="opciones">datalist id="opciones" option value="Opción 1" option value="Opción 2" </datalist>

<select> > Menu desplegable <select>option value="1" Opción 1 /option option value="2" Opción 2 /option</select>

<optgroup> Agrupa opciones relacionadas <select>optgroup label="Grupo 1" option value="1" Opción 1 /option option value="2" Opción 2 /option /optgroup </select>

<Audio> Reproduce audio <audio>src="audio.mp3" controls </audio>

<Video> Reproduce video <video>video src="video.mp4" controls </video>

<details> Elemento despegable <details>Summary Mostrar Más summary Contenido oculto </details>

Mostrar másContenido oculto
<figcaption> Titulo para un elemento <figcaption>img src="imagen.jpg" figcaption Título de la imagen /figcaption </figcaption>

Título de la imagen
<mark> Resalta texto <mark>resaltado </mark>

Texto de ejemplo resaltado
<abbr> Define a un acronimo <abbr>title="World Health Organization" WHO es una organización internacional </abbr>

WHO es una organización internacional.
<time> Fecha y hora- <time>datetime="2023-05-13">13 de mayo de 2023 </time>

<blockquote> Crea una cita <blockquote>Cita o texto citado </blockquote>

Cita o texto citado
<cite> Reproduce video <cite> Título de la obra </cite>

Título de la obra - Autor
<code> Muestra codigo <code>console.log('Hola, mundo!'); </code>

console.log('Hola, mundo!');

<bdi> Aisla una parte de texto <bdi>Añadiste bdi 1000/bdi nuevos seguidores. </bdi>

Añadiste 1000 nuevos seguidores.
<aside> Define un contenido relacionado <aside>h3 Publicidad /h3 p Anuncio publicitario /p </vidasideeo>

<main> Define contenido principal <main>h1 Título principal /h1 p Contenido principal /p </main>

Título principal

Contenido principal