++ Conceptos Básicos de HTML: Guía Completa para Principiantes en México (2025)

Si estás interesado en aprender a crear páginas web desde cero, has llegado al lugar correcto. En este artículo, exploraremos qué es HTML, su historia, su estructura básica y cómo puedes utilizarlo para construir contenido web.

Este lenguaje es esencial para cualquier persona que quiera adentrarse en el mundo del desarrollo web, especialmente en México, donde la demanda de profesionales en tecnología sigue en aumento.

¿Qué encontrarás aquí?

¿Qué es HTML?

HTML (Lenguaje de Marcado de Hipertexto) es el código que se utiliza para estructurar y organizar el contenido de una página web. Aunque no es un lenguaje de programación, es fundamental para crear páginas web estáticas y, combinado con otros lenguajes como CSS y JavaScript, permite desarrollar sitios web dinámicos y atractivos.

Con HTML, puedes:

Crear párrafos y encabezados.
Insertar imágenes y videos.
Agregar enlaces a otras páginas.
Organizar contenido en listas y tablas.

Un ejemplo sencillo:

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

Run HTML

Aquí, <p> es una etiqueta que indica el inicio de un párrafo, y </p> marca su final.

Historia del HTML

El HTML nació en 1980 de la mano de Tim Berners-Lee, quien buscaba un sistema para compartir documentos de manera eficiente. Este lenguaje se convirtió en la base del World Wide Web (WWW), permitiendo que los documentos tuvieran un formato unificado y fueran accesibles desde cualquier parte del mundo.

Hoy en día, HTML es interpretado por navegadores como Google Chrome, Mozilla Firefox y Safari, que son herramientas esenciales para visualizar contenido en internet.

Anatomía de un Elemento HTML

Un elemento HTML se compone de:

Etiqueta de apertura: Indica el inicio del elemento (por ejemplo, <p>).
Contenido: El texto o datos que se mostrarán en la página.
Etiqueta de cierre: Marca el final del elemento (por ejemplo, </p>).
Atributos (opcional): Proporcionan información adicional, como class o id.

Ejemplo con un atributo:

<p class="destacado">Este es un párrafo importante.</p>

Run HTML

Aquí, class="destacado" es un atributo que puede usarse para aplicar estilos específicos.

Estructura Básica de una Página HTML

Un documento HTML tiene una estructura clara y organizada:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>¡Bienvenido a mi sitio web!</h1>
    <p>Este es un párrafo de ejemplo.</p>
  </body>
</html>

Run HTML

<!DOCTYPE html>: Define el tipo de documento.
<html>: Contiene todo el contenido de la página.
<head>: Incluye metadatos como el título y la codificación.
<body>: Alberga el contenido visible para el usuario.

Etiquetas HTML Comunes

Encabezados

HTML tiene seis niveles de encabezados, desde <h1> (el más importante) hasta <h6> (el menos importante).

Párrafos

Se utilizan para agrupar bloques de texto con la etiqueta <p>.

Listas

Listas desordenadas: Usan <ul> y <li>.
Listas ordenadas: Usan <ol> y <li>.

Imágenes

Se insertan con la etiqueta <img>, que no requiere cierre:

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

Run HTML

Enlaces

Se crean con la etiqueta <a>:

<a href="https://www.ejemplo.com">Visita este enlace</a>

Run HTML

HTML Semántico

El HTML semántico utiliza etiquetas que describen el significado del contenido, lo que mejora la accesibilidad y el SEO. Algunas etiquetas semánticas importantes son:

<header>: Encabezado de la página.
<nav>: Menú de navegación.
<article>: Contenido independiente.
<footer>: Pie de página.

Ejemplo:

<article>
  <header>
    <h1>Artículo sobre HTML Semántico</h1>
  </header>
  <p>Este artículo explica el uso de etiquetas semánticas.</p>
  <footer>
    <p>Autor: Juan Pérez</p>
  </footer>
</article>

Run HTML

Formularios HTML

Los formularios permiten la interacción con los usuarios. Se crean con la etiqueta <form> y pueden incluir campos como:

<input>: Para texto, correos electrónicos, contraseñas, etc.
<label>: Asocia texto descriptivo con un campo.
<button>: Crea botones de envío.

Ejemplo:

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

Run HTML

HTML y CSS: Una Combinación Indispensable

Mientras HTML define la estructura, CSS se encarga del diseño visual. Juntos, permiten crear páginas web completas y atractivas.

Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
      }
      h1 {
        color: #333;
      }
    </style>
    <title>Mi página con estilo</title>
  </head>
  <body>
    <h1>Hola, mundo!</h1>
    <p>Esta es una página con estilo gracias a CSS.</p>
  </body>
</html>

Run HTML

Errores Comunes al Escribir HTML

Olvidar cerrar etiquetas.
No anidar correctamente los elementos.
No utilizar etiquetas semánticas.

Recursos para Aprender HTML

Mozilla Developer Network (MDN): Tutoriales completos y actualizados.
W3Schools: Guías prácticas y ejemplos interactivos.
Codecademy: Cursos interactivos para principiantes.

Conclusión

HTML es la base de la web y un conocimiento esencial para cualquier persona interesada en el desarrollo web. Con esta guía, ya tienes las herramientas para comenzar a crear tus propias páginas web. ¡Practica, experimenta y no temas cometer errores!