GUÍA
HTML
@saulruizplaza
INDICE
1. Estructura del documento 4
2. Definición de la cabecera 10
3. Definición del cuerpo 19
4. Elementos de texto y contenido 28
5. Elementos de enlaces y multimedia 53
6. Elementos de tablas 67
7. Elementos de listas 76
8. Elementos de formularios 80
@saulruizplaza
@saulruizplaza
¿Qué es HTML?
HTML (HyperText Markup Language)
es el lenguaje de marcado
estándar utilizado para crear y
estructurar páginas web,
describiendo su contenido
mediante etiquetas que indican
cómo deben presentarse los
elementos en un navegador.
ESTRUCTURA
DEL
DOCUMENTO
@saulruizplaza
@saulruizplaza
<!DOCTYPE html>
Especifica que el documento
está en HTML5.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<html>
Raíz de todo el documento HTML.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<html>
lang: Define el idioma del
contenido
@saulruizplaza
<head>
Contiene la configuración del
documento, como el título y la
codificación de caracteres.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<body>
Define la sección visible del
documento HTML.
No tiene atributos válidos
EJEMPLO
DEFINICIÓN
DE LA
CABECERA
@saulruizplaza
@saulruizplaza
<title>
Define el título de la página.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<meta>
Define metadatos sobre el
documento, como la
descripción y la codificación de
caracteres.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<meta>
charset: Especifica la codificación
del documento.
(charset="UTF-8")
name: Define el nombre del
metadato.
(name="description").
content: Define el valor del
metadato
(content="Una descripción de la
página”)
@saulruizplaza
<link>
Enlaza un recurso externo, como
un archivo CSS
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<link>
href: Especifica la URL del recurso.
(href=”[Link]”)
rel: Define la relación entre el
documento y el recurso.
(rel=”stylesheet”)
@saulruizplaza
<style>
Declara estilos CSS dentro del
documento HTML.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<script>
Inserta o hace referencia a un
script ejecutable dentro del
documento, generalmente
JavaScript
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<script>
src: Especifica la URL del archivo
JavaScript.
(src="[Link]")
async: Hace que el script se
cargue de forma asincrónica.
(async)
defer: Hace que el script se
ejecute después de que el
documento haya sido
completamente cargado.
(defer)
DEFINICIÓN
DEL
CUERPO
@saulruizplaza
@saulruizplaza
<nav>
Define una sección de
navegación dentro de un
documento.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<section>
Representa una sección
genérica de un documento, a
menudo con un encabezado.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<aside>
Define contenido que está
relacionado de manera
indirecta con el contenido
principal, como una barra
lateral o una nota adicional.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<article>
Representa una unidad
independiente de contenido,
como una entrada de blog, un
artículo de noticias, etc.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<header>
Define una cabecera
introductoria para una sección o
un documento.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<footer>
Define el pie de una sección o
documento, generalmente
contiene información de
contacto o derechos de autor.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<div>
Un contenedor genérico
utilizado para agrupar
contenido y aplicar estilos.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<div>
id: Define un identificador único
para el elemento.
(id=”contenido-principal”)
class: Asigna una clase para
aplicar estilos comunes.
(class=”contenido”)
style: Aplica estilos en línea al
elemento.
(style=”padding: 20px”)
ELEMENTOS DE
TEXTO Y
CONTENIDO
@saulruizplaza
@saulruizplaza
<h1> - <h6>
Define los encabezados de una
página, donde <h1> es el más
importante y <h6> el menos.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<p>
Define un párrafo de texto.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<br>
Inserta un salto de línea.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<span>
Contenedor en línea para
aplicar estilos específicos al
texto.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<span>
style: Permite aplicar estilos CSS
en línea.
(style=”color:red;”)
@saulruizplaza
<strong>
Resalta texto en negrita,
indicando énfasis semántico.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<em>
Resalta texto en cursiva,
indicando énfasis semántico.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<i>
Muestra texto en cursiva, usado
generalmente para estilizar sin
valor semántico.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<b>
Muestra texto en negrita sin
valor semántico.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<mark>
Resalta texto relevante en un
contexto particular.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<small>
Muestra texto en un tamaño
menor al texto normal.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<cite>
Representa el título de una obra,
como un libro o una película.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<pre>
Representa texto con formato
predefinido, conservando los
saltos de línea y espacios.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<code>
Representa un fragmento de
código.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<wbr>
Indica un punto donde se puede
dividir una palabra en una línea
nueva si es necesario.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<abbr>
Define una abreviatura o
acrónimo.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<abbr>
title: Define el significado
completo del acrónimo.
(title="Organización de las
Naciones Unidas")
@saulruizplaza
<time>
Representa una fecha u hora.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<time>
datetime: Define el valor de la
fecha/hora.
(datetime="2024-11-11")
@saulruizplaza
<address>
Proporciona información de
contacto, como direcciones
físicas, correos electrónicos, o
teléfonos.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<address>
lang: Define el idioma del
contenido
@saulruizplaza
<data>
Asocia datos legibles por
máquina con el contenido.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<data>
value: Especifica el valor de los
datos.
(value=”396")
@saulruizplaza
<samp>
Representa una muestra de
salida de un programa.
No tiene atributos válidos
EJEMPLO
ELEMENTOS DE
ENLACES Y
MULTIMEDIA
@saulruizplaza
@saulruizplaza
<a>
Define un enlace a otra página
web o recurso.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<a>
href: Especifica la URL del destino.
(href=”[Link]”)
target: Define cómo se abrirá el
destino.
(target=”_blank”)
@saulruizplaza
<img>
Inserta una imagen.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<img>
src: Especifica la URL de la
imagen.
(src=”[Link])
alt: Proporciona un texto
alternativo si la imagen no se
puede mostrar.
(alt=”Descripción de la imagen”)
width / height: Define las
dimensiones de la imagen.
(width=”300" height=”200”)
@saulruizplaza
<picture>
Define múltiples fuentes de una
imagen para adaptarse a
diferentes dispositivos.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<picture>
media: Especifica la condición de
medios para la que la imagen
debe mostrarse.
(srcset="[Link]")
srcset: Define diferentes versiones
de la imagen para diferentes
resoluciones.
(media="(min-width: 800px)")
@saulruizplaza
<figpicture>
Añade un subtítulo. a <figure>
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<audio>
Inserta un archivo de audio en el
documento.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<audio>
src: Define la ruta del archivo de
audio.
(src=”audio.mp3”)
controls: Añade controles de
reproducción, como play, pausa y
volumen.
@saulruizplaza
<video>
Inserta un archivo de video en el
documento.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<video>
src: Define la ruta del archivo de
video.
(src="video.mp4")
controls: Añade controles de
reproducción.
width, height: Define las
dimensiones del video
(width="600" height="400")
@saulruizplaza
<iframe>
Inserta otro documento HTML
dentro del documento actual.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<iframe>
src: Especifica la URL del
documento a incrustar.
(src="[Link]
width, height: Define las
dimensiones del video
(width="600" height="600")
ELEMENTOS
DE
TABLAS
@saulruizplaza
@saulruizplaza
<table>
Define una tabla.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<table>
border: Especifica el grosor del
borde de la tabla.
(border="2")
cellspacing: Define el espacio
entre las celdas.
(cellspacing="10")
cellpadding: Establece el espacio
entre el contenido de la celda y su
borde.
(cellpadding="15")
width: Establece el ancho de la
tabla.
(width="80%")
@saulruizplaza
<th>
Define una celda de cabecera
en la tabla.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<th>
colspan: Especifica el número de
columnas que debe abarcar la
celda.
(colspan=”2")
rowspan: Especifica el número de
filas que debe abarcar la celda.
(rowspan=”2")
scope: Define el alcance de la
celda (row, col, rowgroup,
colgroup).
(colspan="2")
@saulruizplaza
<tr>
Define una fila en la tabla.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<tr>
align: Alineación del contenido
(opciones: left, right, center).
valign: Alineación vertical del
contenido (opciones: top, middle,
bottom).
@saulruizplaza
<td>
Define una celda dentro de una
fila de la tabla
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<td>
colspan: Especifica el número de
columnas que debe abarcar la
celda.
rowspan: Especifica el número de
filas que debe abarcar la celda.
align: Alineación del contenido de
la celda (opciones: left, center,
right).
valign: Alineación vertical del
contenido de la celda (opciones:
top, middle, bottom).
ELEMENTOS
DE
LISTAS
@saulruizplaza
@saulruizplaza
<ul>
Define una lista desordenada
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<ol>
Define una lista ordenada
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<li>
Representa un elemento de una lista.
Se utiliza dentro de elementos de lista
como <ul>, <ol>
No tiene atributos válidos
EJEMPLO
ELEMENTOS
DE
FORMULARIOS
@saulruizplaza
@saulruizplaza
<form>
Agrupa todos los controles de
un formulario y gestiona su
envío.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<form>
action: Define la URL a la que se
enviará el formulario.
method: Método de envío del
formulario (get, post).
target: Define dónde se abrirá el
resultado del envío (_self, _blank,
etc.).
@saulruizplaza
ATRIBUTOS VÁLIDOS
<form>
enctype: Especifica cómo se
codificarán los datos del
formulario (utilizado
principalmente en formularios
con archivos).
autocomplete: Define si el
navegador debe autocompletar
los campos del formulario (on,
off).
@saulruizplaza
<input>
Define un campo de entrada.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<input>
type: Define el tipo de campo
(text, password, email, checkbox,
radio, file, etc.).
name: Nombre del campo.
value: Valor inicial del campo.
placeholder: Texto que aparece
cuando el campo está vacío.
@saulruizplaza
ATRIBUTOS VÁLIDOS
<input>
required: Indica que el campo es
obligatorio.
maxlength: Número máximo de
caracteres permitidos.
minlength: Número mínimo de
caracteres permitidos.
readonly: Hace que el campo sea
solo de lectura.
disabled: Deshabilita el campo.
checked: Indica que el campo
está marcado (para los campos
radio y checkbox).
@saulruizplaza
<textarea>
Crea un área de texto de varias
líneas.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<textarea>
name: Nombre del campo.
rows: Número de filas de la caja
de texto.
cols: Número de columnas de la
caja de texto.
placeholder: Texto que aparece
cuando la caja de texto está
vacía.
required: Indica que el campo es
obligatorio.
@saulruizplaza
<buttom>
Crea un botón interactivo que se
puede personalizar con texto,
iconos u otros elementos de
HTML.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<buttom>
type: Define el tipo de botón.
Puede ser:
1. "button": Botón estándar que no
realiza ninguna acción
predeterminada.
2. "submit": Envía el formulario en el
que se encuentra.
3. "reset": Restablece todos los
campos del formulario a sus
valores iniciales.
disabled: Desactiva el botón,
impidiendo que se pueda hacer
clic en él.
@saulruizplaza
ATRIBUTOS VÁLIDOS
<buttom>
autofocus: Enfoca
automáticamente el botón al
cargar la página.
form: Permite asociar el botón a
un formulario específico en el
documento, mediante el id del
formulario.
formaction: Define la URL a la que
se envía el formulario cuando el
botón es de tipo "submit".
@saulruizplaza
ATRIBUTOS VÁLIDOS
<buttom>
formenctype: Especifica cómo
codificar los datos del formulario
al enviarse. Opciones incluyen
"application/x-www-form-
urlencoded", "multipart/form-
data", y "text/plain".
formmethod: Define el método
HTTP a usar para enviar el
formulario (por ejemplo, "post" o
"get").
formnovalidate: Si se utiliza, evita
que el formulario sea validado al
hacer clic en el botón.
@saulruizplaza
ATRIBUTOS VÁLIDOS
<buttom>
formtarget: Indica dónde abrir el
resultado al enviar el formulario
("_blank", "_self", etc.).
@saulruizplaza
<select>
Crea un menú desplegable.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<select>
name: Nombre del campo.
multiple: Permite seleccionar
múltiples opciones.
size: Número de opciones visibles
sin desplazamiento.
@saulruizplaza
<label>
Asocia una etiqueta de texto a
un control de formulario.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<label>
for: Asocia el <label> con un
campo de formulario, utilizando el
id del campo.
@saulruizplaza
<fieldset>
Especifica que el documento
está en HTML5.
No tiene atributos válidos
EJEMPLO
@saulruizplaza
<legend>
Especifica que el documento
está en HTML5.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<legend>
<legend>: Define el título para el
grupo de controles dentro de un
<fieldset>.
@saulruizplaza
<optgroup>
Agrupa opciones dentro de un
menú desplegable <select>.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<optgroup>
label: Define una etiqueta para el
grupo de opciones.
@saulruizplaza
<progress>
Representa el progreso de una
tarea en curso, como una barra
de progreso.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<progress>
value: Valor actual de progreso
(debe estar entre 0 y 1).
max: Valor máximo que se puede
alcanzar (por defecto es 1).
@saulruizplaza
<datalist>
Proporciona un conjunto de
opciones predefinidas para un
campo de entrada (por ejemplo,
un campo de texto).
EJEMPLO
@saulruizplaza
<fieldset>
Agrupa controles de formulario
relacionados y los envuelve en
un cuadro.
EJEMPLO
@saulruizplaza
ATRIBUTOS VÁLIDOS
<fieldset>
disabled: Desactiva todos los
controles dentro del <fieldset>.
form: Especifica a qué formulario
pertenece el <fieldset>, útil
cuando el formulario está fuera
del contenedor del <fieldset>.
¿Te ha sido
útil esta
información?
¡Apoya mi
contenido!
Saúl Ruiz Plaza
@saulruizplaza