Este diccionario resume etiquetas, atributos y reglas CSS comunes para construir y diseñar páginas web. HTML se encarga de la estructura del contenido, mientras que CSS se encarga del diseño visual.
🏗️ 1. Estructura base de HTML
<!DOCTYPE html>: Indica que el documento usa HTML5.<html>: Es la etiqueta principal que contiene toda la página.<head>: Guarda información técnica del documento, como configuración, título y estilos.<meta>: Entrega información técnica al navegador.<title>: Define el nombre que aparece en la pestaña del navegador.<body>: Contiene todo lo visible de la página web.
📝 2. Etiquetas de texto y listas
<h1>: Título principal de la página.<h2>: Título de una sección importante.<h3>: Subtítulo menor, usado dentro de bloques o artículos.<p>: Párrafo de texto.<ul>: Lista desordenada, normalmente con viñetas.<li>: Elemento individual dentro de una lista.
🧱 3. Etiquetas semánticas
Las etiquetas semánticas ayudan a ordenar la página y a indicar qué función cumple cada parte.
<header>: Cabecera de la página o de una sección.<nav>: Zona de navegación, normalmente usada para menús.<main>: Contenido principal del sitio.<section>: Agrupa contenido relacionado con un mismo tema.<article>: Bloque de contenido que puede entenderse por sí mismo, como una tarjeta, noticia o publicación.<aside>: Información secundaria o complementaria.<footer>: Pie de página, usado para créditos, autoría o información final.
📦 4. Etiquetas de agrupación
<div>: Caja genérica para agrupar elementos. No tiene significado propio, pero sirve para ordenar y aplicar estilos.<style>: Espacio donde se escriben reglas CSS dentro del documento HTML.
🔗 5. Enlaces e imágenes
<a>: Crea un enlace hacia otra página o hacia una parte del mismo documento.<img>: Inserta una imagen en la página.
🏷️ 6. Atributos HTML
Los atributos agregan información extra a una etiqueta. Van dentro de la etiqueta de apertura.
lang: Es un atributo de<html>. Indica el idioma principal del documento.charset: Es un atributo de<meta>. Define el sistema de caracteres, por ejemploUTF-8.href: Es un atributo de<a>. Indica el destino del enlace. Si comienza con#, apunta a una sección interna que tenga ese mismoid.src: Es un atributo de<img>. Indica la ruta o ubicación del archivo de imagen.alt: Es un atributo de<img>. Entrega un texto alternativo para la imagen.width: Puede usarse como atributo HTML para definir el ancho de una imagen, aunque también puede controlarse desde CSS.id: Identificador único de un elemento. Sirve para enlazar una sección o aplicar estilos específicos.class: Nombre reutilizable que permite aplicar el mismo estilo a varios elementos.
✅ Diferencia clave: id debería usarse una sola vez por página. class puede repetirse en muchos elementos.
🎨 7. ¿Qué es CSS?
CSS es el lenguaje que controla la apariencia de una página web. Con CSS se pueden cambiar colores, tamaños, márgenes, fuentes, fondos, bordes, alineación y distribución de los elementos.
Ejemplo simple:
p { color: blue; }
Esto significa: todos los párrafos tendrán texto azul.
🎯 8. Selectores CSS
- Selector de etiqueta: Aplica estilos a todas las etiquetas de ese tipo. Ejemplo:
body,section,article. - Selector descendente: Aplica estilos a una etiqueta solo cuando está dentro de otra. Ejemplo:
header h1. - Selector de clase: Se escribe con punto. Ejemplo:
.contenedor. - Selector de ID: Se escribe con numeral. Ejemplo:
#historia.
⚠️ Si es una clase, debe llevar punto: .contenedor. Si es un id, debe llevar numeral: #historia.
⚙️ 9. Propiedades CSS agrupadas
📏 Espacios
margin: Espacio exterior del elemento.margin-top,margin-bottom,margin-left,margin-right: Controlan el margen por lado.padding: Espacio interior del elemento.padding-top,padding-bottom,padding-left,padding-right: Controlan el relleno interior por lado.gap: Separación entre elementos dentro de un contenedor flexible.
📐 Tamaño
width: Define el ancho de un elemento.height: Define la altura de un elemento.max-width: Define el ancho máximo permitido.
🔤 Texto
font-family: Tipo de letra.font-size: Tamaño del texto.font-weight: Grosor del texto.text-align: Alineación del texto.line-height: Separación entre líneas.color: Color del texto.
🧩 Apariencia
background: Fondo de un elemento.border-radius: Redondea las esquinas.text-decoration: Agrega o quita decoraciones del texto, como el subrayado.list-style: Cambia o elimina las viñetas de una lista.
🧭 Distribución
display: Define cómo se comporta visualmente un elemento.display: flex: Ordena elementos de forma flexible.display: inline-block: Permite que elementos queden uno al lado del otro sin perder propiedades de bloque.justify-content: Distribuye elementos dentro de un contenedor flexible.
📌 Unidades
px: Píxeles. Medida fija.%: Porcentaje. Depende del tamaño del contenedor.
🌈 10. Colores hexadecimales
Los colores hexadecimales son códigos usados en CSS para representar colores. Comienzan con #
y combinan números y letras.
#ffffff: Blanco.#000000: Negro.#f5f7fb: Gris muy claro.#102a43: Azul oscuro.#2f80ed: Azul moderno.#eef8ff: Celeste muy claro.
🎨 No es necesario memorizar los códigos. Se pueden obtener desde una paleta de colores o desde un selector visual.
✅ 11. Resumen final
HTML construye la estructura de la página. CSS le da diseño. Los atributos entregan información adicional a las etiquetas. Los selectores permiten elegir qué elementos modificar y las propiedades indican qué aspecto cambiar.