50% OFF Plus
--:--:--
¡Obtener!

Curso HTML

HTML
HTML
Actualizado: 30/06/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

Descripción del curso HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear y estructurar el contenido en la web. Es la base de todas las páginas web y define la estructura y el significado de los elementos que aparecen en ellas.

¿Qué es HTML?

HTML es un lenguaje de marcado que utiliza etiquetas para definir la estructura y el contenido de un documento web. Estas etiquetas indican al navegador cómo debe mostrar y organizar el contenido, permitiendo incluir texto, imágenes, enlaces, tablas, formularios y otros elementos multimedia.

Estructura básica de un documento HTML

Un documento HTML típico tiene la siguiente estructura:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Título de la página</title>
</head>
<body>
    <!-- Contenido de la página -->
</body>
</html>
  • <!DOCTYPE html>: Indica al navegador que el documento utiliza HTML5.
  • <html>: Etiqueta raíz que engloba todo el contenido de la página.
  • <head>: Contiene metadatos, como el título y enlaces a estilos o scripts.
  • <body>: Contiene el contenido visible de la página.

Etiquetas y elementos esenciales

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Encabezados

Definen títulos y subtítulos, desde <h1> (más importante) hasta <h6> (menos importante).

<h1>Título principal</h1>
<h2>Subtítulo</h2>

Párrafos

La etiqueta <p> define un párrafo de texto.

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

Enlaces

Se crean con la etiqueta <a> y el atributo href.

<a href="https://www.ejemplo.com">Visitar Ejemplo</a>

Imágenes

Para insertar imágenes, se utiliza la etiqueta <img> con el atributo src.

<img src="imagen.jpg" alt="Descripción de la imagen">

Listas

Lista no ordenada

Utiliza <ul> para la lista y <li> para cada elemento.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

Lista ordenada

Usa <ol> en lugar de <ul>.

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
</ol>

Tablas

Definen datos en formato de filas y columnas.

<table>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>28</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>35</td>
    </tr>
</table>

Formularios

Permiten recopilar información del usuario.

<form action="/enviar" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <input type="submit" value="Enviar">
</form>

Atributos globales

Los atributos proporcionan información adicional a las etiquetas.

  • id: Identificador único del elemento.
  • class: Clase para aplicar estilos CSS.
  • style: Estilos en línea para el elemento.
  • title: Texto emergente al pasar el cursor.

Ejemplo:

<p id="parrafo1" class="texto-destacado" style="color: blue;" title="Información adicional">
    Este es un párrafo con atributos.
</p>

Etiquetas semánticas

Mejoran la estructura y accesibilidad del documento.

  • <header>: Encabezado de la página o sección.
  • <nav>: Contiene enlaces de navegación.
  • <main>: Contenido principal.
  • <section>: Sección temática del contenido.
  • <article>: Contenido independiente.
  • <aside>: Contenido relacionado.
  • <footer>: Pie de página.

Ejemplo:

<header>
    <h1>Mi Sitio Web</h1>
</header>
<nav>
    <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#contacto">Contacto</a></li>
    </ul>
</nav>
<main>
    <section id="inicio">
        <h2>Bienvenido</h2>
        <p>Contenido de la sección de inicio.</p>
    </section>
</main>
<footer>
    <p>© 2023 Mi Sitio Web</p>
</footer>

Multimedia y gráficos

Audio

Insertar archivos de audio con <audio>.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Tu navegador no soporta el elemento de audio.
</audio>

Video

Usar <video> para reproducir videos.

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
</video>

Canvas y SVG

  • <canvas>: Dibujo de gráficos mediante scripts.
  • <svg>: Gráficos vectoriales escalables.

Ejemplo de canvas:

<canvas id="miCanvas" width="200" height="100"></canvas>

Enlaces a CSS y JavaScript

Vincular hojas de estilo CSS

En el <head> del documento:

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

Incluir scripts JavaScript

Al final del <body> o en el <head>:

<script src="script.js"></script>

Metadatos y SEO

Los metadatos proporcionan información adicional sobre el documento.

<meta name="description" content="Descripción de la página para SEO">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Tu Nombre">

Buenas prácticas en HTML

  • Validar el código: Utilizar herramientas como el validador W3C.
  • Usar etiquetas semánticas: Mejora la accesibilidad y SEO.
  • Optimizar imágenes: Reducir el tamaño para mejorar la carga.
  • Especificar atributos alt: Importante para lectores de pantalla y SEO.
  • Estructurar el contenido: Utilizar una jerarquía lógica con encabezados.

Recursos adicionales

Ejemplo completo de una página HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Página de Ejemplo</title>
    <meta name="description" content="Una página de ejemplo en HTML">
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header>
        <h1>Página de Ejemplo</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#sobre-mi">Sobre Mí</a></li>
            <li><a href="#contacto">Contacto</a></li>
        </ul>
    </nav>
    <main>
        <section id="inicio">
            <h2>Bienvenido</h2>
            <p>Este es un ejemplo de una página HTML básica.</p>
            <img src="imagen.jpg" alt="Descripción de la imagen">
        </section>
        <section id="sobre-mi">
            <h2>Sobre Mí</h2>
            <p>Información sobre el autor o el propósito del sitio.</p>
        </section>
        <section id="contacto">
            <h2>Contacto</h2>
            <form action="/enviar" method="post">
                <label for="nombre">Nombre:</label>
                <input type="text" id="nombre" name="nombre" required>
                <label for="email">Correo Electrónico:</label>
                <input type="email" id="email" name="email" required>
                <input type="submit" value="Enviar">
            </form>
        </section>
    </main>
    <footer>
        <p>© 2024 CertiDevs</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Completa este curso de HTML y certifícate

Únete a nuestra plataforma de cursos de programación y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Comenzar gratis

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración