Saltar al contenido principal
ByteNova
Guía de desarrollo web

HTML y CSS para principiantes: guía desde cero

Publicado por ByteNova · 19 de julio de 2026 · Actualizado el 3 de agosto de 2026

En esta guía aprenderás:

Cómo crear la estructura de una página con HTML, darle diseño con CSS, organizar elementos, utilizar Flexbox y adaptar el contenido a celulares.

Contenido de la guía

HTML y CSS son las dos tecnologías fundamentales para construir páginas web. HTML crea la estructura y CSS controla la presentación visual.

Al trabajar juntas permiten crear sitios organizados, atractivos y adaptables a computadoras, tabletas y teléfonos.

¿Qué son HTML y CSS?

HTML

Organiza el contenido mediante títulos, párrafos, imágenes, enlaces, botones y secciones.

CSS

Controla colores, tamaños, espacios, posiciones, sombras, bordes y adaptación a pantallas.

Comparación sencilla

HTML es la estructura de una casa. CSS representa la pintura, la decoración y la distribución visual.

Puedes ampliar este tema en: ¿Por qué aprender HTML y CSS?

Estructura básica de un documento HTML

Una página HTML comienza con una estructura que informa al navegador cómo debe interpretar el documento. 

<!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</title>

</head>

<body>

    <h1>Hola, mundo</h1>

    <p>
        Esta es mi primera página web.
    </p>

</body>

</html>

DOCTYPE

Indica que el documento utiliza HTML moderno. 

<!DOCTYPE html>

Elemento html

Contiene todo el documento. 

<html lang="es">

Elemento head

Guarda información que normalmente no aparece dentro del contenido visible, como el título, los metadatos y los archivos CSS.

Elemento body

Contiene todos los elementos que se muestran dentro de la página.

Continúa con: ¿Qué es una página web?

Etiquetas principales de HTML

Títulos

HTML incluye títulos desde h1 hasta h6. 

<h1>Título principal</h1>

<h2>Título de sección</h2>

<h3>Subtema</h3>
Utiliza un h1 principal

El título principal debe describir claramente el contenido más importante de la página.

Párrafos

<p>
    Este es un párrafo de ejemplo.
</p>

Texto importante

<strong>Texto importante</strong>

Listas

<ul>

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ul>

Botones

<button type="button">
    Presiona aquí
</button>

¿Qué es HTML semántico?

HTML semántico utiliza etiquetas que explican la función del contenido.

header

Representa el encabezado de una página o sección.

nav

Contiene enlaces de navegación.

main

Contiene el contenido principal.

section

Agrupa contenido relacionado.

article

Representa contenido independiente.

footer

Representa el pie de página. 

<header>
    <nav>
        <a href="#inicio">Inicio</a>
    </nav>
</header>

<main>

    <section>

        <h1>Bienvenido</h1>

        <p>
            Aprende desarrollo web.
        </p>

    </section>

</main>

<footer>
    <p>Mi página web</p>
</footer>

Enlaces e imágenes

Crear un enlace

<a href="https://example.com">
    Visitar página
</a>

Crear un enlace interno

<a href="contacto.html">
    Contacto
</a>

Agregar una imagen

<img
    src="images/pagina-web.jpg"
    alt="Computadora mostrando una página web"
>
Escribe un buen texto alternativo

El atributo alt debe explicar el contenido o la función de una imagen importante.

Formularios HTML

Los formularios permiten recibir información del usuario. 

<form>

    <label for="nombre">
        Nombre
    </label>

    <input
        type="text"
        id="nombre"
        name="nombre"
        required
    >

    <label for="correo">
        Correo
    </label>

    <input
        type="email"
        id="correo"
        name="correo"
        required
    >

    <button type="submit">
        Enviar
    </button>

</form>

Algunos tipos de entrada son:

  • text: texto corto.
  • email: dirección de correo.
  • password: contraseña.
  • number: números.
  • date: fecha.
  • checkbox: selección múltiple.

Cómo conectar CSS con HTML

Crea un archivo llamado: 

style.css

Después agrégalo dentro del elemento head: 

<link rel="stylesheet" href="style.css">
Revisa la ruta

Si el archivo CSS está dentro de una carpeta, debes indicar correctamente su ubicación.

Selectores CSS

Un selector indica qué elementos recibirán determinados estilos.

Selector por etiqueta

p{
    color:#475569;
    font-size:18px;
}

Selector por clase

.tarjeta{
    background:#ffffff;
    padding:24px;
    border-radius:16px;
}

La clase se agrega en HTML: 

<div class="tarjeta">
    Contenido
</div>

Selector por identificador

#contacto{
    padding:80px 20px;
}
Utiliza clases para estilos reutilizables

Una misma clase puede aplicarse a varios elementos.

El modelo de caja de CSS

Todos los elementos HTML pueden entenderse como cajas formadas por varias capas.

Content

Es el contenido del elemento.

Padding

Espacio entre el contenido y el borde.

Border

Línea que rodea la caja.

Margin

Espacio exterior entre elementos. 

.tarjeta{
    width:300px;
    padding:24px;
    margin:20px;
    border:1px solid #e2e8f0;
    border-radius:18px;
}

