🧠 HTML y CSS: Las etiquetas y propiedades más importantes que debes dominar

Cuando comienzas en el desarrollo web, es fácil sentir que hay demasiadas etiquetas y propiedades por aprender. Pero la realidad es más sencilla: la mayoría de los sitios web se construyen usando un conjunto bastante reducido de elementos bien entendidos.

En este artículo te voy a mostrar las etiquetas de HTML y propiedades de CSS más importantes, explicadas de forma clara para que no solo las memorices, sino que entiendas cuándo y por qué usarlas.

📄 Estructura básica de una página HTML

Toda página web parte de una base común. Estas etiquetas son el esqueleto de cualquier sitio:

<html>
  <head>
    <title>Mi página</title>
  </head>
  <body>
    Contenido visible
  </body>
</html>
  • <html> → Contiene todo el documento
  • <head> → Configuración interna (no visible)
  • <title> → Nombre en la pestaña del navegador
  • <body> → Todo lo que el usuario ve

👉 Sin esta estructura, una página simplemente no funciona correctamente.

🧩 Etiquetas estructurales (clave para SEO y orden)

HTML moderno no solo muestra contenido, también lo organiza de forma lógica:

  • <header> → Encabezado (logo, menú)
  • <nav> → Navegación principal
  • <main> → Contenido principal
  • <section> → Secciones dentro del contenido
  • <article> → Contenido independiente (como un post)
  • <aside> → Información secundaria (barra lateral)
  • <footer> → Pie de página

👉 Estas etiquetas ayudan a Google a entender tu página y mejoran tu posicionamiento.

🔤 Texto y contenido

Aquí es donde vive la mayor parte de tu información:

  • <h1> a <h6> → Títulos (jerarquía importante)
  • <p> → Párrafos
  • <span> → Texto en línea (para aplicar estilos)
  • <strong> → Texto importante (semántico)
  • <em> → Texto con énfasis (semántico)
  • <br> → Salto de línea
  • <hr> → Línea divisoria

💡 Consejo: Usa solo un <h1> por página y organiza bien tus encabezados.

🔗 Enlaces e imágenes

Elementos básicos para cualquier sitio web:

<a href="https://tusitio.com">Ir al sitio</a>
<img src="imagen.jpg" alt="Descripción de la imagen">
  • <a> → Enlaces
  • <img> → Imágenes

👉 El atributo alt es fundamental para SEO y accesibilidad.

📦 Contenedores

Sirven para organizar contenido y aplicar estilos:

  • <div> → Contenedor genérico (muy usado)
  • <span> → Contenedor en línea

👉 Piensa en <div> como cajas para estructurar tu diseño.

📋 Listas

Para organizar información de forma clara:

  • <ul> → Lista sin orden
  • <ol> → Lista ordenada
  • <li> → Elemento de lista

🧾 Formularios

Para interactuar con el usuario:

  • <form> → Contenedor del formulario
  • <input> → Campos de entrada
  • <textarea> → Texto largo
  • <button> → Botón
  • <label> → Etiqueta del campo

🎨 CSS: Propiedades esenciales

HTML estructura, pero CSS es quien da estilo y vida.

📏 Tamaño y espacio

  • width → ancho
  • height → alto
  • margin → espacio exterior
  • padding → espacio interior

👉 Esto define cómo respira tu diseño.

🎨 Colores y fondo

  • color → color del texto
  • background → fondo
  • background-color → color de fondo

🔠 Texto

  • font-size → tamaño
  • font-family → tipografía
  • font-weight → grosor
  • text-align → alineación
  • line-height → altura entre líneas

📦 Modelo de caja

  • border → bordes
  • border-radius → esquinas redondeadas
  • box-shadow → sombras

👉 Esto es lo que hace que un diseño se vea moderno.

📐 Posicionamiento

  • display → comportamiento del elemento
    • block
    • inline
    • flex
    • grid
  • position
    • static
    • relative
    • absolute
    • fixed

👉 Aquí es donde muchos se confunden… pero también donde empieza el verdadero control del diseño.

🔄 Flexbox (MUY importante)

Flexbox es lo que te permite alinear elementos fácilmente:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
  • justify-content → eje horizontal
  • align-items → eje vertical
  • gap → espacio entre elementos

👉 Es clave para menús, botones y layouts modernos.

📱 Adaptación a móviles (Responsive Design)

Hoy en día, una página que no se adapta a celular prácticamente está incompleta.
Aquí es donde entra el concepto de responsive design, que permite que tu sitio se vea bien en cualquier dispositivo.

🧠 ¿Cómo se logra?

Se hace usando media queries en CSS, que permiten aplicar estilos dependiendo del tamaño de la pantalla.

Ejemplo básico:

@media (max-width: 768px) {
  body {
    background: red;
  }
}

👉 Esto significa:
“Si la pantalla mide 768px o menos (celular o tablet), aplica estos estilos”

🎯 Ejemplo real (adaptando un menú)

Supongamos que tienes un menú horizontal:

.menu {
  display: flex;
  gap: 20px;
}

En escritorio se ve bien, pero en móvil se aplasta.
Entonces lo adaptamos:

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

👉 Resultado:

  • En PC → menú horizontal
  • En celular → menú vertical

📏 Tamaños más usados

No necesitas memorizar muchos, con estos basta:

  • 768px → tablets / celulares grandes
  • 480px → celulares pequeños

⚠️ Error común

Muchos creen que responsive es:

❌ Hacer todo más pequeño
✔️ En realidad es reacomodar el diseño

🧩 Consejo importante

Siempre diseña así:

  1. Primero escritorio (más fácil)
  2. Luego adapta a móvil con @media

(O si quieres nivel más pro: mobile first, pero eso lo puedes ver después)

🧠 Conclusión

El responsive no es opcional, es parte del desarrollo web moderno.
Con solo usar @media y propiedades como flex-direction, puedes adaptar casi cualquier diseño.

🧲 Otras propiedades importantes

  • overflow → controla desbordamiento
  • z-index → capas (qué elemento va encima)
  • cursor → tipo de cursor
  • transition → animaciones suaves

⚠️ La diferencia que casi nadie explica

Aquí hay un detalle importante que separa a principiantes de alguien que realmente entiende HTML:

  • <strong> → indica importancia (semántico)
  • <em> → indica énfasis (semántico)
  • <b> → solo negrita visual
  • <i> → solo cursiva visual

👉 Google y los lectores de pantalla entienden <strong> y <em>, pero no <b> ni <i>.

🧠 Conclusión

No necesitas aprender todo HTML y CSS para empezar a crear cosas reales.
Con dominar estas etiquetas y propiedades, puedes construir:

  • Páginas web completas
  • Blogs
  • Landing pages
  • Interfaces modernas

La clave no es memorizar…
Es practicar y entender cómo se conectan entre sí.

Entradas relacionadas

Deja un comentario