Está en la página 1de 4

Básicas

Etiqueta Uso Lista de atributos Ejemplo


<html>: Representa la raíz Define el documento como lang, xmlns. <html lang="en"></html>.
de un documento HTML. HTML.
<head>: Contiene metadatos Proporciona información No tiene atributos <head></head>.
y otros recursos para el sobre el documento. específicos.
documento
<nav>: Define un conjunto de Crea un menú de No tiene atributos <nav><ul><li><a
enlaces de navegación navegación. específicos. href="#">Inicio</a></li><li><a
href="#">Acerca</a></li></ul></nav>
<main>: Define el contenido Representa el contenido No tiene atributos <main></main>.
principal de un documento principal de la página web. específicos.
<footer>: Define un pie de Representa el pie de página No tiene atributos <footer>&copy; 2023 Todos los
página para un documento o de una página web. específicos. derechos reservados</footer>.
sección

De forma de texto
Etiqueta Uso Lista de atributos Ejemplo
<strong>: Define texto Resalta el texto como No tiene atributos específicos <strong>Texto importante</strong>.
importante importante.
<em>: Define énfasis en el Resalta el texto con énfasis. No tiene atributos <em>Texto enfatizado</em>.
texto. específicos.
<strike>: Define texto Muestra el texto tachado. No tiene atributos <strike>Texto tachado</strike>.
tachado. específicos.
<u>: Define texto subrayado Muestra el texto subrayado. No tiene atributos <u>Texto subrayado</u>.
específicos.
<p>: Define un párrafo de Agrupa texto en un párrafo. align. <p>Este es un párrafo de texto.</p>
texto.
De lista
Etiqueta Uso Lista de atributos Ejemplo
<ul>: Define una lista Crea una lista con viñetas. type, start. <ul><li>Elemento 1</li><li>Elemento
desordenada 2</li></ul>.
<ol>: Define una lista Crea una lista numerada type, start, reversed. <ol><li>Primer
ordenada elemento</li><li>Segundo
elemento</li></ol>.
<li>: Define un elemento de Representa un elemento value. <li>Elemento de lista</li>.
lista dentro de una lista.
<dl>: Define una lista de Crea una lista de términos y No tiene atributos <dl><dt>Término</dt><dd>Definición
definiciones sus definiciones. específicos. del término</dd></dl>.
<ol type="A">: Define una Crea una lista numerada con type. <ol type="A"><li>Elemento
lista ordenada con letras letras mayúsculas. A</li><li>Elemento B</li></ol>.
mayúsculas.