box-sizing

Esta regla ayuda a controlar el tamaño real de los elementos: 

*{
    box-sizing:border-box;
}

Organizar elementos con Flexbox

Flexbox permite alinear y distribuir elementos dentro de un contenedor. 

.contenedor{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}
display:flex

Activa Flexbox.

justify-content

Controla la alineación principal.

align-items

Controla la alineación secundaria.

gap

Crea espacio entre elementos.

Diseño responsive

Una página responsive adapta su diseño al tamaño de la pantalla. 

.contenedor{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

@media(max-width:768px){

    .contenedor{
        grid-template-columns:1fr;
    }

}

En pantallas grandes aparecen tres columnas. En pantallas pequeñas se muestra una sola columna.

Continúa con: ¿Qué es el diseño responsive?

Proyecto práctico: crear una tarjeta

HTML

<article class="tarjeta-curso">

    <span>🌐</span>

    <h2>
        Desarrollo web
    </h2>

    <p>
        Aprende HTML y CSS desde cero.
    </p>

    <a href="#">
        Comenzar
    </a>

</article>

CSS

.tarjeta-curso{
    max-width:360px;
    padding:30px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(15, 23, 42, .10);
    text-align:center;
}

.tarjeta-curso span{
    display:block;
    margin-bottom:18px;
    font-size:44px;
}

.tarjeta-curso h2{
    margin-bottom:14px;
    color:#1e293b;
}

.tarjeta-curso p{
    margin-bottom:24px;
    color:#64748b;
}

.tarjeta-curso a{
    display:inline-block;
    padding:12px 24px;
    background:#4f46e5;
    color:#ffffff;
    text-decoration:none;
    border-radius:999px;
    font-weight:bold;
}
Modifica el ejemplo

Cambia los textos, colores, espacios y bordes para comprender cómo afecta cada propiedad.

Errores frecuentes

  • No cerrar correctamente las etiquetas.
  • Escribir incorrectamente el nombre de una clase.
  • Utilizar una ruta equivocada para CSS o imágenes.
  • Olvidar guardar los archivos.
  • Crear varios elementos h1 sin necesidad.
  • No utilizar texto alternativo en imágenes.
  • Usar espacios excesivos para posicionar elementos.
  • No comprobar el diseño en celulares.
  • Repetir estilos que podrían compartir una clase.
  • Utilizar colores con poco contraste.

El CSS no aparece

Comprueba que el enlace dentro del head tenga una ruta correcta: 

<link rel="stylesheet" href="style.css">

Una imagen no aparece

Revisa el nombre, la extensión y la carpeta: 

<img src="images/foto.jpg" alt="Descripción">

Ejercicios para practicar

Página personal

Crea un título, descripción y lista de habilidades.

Tarjeta profesional

Diseña una tarjeta con icono, título, texto y botón.

Menú de navegación

Crea enlaces para Inicio, Servicios y Contacto.

Formulario

Agrega campos para nombre, correo y mensaje.

Galería responsive

Crea una cuadrícula que se adapte al celular.

Modo oscuro

Diseña una segunda combinación de colores.

También puedes descargar los ejercicios desde la sección de: guías y materiales gratuitos .

Proyecto de refuerzo: una página personal responsive

Para consolidar la guía, crea una página con encabezado, presentación, proyectos y formulario de contacto. Usa HTML semántico y adapta el diseño a pantallas pequeñas.

Requisitos mínimos

  1. Usar header, main, section y footer.
  2. Aplicar modelo de caja, Flexbox o Grid.
  3. Incluir imágenes con texto alternativo.
  4. Probar a 320 px, 768 px y escritorio.

✅ Criterio de calidad

La página debe seguir siendo legible y navegable sin zoom horizontal y con una jerarquía clara de títulos.

Preguntas frecuentes

¿HTML es un lenguaje de programación?

No. HTML es un lenguaje de marcado utilizado para estructurar contenido.

¿CSS es un lenguaje de programación?

CSS es un lenguaje de estilos utilizado para definir la presentación visual.

¿Debo aprender HTML antes que CSS?

Es recomendable comprender primero la estructura básica de HTML y después aplicar estilos con CSS.

¿Necesito instalar programas especiales?

Solamente necesitas un editor de código y un navegador para comenzar.

¿Cuánto tiempo se necesita para aprender?

Las bases pueden aprenderse rápidamente, pero crear diseños profesionales requiere práctica constante.

¿Qué debo aprender después?

Después de HTML y CSS puedes aprender JavaScript para agregar interactividad.

Conclusión

HTML permite construir la estructura de una página y CSS transforma esa estructura en un diseño visual.

Aprender etiquetas, clases, modelo de caja, Flexbox y diseño responsive proporciona una base sólida para comenzar en desarrollo web.

Practica creando proyectos pequeños y mejora progresivamente su organización, accesibilidad y diseño.

Guía creada por

ByteNova

Plataforma educativa dedicada a explicar programación, desarrollo web, inteligencia artificial y ciberseguridad de manera clara.

Conoce más sobre ByteNova →