HTML desde cero
Qué es una etiqueta, la estructura de un documento, las etiquetas que se usan el 90 % del tiempo y formularios. Con un editor en vivo.
HTML es el esqueleto de toda página web: describe QUÉ hay (un título, un párrafo, una imagen, un formulario). El CSS le da estilo y el JavaScript le da comportamiento, pero todo empieza aquí.
Una etiqueta
El HTML son etiquetas que envuelven contenido. La mayoría van en pareja: apertura y cierre.
<p>Esto es un párrafo</p>
│ │ │
apertura contenido cierre (con /)Algunas etiquetas llevan atributos (información extra): <a href="https://...">enlace</a>. Y unas pocas no tienen cierre: <img>, <br>, <input>.
La estructura de un documento
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la pestaña</title>
</head>
<body>
<!-- todo lo que se ve va aquí -->
<h1>Hola</h1>
</body>
</html><head>: datos que no se ven (título, codificación, enlaces a CSS).<body>: todo el contenido visible.
Editor en vivo
Escribe HTML a la izquierda y velo a la derecha. Prueba los ejemplos:
HTML
Resultado
Las etiquetas que más se usan
| Etiqueta | Para |
|---|---|
<h1> … <h6> | encabezados, de más a menos importante (un solo h1 por página) |
<p> | párrafo de texto |
<a href> | enlace a otra página o sección |
<img src alt> | imagen (alt = texto alternativo, obligatorio) |
<ul> <ol> <li> | listas sin orden / numeradas y sus elementos |
<strong> <em> | importante (negrita) / énfasis (cursiva) |
<div> <span> | contenedores genéricos (bloque / en línea) para maquetar |
<table> <tr> <th> <td> | tabla, fila, celda de cabecera, celda |
<form> <input> <label> <button> | formularios |
Etiquetas semánticas
En vez de <div> para todo, HTML tiene etiquetas que dicen qué son. Ayudan al SEO y a los lectores de pantalla:
<header> cabecera de la página o de una sección
<nav> menú de navegación
<main> el contenido principal (uno por página)
<article> contenido independiente (un post, una noticia)
<section> una sección temática
<aside> contenido lateral (relacionado pero secundario)
<footer> pie de páginaComprueba lo aprendido
alt de <img>?