HTML/CSS

Fundamentos de HTML5 y CSS3

Lucía Martínez

5 junio, 2025

Tiempo de lectura: 8 minutos

HTML5 y CSS3 son los pilares fundamentales del desarrollo web moderno. Dominar estos lenguajes te permitirá crear sitios web atractivos, accesibles y optimizados para los motores de búsqueda. En este artículo, exploraremos los conceptos básicos de HTML5 y CSS3, y te guiaremos a través de los primeros pasos para crear tu propia página web.

¿Qué es HTML5?

HTML (HyperText Markup Language) es el lenguaje estándar para crear y estructurar el contenido en la web. HTML5 es la última versión, que introduce nuevas etiquetas semánticas, mejoras en formularios, soporte multimedia nativo y muchas otras características.

HTML utiliza "etiquetas" para definir diferentes tipos de contenido. Estas etiquetas vienen en pares, con una etiqueta de apertura y una de cierre. Por ejemplo:

<h1>Este es un título principal</h1>
<p>Este es un párrafo de texto.</p>

Estructura básica de un documento HTML5

Todo documento HTML5 debe seguir una estructura básica que incluye la declaración del tipo de documento, el elemento raíz <html>, y los elementos <head> y <body>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página web</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
</body>
</html>

Etiquetas semánticas en HTML5

HTML5 introdujo nuevas etiquetas semánticas que dan más significado al contenido, lo que mejora la accesibilidad y el SEO. Algunas de las más comunes son:

<header>: Define el encabezado de una sección o página.
<nav>: Contiene los enlaces de navegación principales.
<main>: Contiene el contenido principal de la página.
<article>: Define contenido independiente y autónomo.
<section>: Define una sección temática del contenido.
<aside>: Define contenido relacionado pero no esencial.
<footer>: Define el pie de página de una sección o página.

¿Qué es CSS3?

CSS (Cascading Style Sheets) es el lenguaje utilizado para dar estilo y presentación visual a las páginas web. CSS3 es la versión más reciente, que añade características como animaciones, gradientes, sombras, transiciones y mucho más.

Sintaxis básica de CSS

La sintaxis de CSS consiste en un selector y un bloque de declaración. El selector apunta al elemento HTML que deseas estilizar, y el bloque de declaración contiene una o más propiedades con sus valores.

selector {
    propiedad: valor;
    otra-propiedad: otro-valor;
}

Por ejemplo, para hacer que todos los párrafos tengan texto rojo y tamaño de fuente de 16px:

p {
    color: red;
    font-size: 16px;
}

Formas de incluir CSS en HTML

Hay tres maneras principales de incluir CSS en un documento HTML:

CSS externo: En un archivo separado con extensión .css, vinculado en el <head> del HTML:
```
<link rel="stylesheet" href="styles.css">
```

CSS interno: Dentro de una etiqueta <style> en el <head> del HTML:

<style>
    p {
        color: red;
        font-size: 16px;
    }
</style>

CSS en línea: Directamente en el elemento HTML usando el atributo style:
```
<p style="color: red; font-size: 16px;">Este es un párrafo rojo.</p>
```

Buenas prácticas

Generalmente, se recomienda usar CSS externo para mantener la separación de contenido (HTML) y presentación (CSS), lo que hace que el código sea más limpio, más fácil de mantener y más eficiente en términos de rendimiento.

Propiedades CSS fundamentales

Estas son algunas de las propiedades CSS más utilizadas para dar estilo a elementos HTML:

Colores y fondos

color: Define el color del texto.
background-color: Define el color de fondo.
background-image: Define una imagen como fondo.

Texto y tipografía

font-family: Define la familia de fuentes.
font-size: Define el tamaño de la fuente.
font-weight: Define el grosor de la fuente (normal, bold, etc.).
text-align: Define la alineación del texto (left, right, center, justify).

Box model (modelo de caja)

width y height: Define el ancho y alto del elemento.
padding: Define el espacio entre el contenido y el borde.
border: Define el borde del elemento.
margin: Define el espacio fuera del borde.

Consejo práctico

Para entender mejor el modelo de caja, usa las herramientas de desarrollo del navegador (F12 en la mayoría de navegadores) para ver cómo se aplican estos valores a los elementos.

Creando tu primera página web

Ahora que conoces los fundamentos de HTML5 y CSS3, vamos a crear una página web simple paso a paso:

Paso 1: Crear la estructura HTML

Comienza con la estructura básica de HTML5:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Mi Primera Página Web</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Acerca de</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Bienvenido a mi sitio</h2>
            <p>Este es un párrafo de introducción a mi página web.</p>
        </section>
        
        <section>
            <h2>Mis proyectos</h2>
            <article>
                <h3>Proyecto 1</h3>
                <p>Descripción del proyecto 1.</p>
            </article>
            <article>
                <h3>Proyecto 2</h3>
                <p>Descripción del proyecto 2.</p>
            </article>
        </section>
    </main>
    
    <footer>
        <p>© 2025 Mi Página Web. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Paso 2: Crear el archivo CSS

Crea un archivo llamado "styles.css" en el mismo directorio que tu archivo HTML, y añade el siguiente código:

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Encabezado */
header {
    background-color: #f4f4f4;
    padding: 20px;
    margin-bottom: 20px;
}

h1 {
    color: #333;
}

/* Navegación */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
}

nav li {
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

nav a:hover {
    color: #0088cc;
}

/* Contenido principal */
main {
    padding: 20px;
    background-color: #fff;
}

section {
    margin-bottom: 30px;
}

h2 {
    color: #0088cc;
    border-bottom: 2px solid #f4f4f4;
    padding-bottom: 10px;
}

article {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

h3 {
    color: #444;
}

/* Pie de página */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    background-color: #f4f4f4;
    color: #666;
}

Paso 3: Ver tu página web

Guarda ambos archivos y abre el archivo HTML en tu navegador. ¡Deberías ver tu primera página web con estilos aplicados!

Conclusión

Aprender HTML5 y CSS3 es el primer paso fundamental para convertirte en un diseñador o desarrollador web. Con estos conocimientos básicos, puedes comenzar a crear tus propias páginas web y seguir aprendiendo conceptos más avanzados como diseño responsive, Flexbox, Grid, preprocesadores CSS y frameworks.

Recuerda que la práctica es clave para dominar estas habilidades, así que te animamos a experimentar con diferentes etiquetas y propiedades para comprender mejor cómo funcionan.

¿Qué aprender a continuación?

Diseño web responsive
Flexbox y Grid CSS
JavaScript para añadir interactividad
Frameworks CSS como Bootstrap o Tailwind
Preprocesadores CSS como SASS o LESS

Etiquetas: HTML5 CSS3 Desarrollo Web Principiantes