HTML — Fundamentos esenciales

9 min readMar 11, 2025

Índice

Introducción a HTML
Estructura básica de un documento HTML
Etiquetas HTML esenciales
Elementos semánticos en HTML5
Formularios básicos en HTML
Buenas prácticas en HTML

1. Introducción a HTML

1.1 Qué es HTML y por qué es importante aprenderlo

HTML (HyperText Markup Language, o Lenguaje de Marcado de Hipertexto) es el lenguaje fundamental utilizado para crear y estructurar páginas web. A través de HTML, definimos el contenido básico de las páginas como textos, imágenes, formularios y enlaces, otorgando significado y estructura a cada elemento. [ref].

Aprender HTML es esencial para cualquier persona que desee iniciarse en el desarrollo web. Ventajas de este lenguaje:

Construir páginas web accesibles y amigables para el usuario, garantizando que todos puedan interactuar adecuadamente con el contenido.
Crear contenido web semánticamente correcto, facilitando así la comprensión por parte de buscadores (SEO) y herramientas de accesibilidad.
Sentar bases sólidas para aprender CSS y JavaScript.
Optimizar el rendimiento de la página, mejorando así la experiencia del usuario.

2. Estructura básica de un documento HTML

Cada página web está compuesta por un documento HTML con una estructura específica:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My first web page">
    <title>My first web page</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>This is my first web page.</p>
</body>
</html>

El <!DOCTYPE html> define la versión de HTML5 y garantiza que el navegador va a renderizar la página correctamente [ref].

2.1 Diferencia entre etiqueta HTML y elemento HTML:

Etiqueta HTML (Tag): Es un fragmento de texto entre corchetes angulares < > que delimita el inicio y fin de un elemento.
Elemento HTML: Es la combinación de etiqueta inicial, atributos (opcionales), contenido y etiqueta de cierre.

<p id="miParrafo">Este es un párrafo sencillo.</p>

Etiqueta inicial: <p>
Etiqueta de cierre: </p>
Atributo: id="miParrafo"
Contenido: Este es un párrafo sencillo.
Elemento HTML completo: Todo el conjunto.

3. Etiquetas HTML esenciales

Las etiquetas en HTML son los elementos fundamentales que estructuran una página web. Cada etiqueta tiene un propósito específico y puede contener atributos que modifican su comportamiento. HTML se compone de etiquetas de apertura y cierre, como <p>Texto</p>, aunque algunas, como <img >, son auto cerradas.

3.1 Etiqueta `<html>`

Es la raíz del documento HTML y engloba todo el contenido. El atributo lang[ref] especifica el idioma del contenido. mejorando la accesibilidad (Los lectores de pantalla pueden pronunciar correctamente el contenido), SEO (Los motores de búsqueda comprenden mejor el idioma de la página) y Traducciones automáticas (Permite que navegadores y buscadores ofrezcan traducciones adecuadas)

<html lang="es">

3.2 Etiqueta `<head>`

La etiqueta <head>[ref] contiene metadatos y configuraciones esenciales para el documento HTML. No es visible en la página, pero es crucial para su funcionalidad. Aquí se incluyen elementos importantes como metadatos, estilos, y scripts.

<head>
    <!-- elementos de metadatos, estilos, scripts -->
</head>

3.2.1 Etiqueta <meta>La etiqueta <meta>[ref] proporciona metadatos sobre el documento HTML, como la codificación de caracteres, información para buscadores, adaptabilidad en dispositivos móviles y configuraciones para redes sociales.

Beneficios de las meta etiquetas:

Mejoran el SEO: Permiten optimizar el contenido para los motores de búsqueda.
Aumentan la accesibilidad: Configuran correctamente el idioma y la codificación del documento.
Mejoran la experiencia de usuario: Adaptan la visualización a distintos dispositivos.

Tipos:

<meta charset="UTF-8">— Define la codificación de caracteres (evita errores con caracteres especiales).
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Permite que el diseño sea responsivo en dispositivos móviles.
<meta name="description" content="Learning frontend development from the basics"> — Mejora el SEO proporcionando una descripción corta y relevante.
<meta name="robots" content="index, follow"> — Indica a los buscadores que indexen la página y sigan los enlaces.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learning frontend development from the basics">
    <meta name="keywords" content="HTML, web development, frontend, tutorial">
    <meta name="author" content="Your name">
    <meta name="robots" content="index, follow">
    <title>Complete Guide to HTML</title>
    <link rel="stylesheet" href="styles.css">
</head>

Tip: Usa <meta name="description"> con una descripción concisa y atractiva para mejorar el posicionamiento en buscadores.

3.2.2 Etiqueta <title>La etiqueta <title>[ref] define el título de la página que se muestra en la pestaña del navegador y en los resultados de búsqueda. Es un factor clave en SEO y experiencia del usuario.

