Introducción HTML
HTML (HyperText Markup Language) es el lenguaje estándar para la creación de páginas web. Su función principal es estructurar el contenido mediante etiquetas, permitiendo la correcta visualización de textos, imágenes, enlaces y otros elementos en los navegadores. Junto con CSS y JavaScript, HTML es fundamental para el desarrollo web moderno, garantizando accesibilidad, compatibilidad y una experiencia de usuario óptima. Su dominio es clave para diseñadores, programadores y creadores de contenido que buscan optimizar sitios web para SEO y mejorar su posicionamiento en buscadores.
¿Qué es HTML?
HTML es un lenguaje de marcado utilizado para estructurar el contenido de las páginas web. Su sistema de marcado se basa en elementos que representan diferentes tipos de contenido, como encabezados, párrafos, listas, imágenes, enlaces y formularios, entre otros.
El término markup hace referencia al hecho de que, mediante HTML, se define la estructura y el significado del contenido de una página web, pero no su apariencia visual ni su interactividad. La presentación y el diseño de los elementos HTML se gestionan a través de las Hojas de Estilo en Cascada (CSS), las cuales permiten controlar aspectos como colores, tipografías, espaciados, alineaciones y la disposición de los elementos en la interfaz. Por otro lado, la interactividad de una página web se gestiona con el lenguaje de programación JavaScript, que permite manipular dinámicamente el contenido, responder a eventos del usuario y modificar el comportamiento de los elementos en tiempo real. Los navegadores web interpretan tanto el código HTML como las reglas CSS y los scripts en JavaScript para renderizar correctamente la página, asegurando así una visualización coherente, adaptable a distintos dispositivos y tamaños de pantalla, además de una experiencia interactiva fluida.
A menudo se comete el error de clasificar HTML como un lenguaje de programación; sin embargo, HTML no posee lógica de programación, estructuras de control de flujo ni capacidad para ejecutar operaciones, por lo que se considera un lenguaje de marcado y no un lenguaje de programación.
Si bien en versiones antiguas de HTML existían elementos que permitían modificar aspectos visuales, como la fuente o el color del texto, estos han quedado obsoletos y no deben ser utilizados en el desarrollo web moderno, ya que la separación entre estructura (HTML) y presentación (CSS) es una de las mejores prácticas en diseño web.
Las etiquetas HTML no solo organizan el contenido, sino que también aportan significado semántico, lo que permite que los navegadores, motores de búsqueda y tecnologías de asistencia interpreten mejor la información. Esto mejora la accesibilidad, la indexación en buscadores (SEO ) y la compatibilidad con distintos dispositivos.
Etiquetas y Atributos HTML
Una etiqueta HTML es un elemento fundamental del lenguaje HTML que se utiliza para estructurar y organizar el contenido de una página web. Las etiquetas indican al navegador cómo debe interpretar y mostrar cada parte del contenido.
Características de las etiquetas HTML
- Sintaxis básica: Una etiqueta HTML generalmente está compuesta por una etiqueta de apertura, un contenido y una etiqueta de cierre.
Ejemplo:<p>Este es un párrafo.</p><p>es la etiqueta de apertura,</p>es la etiqueta de cierre, y el texto dentro de ellas es el contenido. - Etiquetas sin cierre: Algunas etiquetas son autocontenidas, lo que significa que no necesitan una etiqueta de cierre.
Ejemplo:<img src="imagen.jpg" alt="Descripción de la imagen" /><img />no tiene una etiqueta de cierre. - Atributos: Las etiquetas pueden incluir atributos para modificar su comportamiento o apariencia.
ejemplo:<a href="https://www.ejemplo.com">Visitar página</a>hrefindica la URL a la que se dirige el enlace.
Clasificación de las etiquetas HTML
- Estructurales: Definen la organización del contenido.
Ejemplo:<header>,<nav>,<section>,<article>,<footer>. - De contenido: Representan texto, imágenes o enlaces.
Ejemplo:<p>,<h1>-<h6>,<img>,<a>,<span>,<strong>. - De formularios: Permiten la interacción del usuario.
Ejemplo:<form>,<input>,<button>,<label>,<select>. - Multimedia: Integran contenido como audio y video.
Ejemplo:<audio>,lt;video>,<iframe>. - De estilo y diseño: Agrupan o modifican elementos.
Ejemplo:<div>,<span>,<style>
Atributos HTML
Los atributos en HTML son propiedades que se añaden a las etiquetas para proporcionar información adicional sobre su comportamiento o apariencia. Estos atributos siempre se escriben dentro de la etiqueta de apertura y siguen la estructura:
<etiqueta atributo="valor">Contenido</etiqueta>
Características de los Atributos en HTML
- Siempre van en la etiqueta de apertura.
- Pueden tener diferentes valores, dependiendo del tipo de atributo.
- Algunos atributos son obligatorios, mientras que otros son opcionales.
- Deben escribirse en minúsculas para seguir las buenas prácticas.
Tipos de Atributos en HTML
Atributos Globales
Estos atributos pueden aplicarse a casi cualquier etiqueta en HTML:
-
id: Identifica un elemento de forma única en la página. -
class: Permite asignar una o varias clases CSS a un elemento. -
style: Aplica estilos en línea directamente sobre un elemento. -
title: Muestra un texto emergente al pasar el cursor sobre el elemento. -
lang: Define el idioma del contenido. -
hidden: Oculta el elemento sin eliminarlo del código.
Ejemplo:
<p id="parrafo1" class="texto-importante" style="color: red;" title="Este es un párrafo">Este es un texto con atributos.</p>
Atributos Específicos de cada Etiqueta
- Atributos en <a> (enlaces):
-
href: Especifica la URL del enlace. -
target: Define cómo abrir el enlace (_self, _blank, etc.). -
rel: Indica la relación con la página enlazada.
<a href="https://www.ejemplo.com" target="_blank" rel="noopener noreferrer">Visitar sitio</a> -
- Atributos en <img> (imágenes):
-
src: Define la ruta de la imagen. -
alt: Proporciona una descripción para accesibilidad. -
width: Define el ancho de la imagen. -
height: Define la altura de la imagen.
<img src="imagen.jpg" alt="Descripción de la imagen" width="200" height="150"> -
- Atributos en <input> (formularios):
-
type: Define el tipo de entrada (text, password, email, etc.). -
name: Asigna un nombre al campo de entrada. -
value: Define el valor predeterminado del campo. -
placeholder: Muestra un texto de ayuda dentro del campo. -
required: Indica que el campo es obligatorio.
<input type="email" name="correo" placeholder="Escribe tu correo" required> -
Atributos Booleanos en HTML
Algunos atributos no requieren un valor, ya que su sola presencia indica su activación.
-
disabled:<button disabled>Enviar</button> -
checked:<input type="checkbox" checked> -
readonly:<input type="text" value="Solo lectura" readonly> -
required:<input type="text" required>
Los atributos en HTML permiten personalizar y controlar el comportamiento de los elementos de una página web. Su uso adecuado mejora la accesibilidad, la experiencia del usuario y la integración con CSS y JavaScript.
La Semántica Web
La semántica en HTML se refiere al uso de etiquetas que describen el significado del contenido dentro de una página web, en lugar de solo definir su apariencia. Esto permite que navegadores, motores de búsqueda y tecnologías de asistencia (como lectores de pantalla) interpreten correctamente la información y su estructura.
Importancia de la Semántica en HTML
- Mejora la accesibilidad: Facilita la navegación a personas con discapacidad visual mediante lectores de pantalla.
- Optimiza el SEO: Los motores de búsqueda pueden entender mejor el contenido y su jerarquía.
- Facilita el mantenimiento del código: Un código semántico es más claro y comprensible para desarrolladores.
- Mejor compatibilidad con tecnologías modernas: Permite una mejor integración con CSS, JavaScript y frameworks web.
Etiquetas Semánticas más Utilizadas en HTML
Estructura del Documento
-
<header>: Define la cabecera de una página o sección. -
<nav>: Representa un conjunto de enlaces de navegación. -
<section>: Agrupa contenido relacionado dentro de un documento. -
<article>: Contiene contenido independiente como noticias o blogs. -
<aside>: Define contenido relacionado, como barras laterales. -
<footer>: Representa el pie de página de una sección o del sitio web.
Contenido de Texto
-
<h1> - <h6>: Representan títulos y subtítulos con diferentes niveles de importancia. <p>: Define párrafos de texto.-
<blockquote>: Indica una cita en bloque. -
<strong>: Resalta un texto con importancia (normalmente en negrita). -
<em>: Resalta un texto con énfasis (normalmente en cursiva).
Multimedia y Contenido Interactivo
-
<figure>: Agrupa imágenes y su descripción. -
<figcaption>: Proporciona una leyenda para una imagen o gráfico. -
<audio>: Permite la reproducción de audio. -
<video>: Permite la reproducción de video. -
<mark>: Resalta una parte del texto.
Diferencia entre HTML Semántico y no Semántico
Ejemplo de código no semántico:
<div class="header">Mi sitio web</div>
<div class="content">Bienvenido a mi página</div>
<div class="footer">© 2025 Todos los derechos reservados</div>
Aquí, los <div> no aportan información sobre el contenido.
Ejemplo de código semántico:
<header>Mi sitio web</header>
<section>Bienvenido a mi página</section>
<footer>© 2025 Todos los derechos reservados</footer>
En este caso, las etiquetas indican claramente la estructura del contenido.
El HTML semántico es fundamental para crear páginas web bien estructuradas, accesibles y optimizadas para motores de búsqueda. Su uso adecuado facilita la comprensión del contenido tanto para los desarrolladores como para las tecnologías web.
Comentarios
Los comentarios en HTML son fragmentos de texto que se incluyen en el código pero que no son visibles en la página web. Se utilizan para agregar notas, explicaciones o desactivar temporalmente partes del código sin eliminarlas.
Sintaxis de los Comentarios en HTML
Para escribir un comentario en HTML, se debe utilizar la siguiente sintaxis:
<!-- Este es un comentario en HTML -->
Todo lo que esté dentro de <!-- y --> será ignorado por el navegador.
Ejemplo en código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Comentarios</title>
</head>
<body>
<!-- Este es un comentario que indica que esta es la cabecera de la página -->
<header>
<h1>Bienvenido a mi sitio web</h1>
</header>
<!-- Sección principal del contenido -->
<section>
<p>Este es un párrafo dentro de una sección.</p>
</section>
<!-- Pie de página -->
<footer>
<p>© 2025 Mi sitio web</p>
</footer>
</body>
</html>
Usos de los Comentarios en HTML
Los usos más importantes se tiene:
Explicar el Código
Los comentarios ayudan a los desarrolladores a entender la estructura del código, lo cual es útil cuando se trabaja en equipo o se revisa el código después de un tiempo.
<!-- Navegación principal del sitio -->
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
Desactivar Temporalmente Partes del Código
Si se necesita ocultar un elemento sin eliminarlo, se puede comentar.
<!-- <img src="imagen.jpg" alt="Imagen de ejemplo"> -->
Notas de Depuración
Se pueden usar comentarios para indicar partes del código que requieren correcciones o mejoras.
<!-- TODO: Agregar más enlaces a la barra de navegación -->
Consideraciones Importantes para los Comentarios
- No se pueden anidar comentarios:
<!-- Este es un <!-- comentario anidado --> y dará error --> - No abusar de los comentarios: Demasiados comentarios pueden hacer que el código sea difícil de leer. Se recomienda utilizarlos solo cuando sean necesarios.
- Los comentarios no afectan el rendimiento: Aunque no son visibles en la página web, siguen estando en el código fuente, por lo que pueden ser vistos por cualquier persona que inspeccione el HTML.