Contenido principal
Este bloque representa una sección o artículo dentro del contenido principal.
Estructura básica, etiquetas semánticas, clases y estilos iniciales
"HTML construye la estructura; CSS le da presentación, orden y personalidad"
Una página web se construye combinando diferentes tecnologías. En esta clase nos centraremos en dos de las más importantes: HTML y CSS.
HTML se encarga de crear la estructura y el contenido de la página. CSS se encarga de cambiar su apariencia visual: colores, tamaños, márgenes, fondos, bordes y distribución.
Es el lenguaje de marcado que permite definir los elementos de una página: títulos, párrafos, imágenes, enlaces, listas, secciones y formularios.
Es el lenguaje que permite darle estilo a esos elementos: colores, tamaños, alineaciones, sombras, bordes y diseño visual.
HTML crea los elementos. CSS selecciona esos elementos y les aplica reglas visuales.
HTML significa HyperText Markup Language. No es un lenguaje de programación, sino un lenguaje de marcado. Esto quiere decir que usa etiquetas para indicar la función de cada parte del contenido.
| Elemento | Función | Ejemplo |
|---|---|---|
<!DOCTYPE html> |
Indica que el documento usa HTML5. | Debe colocarse al inicio del archivo. |
<html> |
Contiene todo el documento HTML. | <html lang="es"> |
<head> |
Contiene información para el navegador. | Metadatos, título y enlaces a CSS. |
<body> |
Contiene lo visible de la página. | Títulos, párrafos, imágenes, enlaces. |
Se usan desde <h1> hasta <h6>.
El <h1> representa el título principal.
La etiqueta <p> se usa para escribir bloques de texto.
La etiqueta <a> permite crear enlaces hacia otras páginas o secciones.
La etiqueta <img> permite mostrar imágenes dentro de la página.
<h1>Mi sitio web</h1> crea un título principal.<p>Bienvenidos a mi página.</p> crea un párrafo.
Las etiquetas semánticas son elementos HTML que describen claramente el significado o propósito de una parte de la página.
Antes era común crear casi toda la estructura usando muchos <div>. Aunque
<div> sigue siendo útil, HTML5 ofrece etiquetas más claras para organizar el
contenido.
| Etiqueta | Uso principal | Ejemplo de aplicación |
|---|---|---|
<header> |
Representa la cabecera de la página o de una sección. | Logo, título principal o menú superior. |
<nav> |
Contiene enlaces de navegación. | Menú con enlaces a Inicio, Servicios y Contacto. |
<main> |
Contiene el contenido principal de la página. | La información central del sitio. |
<section> |
Agrupa contenido relacionado dentro de una página. | Una sección de servicios, noticias o productos. |
<article> |
Representa contenido independiente. | Una noticia, publicación o entrada de blog. |
<aside> |
Contiene información complementaria. | Barra lateral, enlaces relacionados o avisos. |
<footer> |
Representa el pie de página. | Derechos, contacto o información institucional. |
Este bloque representa una sección o artículo dentro del contenido principal.
CSS significa Cascading Style Sheets. Se usa para definir cómo se verá una página HTML. Con CSS podemos cambiar colores, fuentes, tamaños, fondos, bordes, márgenes y mucho más.
El selector indica qué elemento se quiere modificar. La propiedad indica qué aspecto se cambiará. El valor indica cómo se aplicará ese cambio.
Este código selecciona todos los títulos <h1> y les aplica color azul y tamaño de
fuente de 32 píxeles.
| Forma | Descripción | Recomendación |
|---|---|---|
| CSS en línea | Se escribe dentro de la etiqueta HTML usando style. |
No es lo más recomendable para proyectos grandes. |
| CSS interno | Se escribe dentro de una etiqueta <style> en el HTML. |
Útil para ejemplos pequeños o clases demostrativas. |
| CSS externo | Se escribe en un archivo separado, por ejemplo estilos.css. |
Es la forma más ordenada para proyectos reales. |
<head>. Sirve para conectar el documento
HTML con el archivo CSS.
Una clase es un nombre que podemos asignar a uno o varios elementos HTML para aplicarles estilos específicos desde CSS.
Las clases son muy importantes porque permiten reutilizar estilos. Por ejemplo, podemos crear una clase
llamada tarjeta y aplicarla a varios bloques de contenido.
class="tarjeta", pero en CSS se selecciona
con punto: .tarjeta.
| Selector | Ejemplo | ¿Para qué sirve? |
|---|---|---|
| Etiqueta | p { color: gray; } |
Aplica estilos a todos los elementos de ese tipo. |
| Clase | .tarjeta { padding: 20px; } |
Aplica estilos a todos los elementos que tengan esa clase. |
| ID | #principal { width: 90%; } |
Identifica un elemento único. No debe repetirse en la misma página. |
Esta tarjeta representa un bloque HTML con una clase llamada tarjeta.
CSS le aplica fondo, borde, espacio interno y bordes redondeados.
Cambia el color del texto.
Cambia el tamaño de la letra.
Cambia el color de fondo de un elemento.
Agrega espacio interno entre el contenido y el borde.
Agrega espacio externo entre un elemento y otros elementos.
Redondea las esquinas de un elemento.
El siguiente ejemplo combina etiquetas semánticas, clases y estilos básicos.
.encabezado, .menu, .tarjeta y
.pie.
Un elemento puede tener más de una clase. En este caso, la sección recibe los estilos generales de
.tarjeta y además los estilos especiales de .destacada.
Una clase llamada .tarjeta es más clara que una llamada .caja1.
Los nombres deben explicar el propósito del elemento.
HTML debe encargarse de la estructura. CSS debe encargarse de la presentación visual.
Cuando exista una etiqueta semántica adecuada, es mejor usarla en lugar de llenar todo de
<div>.
La indentación ayuda a leer mejor la estructura del documento y a detectar errores.
Responde las preguntas y luego verifica tus respuestas.
HTML y CSS son la base del diseño web. HTML permite definir la estructura de una página, mientras que CSS permite transformarla visualmente para que sea más clara, atractiva y fácil de usar.
Las etiquetas semánticas ayudan a crear páginas mejor organizadas, y las clases permiten aplicar estilos de forma ordenada y reutilizable. Comprender esta relación es esencial antes de avanzar hacia temas como Flexbox, diseño responsivo e interacción con JavaScript.