<title>Learning frontend development from the basics</title>

Tip: Mantén el título claro y relevante, idealmente de 50–60 caracteres.

3.2.3 Etiqueta <link>La etiqueta <link> permite conectar recursos externos al documento HTML, principalmente hojas de estilo CSS, fuentes externas, íconos o favicons.

Conectar una hoja de estilo externa:

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

Conectar una fuente externa desde Google Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

Conectar un ícono o favicon:

<link rel="icon" type="image/png" href="favicon.png">

3.2.4 Etiqueta <script>
Incluye código JavaScript para agregar interactividad y funcionalidad dinámica.

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

3.2.5 Etiqueta <body>La etiqueta <body>[ref] contiene todo el contenido visible de la página. Dentro de esta etiqueta, se pueden usar múltiples elementos que permiten estructurar el contenido correctamente.

Etiquetas más comunes:

<h1> - <h6> — Encabezados, donde <h1> es el más importante y <h6> el menos relevante.
<p> — Define un párrafo de texto.
<a> — Crea enlaces a otras páginas o secciones.
<img> — Inserta imágenes en la página.
<ul>, <ol>, <li> — Listas desordenadas (<ul>), ordenadas (<ol>) y sus elementos (<li>).
<table>, <tr>, <td> — Crea tablas y define sus filas y celdas.
<div> — Contenedor genérico para agrupar elementos.
<span> — Contenedor en línea para aplicar estilos a una parte específica del texto.
<form> — Contenedor de formularios para la interacción del usuario.<button> — Botón interactivo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Etiquetas HTML</title>
</head>
<body>
    <h1>Bienvenidos a Mi Página</h1>
    <p>Este es un sitio web de ejemplo.</p>
    
    <a href="https://www.ejemplo.com">Visita nuestro sitio</a>
    
    <img src="imagen.jpg" alt="Ejemplo de imagen">
    
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
    </ul>
    
    <table>
        <tr>
            <th>Nombre</th>
            <th>Edad</th>
        </tr>
        <tr>
            <td>Juan</td>
            <td>25</td>
        </tr>
    </table>
    
    <form action="/submit" method="POST">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre">
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

3.3 Comentarios en HTML

Los comentarios permiten agregar notas que no se mostrarán en el navegador. Son útiles para documentar código:

<!-- Esto es un comentario en HTML -->

4. Elementos semánticos en HTML5

Los elementos semánticos en HTML5[ref] permiten estructurar mejor el contenido, facilitando la accesibilidad, el mantenimiento del código y mejorando el posicionamiento SEO.

En lugar de utilizar etiquetas genéricas como div, se recomienda emplear elementos con significado específico.

Principales elementos semánticos:

<header> — Define una cabecera para la página o una sección.
<nav> — Contiene enlaces de navegación.
<section> — Agrupa contenido relacionado en una sección.
<article> — Contenido independiente que puede leerse por separado.
<aside> — Contenido secundario relacionado, como barras laterales.
<footer> — Define un pie de página para la página o una sección.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Etiquetas HTML</title>
</head>
<body>
    <header>
        <h1>Mi Página Web</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Sobre Nosotros</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Bienvenidos</h2>
            <p>Esta es una página de prueba con HTML.</p>
            <img src="imagen.jpg" alt="Ejemplo de imagen">
        </section>
        <article>
            <h3>Artículo Destacado</h3>
            <p>Texto del artículo con información relevante.</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2025 - Todos los derechos reservados.</p>
    </footer>
</body>
</html>

Recuerda: Usar etiquetas semánticas mejora la accesibilidad y ayuda a los motores de búsqueda a entender la jerarquía del contenido.

5. Formularios en HTML

El elemento <form>[ref] representa una sección de un documento que va a permitir la interacción del usuario con la web. Son esenciales para recolectar datos y enviarlos a un servidor.

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

5.1 Uso de `action` y `method`

Los atributos action y method definen cómo y dónde se enviarán los datos del formulario, siendo muy importantes para la comunicación entre el cliente y el servidor.

action — URL donde se enviarán los datos del formulario. Si se deja vacío, los datos se enviarán a la misma página.
method — Método HTTP (GET o POST) utilizado para enviar los datos.

Cuando se usa method="GET", los datos aparecen en la URL de esta manera:

<form action="/buscar" method="GET">
    <input type="text" name="query" value="ejemplo">
    <button type="submit">Buscar</button>
</form>

URL resultante al enviar:

https://ejemplo.com/buscar?query=ejemplo

Cuando se usa method="POST", los datos no aparecen en la URL, sino que se envían en el cuerpo de la solicitud.

