OneNote [Link]
Wednesday, July 30, 2025 4:06 PM
Explicable ejemplo
• El <!DOCTYPE html>declaración define que este documento es un documento HTML5
• El <html>elemento es el elemento raíz de un HTML página
• El <head>elemento contiene meta información sobre la Página HTML
• El <title>el elemento especifica un título para el Página HTML (que se muestra en la barra de título del navegador o en la pestaña de la página)
• El <body>el elemento define la el cuerpo del documento, y es un contenedor para todos los contenidos visibles, tales como Títulos, párrafos,
imágenes, hipervínculos, tablas, listas, etc.
• El <h1>elemento define una gran partida
• El <p>elemento define un párrafo
Inputs type:
Tipos de entrada de texto
Tipo Descripción
text Entrada de una sola línea de texto.
password Entrada de texto oculta (para contraseñas).
email Entrada para direcciones de correo.
search Campo para búsquedas.
tel Entrada para número telefónico.
url Entrada para URLs (valida formato).
Entradas numericas
Tipo Descripción
number Entrada de números, puede tener controles de incremento.
range Selector tipo barra deslizante para valores dentro de un rango.
Fechas y horas
Tipo Descripción
date Selector de fecha (día, mes, año).
month Selector de mes y año.
week Selector de semana y año.
time Selector de hora.
datetime-local Selector de fecha y hora local (sin zona horaria).
Botones y acciones
Tipo Descripción
button Botón genérico.
submit Envía el formulario.
reset Restaura los valores originales del formulario.
Opciones y selección
Tipo Descripción
checkbox Casilla de verificación (puede seleccionarse o no).
radio Botones de opción exclusiva (una sola opción entre varias).
Subida de archivos y multimedia
Tipo Descripción
file Permite seleccionar archivos del sistema local.
image Botón con imagen que actúa como submit.
color Selector de color.
Atributos
A. Atributos Globales (funcionan en casi cualquier etiqueta)
Atributo Descripción
1 de 5 2/08/2025, 9:50 a. m.
OneNote [Link]
id Identificador único del elemento.
class Asocia el elemento a una o más clases CSS.
style Estilos en línea para ese elemento.
title Texto que se muestra como tooltip al pasar el mouse.
hidden Oculta el elemento visualmente.
tabindex Define el orden de tabulación del elemento.
accesskey Tecla rápida de acceso para enfocar el elemento.
contenteditable Hace el contenido editable por el usuario.
draggable Permite arrastrar el elemento (true / false).
spellcheck Activa/desactiva el corrector ortográfico.
dir Dirección del texto (ltr o rtl).
lang Idioma del contenido.
translate Si el contenido debe ser traducido (yes / no).
data-* Atributos personalizados para JS (ej: data-id="123").
B. Atributos de Formularios (<form>, <input>, <textarea>, etc.)
Atributo Descripción
type Tipo de entrada (texto, email, number, etc.).
name Nombre del campo (clave al enviarlo).
value Valor inicial del campo.
placeholder Texto guía dentro del campo.
required Campo obligatorio.
readonly Solo lectura (no editable).
disabled Deshabilitado (gris, no editable ni clickeable).
maxlength Máximo de caracteres.
minlength Mínimo de caracteres.
min / max Valor mínimo y máximo (para números, fechas, etc.).
step Saltos permitidos (ej: de 5 en 5).
checked Casilla marcada por defecto.
multiple Selección múltiple (en <select> o archivos).
autofocus El campo obtiene foco al cargar la página.
autocomplete Activa/desactiva el autocompletado del navegador.
pattern Expresión regular para validar texto.
form Asocia el campo con un <form> por su id.
formaction Sobrescribe el action del <form>.
formenctype Tipo de codificación para envíos (multipart/form-data, etc.).
formmethod Método HTTP (get / post).
formtarget Dónde abrir la respuesta (_blank, etc.).
novalidate Desactiva la validación del navegador.
C. Atributos Multimedia (<img>, <video>, <audio>, etc.)
Atributo Descripción
src Ruta al archivo (imagen, video, audio, script, etc.).
alt Texto alternativo si la imagen no carga.
width/height Ancho y alto del elemento.
controls Muestra controles para reproducir.
autoplay Reproduce automáticamente.
muted Inicia en silencio.
loop Se repite en bucle.
preload Qué tan anticipadamente cargar (auto, metadata, none).
poster Imagen mostrada antes de reproducir el video.
crossorigin Controla el CORS del recurso (anonymous, use-credentials).
type Tipo MIME del recurso (ej: video/mp4).
D. Atributos de Enlaces y Navegación
Atributo Descripción
href Dirección del enlace.
target Dónde abrir el enlace (_blank, _self, etc.).
rel Relación con el destino (noopener, stylesheet, etc.).
download Descarga el archivo en vez de abrirlo.
hreflang Idioma del recurso vinculado.
media Especifica cuándo aplicar el recurso (en <link>).
referrerpolicy Política de referencia enviada (seguridad).
E. Atributos en Scripts y Estilos
Atributo Descripción
src Ruta a un archivo JavaScript.
type Tipo MIME (text/javascript, etc.).
async Ejecuta el script sin bloquear la carga.
defer Ejecuta el script al final del parseo del HTML.
integrity Verifica la integridad del archivo (SRI).
nomodule Solo se ejecuta si no se soportan módulos JS.
crossorigin Controla el CORS al cargar el script.
F. Atributos de Accesibilidad (ARIA)
Atributo Descripción
role Rol del elemento (botón, encabezado, alerta, etc.).
aria-label Etiqueta accesible para lectores de pantalla.
aria-hidden Oculta el elemento a tecnologías asistidas.
aria-* Muchos otros para accesibilidad (aria-checked, etc.).
Sintaxis de una etiqueta
<nombre atributo="valor">Contenido</nombre>
Ejemplo multiples atributos:
<input
2 de 5 2/08/2025, 9:50 a. m.
OneNote [Link]
type="email"
name="correo"
id="inputCorreo"
placeholder="Ingresa tu correo"
required
autofocus
maxlength="50"
autocomplete="on"
class="form-control input-lg"
style="border: 1px solid gray; padding: 10px;"
data-user="arnold"
>
HTML semántico significa usar etiquetas que describen claramente el contenido y la función de cada parte de una página web.
En lugar de usar solo <div> y <span>, se usan etiquetas con significado como <header>, <nav>, <article>, etc.
Esto mejora:
• La accesibilidad (para lectores de pantalla).
• El SEO (motores de búsqueda entienden mejor la estructura).
• La mantenibilidad del código (más claro para ti y otros desarrolladores).
Principales etiquetas semánticas
Etiqueta Uso
<header> Encabezado de una página o sección.
<nav> Contenedor de enlaces de navegación.
<main> Contenido principal del documento. Solo debe haber uno por página.
<section> Sección temática de contenido relacionada.
<article> Contenido independiente (como una publicación o noticia).
<aside> Contenido secundario o complementario (barras laterales, anuncios).
<footer> Pie de página, información de cierre.
<figure> Agrupa contenido visual (imagen, gráfico).
<figcaption> Descripción de la imagen dentro de <figure>.
<time> Representa fechas u horas.
<mark> Resalta texto relevante.
<summary> + <details> Secciones desplegables (acordeones).
<address> Información de contacto.
Uso <nav>
<nav>
<a href="/">Inicio</a>
<a href="/blog">Blog</a>
<a href="/contacto">Contacto</a>
</nav>
(Para esto se usan los id)
Protocolo Uso Ejemplo
mailto: Enviar correo <a href="[Link] correo</a>
tel: Llamar por teléfono <a href="[Link]
sms: Enviar SMS <a href="[Link] SMS</a>
whatsapp:// Abrir WhatsApp (solo móvil, app <a href="whatsapp://send?text=Hola">Enviar por WhatsApp</a>
instalada)
https:// WhatsApp vía navegador <a href="[Link] Web</
[Link]/ a>
skype: Llamar vía Skype <a href="skype:live:usuario?call">Llamar por Skype</a>
geo: Abrir ubicación en mapas <a href="geo:37.7749,-122.4194">Ver ubicación</a>
intent: (Android) Llamar apps <a href="intent://scan/
directamente #Intent;scheme=zxing;package=[Link];en
d">Escanear</a>
zoommtg: Abrir Zoom directamente <a href="zoommtg://[Link]/join?confno=123456789">Unirse a
Zoom</a>
ftp: Enlace a archivos por FTP <a href="[Link]
archivo</a>
file: Acceder a archivos locales (solo <a href="[Link] local</a>
para testing o local)
FORMULARIOS
<form action="/procesar" method="post">
<fileset>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Enviar">
</fileset>
</form>
Atributos importantes de <form>
Atributo Descripción
3 de 5 2/08/2025, 9:50 a. m.
OneNote [Link]
action URL donde se enviarán los datos
method GET (visible en la URL) o POST (oculto)
target _self, _blank, etc.
enctype Tipo de codificación, ej. multipart/form-data para subir archivos
iframe en HTML
El elemento <iframe> (inline frame) se usa para incrustar otra página web dentro de la actual.
<iframe src="[Link] width="600" height="400"></iframe>
Ejemplo incrustando un video de YouTube:
<iframe width="560" height="315"
src="[Link]
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
4 de 5 2/08/2025, 9:50 a. m.
OneNote [Link]
5 de 5 2/08/2025, 9:50 a. m.
