Saltar al contenido principal

Introducción a HTML

HTML (HyperText Markup Language) es el lenguaje fundamental para la creación de páginas web. Permite estructurar el contenido mediante etiquetas, que el navegador interpreta para mostrar texto, imágenes, formularios, enlaces y más.

1. Estructura básica de un documento HTML​

Un documento HTML siempre debe comenzar con la declaración <!DOCTYPE html>, que le indica al navegador que se trata 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 Primera Página</title>
</head>
<body>
  <h1>Hola, Mundo!</h1>
  <p>Este es un párrafo.</p>
</body>
</html>
http://localhost:3000

Hola, Mundo!

Este es un párrafo.

Explicación de la estructura:​

  • <!DOCTYPE html>: Indica que el documento sigue el estándar HTML5.
  • <html>: Elemento raíz del documento.
  • <head>: Contiene metadatos y enlaces a recursos externos.
  • <body>: Contiene el contenido visible para el usuario.

2. Estructura semántica​

La estructura semántica mejora la accesibilidad, el SEO y la comprensión del documento. Las etiquetas semánticas describen el rol del contenido.

  • <header>: Encabezado de página o sección.
  • <nav>: Menú de navegación.
  • <main>: Contenido principal.
  • <section>: Sección de contenido.
  • <article>: Contenido independiente y reutilizable.
  • <aside>: Contenido secundario (por ejemplo, una barra lateral).
  • <footer>: Pie de página.
<body>
  <header>
    <h1>Mi Blog</h1>
  </header>
  <nav>
    <a href="#inicio">Inicio</a>
    <a href="#acerca">Acerca</a>
  </nav>
  <main>
    <article>
      <h2>Primer Artículo</h2>
      <p>Contenido del artículo...</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Mi Blog</p>
  </footer>
</body>
http://localhost:3000

Mi Blog

Primer Artículo

Contenido del artículo...

© 2025 Mi Blog

3. Etiquetas de contenido​

Estas etiquetas permiten dar estructura y estilo al contenido:

  • Encabezados: <h1> a <h6> definen jerarquías.
  • Párrafos: <p>
  • Líneas horizontales: <hr>
  • Saltos de línea: <br>
  • Enfasis: <strong>, <em>
<h1>Título principal</h1>
<p>Texto con <strong>negrita</strong> y <em>cursiva</em>.</p>
<hr>
<p>Línea nueva<br>después del salto.</p>

4. Atributos HTML​

Los atributos permiten modificar el comportamiento y estilo de los elementos:

<img src="https://picsum.photos/200/300" alt="Logotipo del sitio" width="100">
<a href="https://www.ejemplo.com" target="_blank">Visitar sitio</a>
  • src, href: para rutas de archivos o enlaces.
  • alt: texto alternativo (accesibilidad).
  • target: comportamiento del enlace (por ejemplo, abrir en nueva pestaña).
  • class, id, style: para aplicar estilos CSS.
http://localhost:3000
Logotipo del sitioVisitar sitio

5. Formularios HTML​

Los formularios permiten recoger información del usuario:

<form action="/enviar" method="POST">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="mensaje"></textarea>

  <button type="submit">Enviar</button>
</form>
http://localhost:3000


6. Multimedia​

HTML permite integrar imágenes, videos y audios:

<img src="foto.jpg" alt="Una foto">
<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>
<iframe src="https://www.ejemplo.com"></iframe>
http://localhost:3000
Imagen de prueba

7. Enlaces​

Los enlaces permiten conectar diferentes recursos:

<a href="https://www.ejemplo.com">Enlace externo</a>
<a href="#seccion2">Ir a sección interna</a>
  • Enlaces externos abren otras páginas.
  • Enlaces internos apuntan a un id dentro del mismo documento.

Extensiones útiles para HTML​

  • Auto Rename Tag: Renombra automáticamente las etiquetas HTML al cambiar una de ellas.
  • HTML Boilerplate: Genera una estructura básica de HTML al crear un nuevo archivo.
  • Live Server: Permite ver los cambios en tiempo real al editar archivos HTML.