<form action="/procesar" method="POST">
    <input type="text" name="nombre" value="Juan">
    <button type="submit">Enviar</button>
</form>

Estos datos se procesan en el backend y no son visibles en la barra de direcciones.

Nota: GET es más rápido, pero menos seguro porque los datos aparecen en la URL. POST es mejor para datos sensibles ya que los envía de manera “oculta” en el cuerpo de la solicitud.

5.2 Elementos básicos

Los elementos básicos de un formulario son:

<input> — Campo básico para ingresar datos.
<textarea> — Campo para texto largo o comentarios.
<select> — Menú desplegable.
<button> — Botón interactivo.

<form action="/submit" method="POST">
    <input type="text" id="nombre" name="nombre">

    <select id="pais" name="pais">
        <option value="mx">México</option>
        <option value="es">España</option>
        <option value="ar">Argentina</option>
    </select>

    <textarea id="comentario" name="comentario" rows="5" cols="30" placeholder="Escribe aquí tu comentario..." required></textarea>
       
    <button type="submit">Enviar</button>
</form>

5.2.1 Campo input y sus tipos
El campo input tiene los siguientes tipos (type):

<input type="text"> — Campo de texto para entrada de datos.
<input type="email"> — Campo específico para correos electrónicos.
<input type="password"> — Campo para contraseñas (oculta los caracteres).
<input type="number"> — Campo para ingresar solo números.
<input type="checkbox"> — Casilla de verificación.
<input type="radio"> — Botón de opción única dentro de un grupo.
<input type="date"> — Selector de fecha.

<form action="/submit" method="POST">
    <input type="text" id="nombre" name="nombre">
    
    <input type="email" id="email" name="email">
    
    <input type="password" id="password" name="password">
    
    <input type="number" id="edad" name="edad">
    
    <input type="radio" id="hombre" name="genero" value="hombre">Hombre
    <input type="radio" id="mujer" name="genero" value="mujer">Mujer
    
    <select id="pais" name="pais">
        <option value="mx">México</option>
        <option value="es">España</option>
        <option value="ar">Argentina</option>
    </select>
    
    <input type="checkbox" name="terminos"> Acepto los términos y condiciones
    
    <button type="submit">Enviar</button>
</form>

5.2.2 Botón submitEl botón con type="submit" envía el formulario automáticamente al hacer clic en él. Cuando se presiona, el formulario se procesa de acuerdo con los atributos action y method.

Nota: Si el form no tiene acción definida, recargará la misma página con los datos del formulario.

5.3 `<label>`, `<fieldset>`, `<legend>`

5.3.1 Elemento <label>El elemento <label>[ref] está diseñado para mejorar la accesibilidad y usabilidad de los formularios.

Vincula una etiqueta con un campo de entrada, lo que facilita la navegación con teclado y lectores de pantalla.
Mejora la experiencia de usuario al ampliar la zona de clic en dispositivos móviles.

<form action="/submit" method="POST">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password">
    
    <label for="edad">Edad:</label>
    <input type="number" id="edad" name="edad">
    
    <label>Género:</label>
    <input type="radio" id="hombre" name="genero" value="hombre">
    <label for="hombre">Hombre</label>
    <input type="radio" id="mujer" name="genero" value="mujer">
    <label for="mujer">Mujer</label>
    
    <label for="pais">País:</label>
    <select id="pais" name="pais">
        <option value="mx">México</option>
        <option value="es">España</option>
        <option value="ar">Argentina</option>
    </select>
    
    <label>
        <input type="checkbox" name="terminos"> Acepto los términos y condiciones
    </label>
    
    <button type="submit">Enviar</button>
</form>

5.3.2 Elementos <fielset> y <legend>Las etiquetas <fieldset>[ref] y <legend>[ref] permiten agrupar campos relacionados en formularios grandes, mejorando la accesibilidad y usabilidad.

<fieldset> — Agrupa elementos relacionados dentro de un formulario.
<legend> — Proporciona un título descriptivo para el grupo de campos.

<form>
    <fieldset>
        <legend>Información Personal</legend>
        <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>
    </fieldset>
    
    <fieldset>
        <legend>Detalles de Cuenta</legend>
        <label for="usuario">Nombre de Usuario:</label>
        <input type="text" id="usuario" name="usuario" required>
        
        <label for="password">Contraseña:</label>
        <input type="password" id="password" name="password" required>
    </fieldset>
    
    <button type="submit">Registrar</button>
</form>

5.4 Validaciones nativas en HTML5

HTML5 permite validar datos sin necesidad de JavaScript, mejorando la experiencia del usuario y reduciendo errores en el formulario.

Validaciones más comunes:

