1) Texto básico
Esto es un párrafo. Dentro puedes usar énfasis con <em> y
negrita importante con <strong>.
También hay otros tags para texto:
- <small> para texto pequeño
- <mark> para resaltar
- <del> para texto tachado (eliminado)
- <ins> para texto insertado (nuevo)
Línea 1
Línea 2 (gracias a <br>)
2) Enlaces, imágenes, vídeos, audio y botones
Los links, botones, imágenes, vídeos y audios se explican en la siguiente sección. Aquí tienes un pequeño adelanto:
Imágenes
-
Ejemplo:
<img src="URL" alt="Texto alternativo"> -
src: ruta o URL de la imagen. -
alt: texto alternativo (accesibilidad y fallback si no carga). -
Puedes usar
widthyheight, aunque es mejor controlar el tamaño con CSS.
Videos
-
Ejemplo:
<video src="URL" controls> -
El atributo
controlsañade controles de reproducción. -
También puedes usar
<source>dentro del video para ofrecer varias fuentes (mp4, webm, etc.).
Audio
-
Ejemplo:
<audio src="URL" controls> -
Al igual que con video, el atributo
controlsañade controles de reproducción. -
También puedes usar
<source>dentro del audio para ofrecer varias fuentes (mp3, ogg, etc.).
Enlaces
-
Ejemplo:
<a href="URL">Texto visible</a> -
href: define el destino. -
target="_blank": abre en nueva pestaña. -
Buena práctica: añadir
rel="noopener noreferrer"por seguridad. -
Enlaces internos:
href="#id"(el elemento destino debe tener eseid).
Botones
-
<button type="submit">Enviar</button>→ envía formulario. -
type="reset"→ limpia campos. -
type="button"→ botón genérico (requiere JS para acción). -
Los botones
submityresetdeben estar dentro de un<form>.
Enlaces internos (navegación dentro de la misma página)
-
Para crear un enlace interno se usa el atributo
href="#id-del-elemento". -
El símbolo
#indica que el destino está dentro de la misma página. -
El elemento al que quieres ir debe tener un atributo
id="id-del-elemento". -
Puedes usar un
<a>o un<button>con JavaScript para lograr el desplazamiento. - Este tipo de enlaces es útil para crear índices, botones de "Ir arriba" o navegación en páginas largas.
Ejemplos prácticos
En esta sección se muestran ejemplos de cada uno de estos elementos.
Imagen de ejemplo:
Vídeo de ejemplo:
Audio de ejemplo:
Enlace: Documentación de HTML (MDN)
Link interno de ejemplo: Ir al final de la página
Botón volver arriba de ejemplo:
3) Listas
Lista con viñetas (ul)
- Elemento A
- Elemento B
- Elemento C
Lista numerada (ol)
- Paso 1
- Paso 2
- Paso 3
4) Contenedores y semántica
<div> con atributo class="nota".
Y aquí un span dentro de una frase.
Los elementos semánticos describen qué es cada bloque (no solo cómo se ve).
5) Tabla
| Tag | Para qué sirve |
|---|---|
<p> |
Párrafo |
<a> |
Enlace |
<img> |
Imagen |
6) Formulario (inputs + atributos)
7) Favicon (icono de la web)
El favicon es el icono que aparece en la pestaña del navegador. Se define en el <head> con:
<link rel="icon" href="favicon.ico" type="image/x-icon">.
El archivo favicon.ico debe estar en la misma carpeta que el HTML o puedes usar una ruta relativa o URL.