De imágenes y multimedia
Etiqueta Uso Lista de atributos Ejemplo
<img>: Define una imagen Inserta una imagen en la src, alt, width, height. <img src="imagen.jpg" alt="Descripción
página web. de la imagen">.
<video>: Define un video Inserta un video en la página src, controls, autoplay, loop, <video src="video.mp4"
web. muted, poster. controls></video>.
<audio>: Define un archivo <audio>: Define un archivo src, controls, autoplay, loop, <audio src="audio.mp3"
de audio de audio muted controls></audio>.
<track>: Define pistas de Proporciona pistas de texto, src, kind, srclang, label. <video controls><source src="video.mp4"
texto para elementos como subtítulos, para ser type="video/mp4"><track
multimedia. utilizadas con elementos src="subtitulos.vtt" kind="subtitles"
multimedia. srclang="es" label="Español"></video>
<iframe>: Define un marco Incrusta un documento HTML src, width, height, <iframe src="https://www.ejemplo.com"
interno. dentro de otro documento allowfullscreen. width="500" height="300"></iframe>.
HTML.
De tablas
Etiqueta Uso Lista de atributos Ejemplo
<table>: Define una tabla Crea una tabla para border, cellpadding, <table><tr><th>Encabezado
organizar datos. cellspacing. 1</th><th>Encabezado
2</th></tr><tr><td>Dato 1</td><td>Dato
2</td></tr></table>.
<tr>: Define una fila en una Crea una fila dentro de una No tiene atributos <tr><td>Dato 1</td><td>Dato
tabla tabla. específicos. 2</td></tr>.
<th>: Define una celda de Representa una celda de colspan, rowspan. <th>Encabezado de Columna</th>.
encabezado en una tabla. encabezado en una tabla.
<td>: Define una celda de Representa una celda de colspan, rowspan. <td>Dato en la Tabla</td>.
datos en una tabla. datos en una tabla.
<caption>: Define un título Proporciona un título No tiene atributos <table><caption>Tabla de
para una tabla descriptivo para una tabla. específicos. Datos</caption><tr><th>Columna
1</th><th>Columna
2</th></tr><tr><td>Dato 1</td><td>Dato
2</td></tr></table>.
De división
Etiqueta Uso Lista de atributos Ejemplo
<div>: Defina una división o Agrupa elementos en una id, class, style, title, lang. <div id="contenedor"
sección en un documento. división o sección lógica. class="seccion">Contenido de la
sección</div>
<span>: Defina una sección Agrupa elementos en línea id, class, style, title, lang <p>Este <span
en línea para aplicar estilos. class="resaltado">texto</span> está
resaltado.</p>
<article>: Defina un Representa un artículo, No tiene atributos específicos <article><h2>Título del
contenido independiente y entrada de blog, comentario, Artículo</h2><p>Contenido del
autónomo etc. artículo...</p></article>
<aside>: Definir contenido Representa información No tiene atributos <aside>Información complementaria
complementario al contenido relacionada, como barras específicos. relacionada con el contenido
principal laterales, notas al pie, etc. principal.</aside>.
<details>: Defina un widget Crea un elemento open. <details><summary>Haz clic para ver
interactivo para mostrar u desplegable que muestra u más detalles</summary><p>Contenido
ocultar contenido oculta información adicional. adicional oculto
inicialmente.</p></details>.
De enlace
Etiqueta Uso Lista de atributos Ejemplo
<a>: Definir un Crea un enlace a otra href, target, title, <a
hipervínculo página web, archivo o rel,download href="https://www.ejemplo.com">Enlace
ubicación dentro de la a Ejemplo</a>
misma página.
<link>: Defina la relación Se utiliza más href, rel, type,sizes <link rel="stylesheet" href="estilos.css">
entre un documento y un comúnmente para enlazar
recurso externo hojas de estilo externas.
<base>: Especifica la URL Definir una URL base href,target <head><base
base para todos los común href="https://www.ejemplo.com/paginas/"
enlaces en una página target="_blank"></head>
HTML
<map>: Definir un mapa Crea enlaces en áreas name <img src="imagen.jpg"
de imagen (mapa de específicas dentro de una usemap="#nombre-mapa"> <map
píxeles) imagen name="nombre-mapa">...</map>
<area>: Definir un área Representa las áreas shape, coords, href,target <map> <area shape="rect"
enlace dentro de un mapa enlazadas en un mapa de coords="34,44,270,350"
de imagen imagen href="enlace.htm"> </map>

Otras
Etiqueta Uso Lista de atributos Ejemplo
<form>: Definir un formulario Permite crear formularios action, method, <form action="procesar.php"
para recopilar datos del name,target,autocomplete method="post">...</form>
usuario
<input>: Definir un campo de Permite al usuario ingresar type, name, <input type="text" name="nombre"
entrada de datos datos en un formulario value,placeholder,required placeholder="Escribe tu nombre">
<textarea>: Definir un área Permite al usuario ingresar rows, cols,name,placeholder <textarea name="mensaje" rows="4"
de texto multilínea texto de más de una línea cols="50">Escribe tu mensaje
aquí</textarea>
<button>: Definir un botón Permite crear botones con type,name,value <button type="submit">Enviar</button>
funcionalidad al hacer clic
<select>: Definir una lista Muestra un menú de name,size,multiple <select name="opciones">
desplegable opciones para seleccionar <option value="1">Opción 1</option>
<option value="2">Opción 2</option>
</select>

También podría gustarte