required — Hace obligatorio un campo.
minlength — Define la cantidad mínima de caracteres.
maxlength — Define la cantidad máxima de caracteres.
pattern — Permite definir una expresión regular para validar un formato específico.
min / max — Define el valor mínimo o máximo permitido en un campo numérico.
step — Establece el incremento permitido en un campo numérico.

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="telefono">Teléfono:</label>
    <input type="tel" id="telefono" name="telefono" pattern="[0-9]{10}" required>
    
    <label for="edad">Edad:</label>
    <input type="number" id="edad" name="edad" min="18" max="99" required>
    
    <button type="submit">Enviar</button>
</form>

Si un usuario intenta enviar el formulario sin cumplir con los requisitos, el navegador mostrará un mensaje de error.

6. Buenas prácticas en HTML

6.1 Semántica y accesibilidad

Utiliza etiquetas semánticas adecuadas para proporcionar significado claro al contenido, facilitando tanto la navegación del usuario como la accesibilidad a través de tecnologías como lectores de pantalla.
Evita el uso excesivo de elementos genéricos como <div> o <span>, prefiriendo en cambio elementos semánticos como <header>, <section>, <article>, <nav> y <footer> siempre que sea posible.

6.2 SEO y rendimiento

Optimiza etiquetas clave como <title> y <meta> con información clara, concisa y relevante para facilitar el rastreo y posicionamiento en motores de búsqueda.
Usa el atributo alt en imágenes, proporcionando descripciones precisas para mejorar la accesibilidad, permitiendo además que los buscadores comprendan el contenido visual del sitio.
Es esencial especificar el idioma principal del documento mediante <html lang="es"> para mejorar la indexación y accesibilidad general.

6.3 Estructuración clara y comentarios

Mantén el código HTML ordenado mediante indentación consistente y adecuada.
Utiliza comentarios para explicar secciones complejas o funciones específicas dentro del documento, facilitando su comprensión y mantenimiento por parte de otros desarrolladores o por ti mismo en el futuro.

6.4 Uso efectivo de formularios

En formularios extensos, agrupa campos relacionados utilizando etiquetas como <fieldset> y <legend> para mejorar la organización visual y lógica, incrementando la accesibilidad y facilitando su uso tanto para usuarios generales como para quienes usan tecnologías asistivas.

6.5 Herramientas útiles para validar HTML

Valida regularmente tu código HTML mediante herramientas especializadas como W3C Markup Validation Service[ref], asegurando así la calidad y cumplimiento con los estándares web actuales.

Ya tienes los fundamentos esenciales de HTML y sabes cómo estructurar tu contenido web.

En la siguiente historia, descubrirás CSS — Fundamentos esenciales, donde aprenderás cómo hacer que tus páginas se vean profesionales de forma sencilla.

HTML — Fundamentos esenciales

Índice

1. Introducción a HTML

1.1 Qué es HTML y por qué es importante aprenderlo

2. Estructura básica de un documento HTML

2.1 Diferencia entre etiqueta HTML y elemento HTML:

3. Etiquetas HTML esenciales

3.1 Etiqueta `<html>`

3.2 Etiqueta `<head>`

3.3 Comentarios en HTML

4. Elementos semánticos en HTML5

5. Formularios en HTML

5.1 Uso de `action` y `method`

5.2 Elementos básicos

5.3 `<label>`, `<fieldset>`, `<legend>`

5.4 Validaciones nativas en HTML5

6. Buenas prácticas en HTML

6.1 Semántica y accesibilidad

6.2 SEO y rendimiento

6.3 Estructuración clara y comentarios

6.4 Uso efectivo de formularios

6.5 Herramientas útiles para validar HTML

Written by Mauricio Garcia

No responses yet

HTML — Fundamentos esenciales

Índice

1. Introducción a HTML

1.1 Qué es HTML y por qué es importante aprenderlo

2. Estructura básica de un documento HTML

2.1 Diferencia entre etiqueta HTML y elemento HTML:

3. Etiquetas HTML esenciales

3.1 Etiqueta <html>

3.2 Etiqueta <head>

3.3 Comentarios en HTML

4. Elementos semánticos en HTML5

5. Formularios en HTML

5.1 Uso de action y method

5.2 Elementos básicos

5.3 <label>, <fieldset>, <legend>

5.4 Validaciones nativas en HTML5

6. Buenas prácticas en HTML

6.1 Semántica y accesibilidad

6.2 SEO y rendimiento

6.3 Estructuración clara y comentarios

6.4 Uso efectivo de formularios

6.5 Herramientas útiles para validar HTML

Written by Mauricio Garcia

No responses yet

3.1 Etiqueta `<html>`

3.2 Etiqueta `<head>`

5.1 Uso de `action` y `method`

5.3 `<label>`, `<fieldset>`, `<legend>`