¿Qué es el HTML?
El HTML (HyperText Markup Language, o Lenguaje de Marcado de Hipertexto en español) es el lenguaje estándar utilizado para estructurar y presentar contenido en la web.
Actúa como el esqueleto de una página web, definiendo los elementos básicos que los navegadores interpretan para mostrar texto, imágenes, enlaces, videos y otros componentes que forman parte de una página.
Características principales del HTML
- Lenguaje de marcado:
- Utiliza etiquetas para definir la estructura y contenido de una página. Cada etiqueta está rodeada por corchetes angulares
< >. - Ejemplo:html
<h1>Hola, mundo</h1>
- Utiliza etiquetas para definir la estructura y contenido de una página. Cada etiqueta está rodeada por corchetes angulares
- Independencia de plataformas:
- Es compatible con todos los navegadores y sistemas operativos, lo que garantiza su versatilidad en diferentes entornos.
- Base para otros lenguajes:
- Es el fundamento de tecnologías web como CSS (diseño) y JavaScript (funcionalidad e interactividad).
- Evolución constante:
- La versión actual, HTML5, incluye mejoras significativas para manejar multimedia, gráficos y semántica web.
Estructura básica de un documento HTML
Un archivo HTML tiene una estructura estándar que incluye las siguientes secciones:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un párrafo de ejemplo.</p>
<a href="https://www.ejemplo.com">Enlace a otra página</a>
</body>
</html>
<!DOCTYPE html>: Indica al navegador que se está utilizando HTML5.<html>: Contiene todo el contenido del documento HTML.<head>: Incluye información sobre la página, como el título y metadatos.<body>: Contiene el contenido visible de la página, como textos, imágenes y enlaces.
Principales etiquetas HTML y su función
- Estructura de texto:
<h1>a<h6>: Encabezados, siendo<h1>el más importante.<p>: Párrafo.<br>: Salto de línea.<strong>: Texto en negrita.<em>: Texto en cursiva.
- Enlaces:
<a href="URL">Texto del enlace</a>: Crea un hipervínculo.
- Imágenes:
<img src="ruta_de_imagen" alt="Descripción">: Muestra una imagen y proporciona un texto alternativo.
- Listas:
<ul>: Lista no ordenada (con viñetas).<ol>: Lista ordenada (numerada).<li>: Elemento de la lista.
- Tablas:
<table>: Define una tabla.<tr>: Fila.<td>: Celda.<th>: Encabezado de tabla.
- Formularios:
<form>: Contenedor del formulario.<input>: Campo de entrada.<button>: Botón.
Importancia del HTML
- Base del desarrollo web:
- Es el punto de partida para construir cualquier sitio web. Sin HTML, los navegadores no pueden interpretar ni mostrar contenido.
- Accesibilidad:
- Permite que las páginas web sean accesibles para usuarios con discapacidades mediante el uso de etiquetas como
<alt>en imágenes y el cumplimiento de estándares como WAI-ARIA.
- Permite que las páginas web sean accesibles para usuarios con discapacidades mediante el uso de etiquetas como
- SEO:
- Elementos como
<title>,<meta>,<h1>y<a>son fundamentales para el posicionamiento en motores de búsqueda.
- Elementos como
- Compatibilidad:
- Garantiza que las páginas web puedan visualizarse correctamente en diferentes navegadores y dispositivos.
Diferencias entre HTML y otros lenguajes web
- HTML vs. CSS:
- HTML: Define la estructura y el contenido.
- CSS: Controla el diseño y la presentación visual (colores, fuentes, márgenes).
- HTML vs. JavaScript:
- HTML: Proporciona la base estática de la página.
- JavaScript: Añade interactividad y funcionalidades dinámicas, como formularios interactivos o menús desplegables.
Ejemplo práctico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de HTML</title>
</head>
<body>
<h1>Hola, mundo</h1>
<p>Este es un ejemplo básico de una página HTML.</p>
<a href="https://www.ejemplo.com">Visita nuestro sitio</a>
<img src="imagen.jpg" alt="Descripción de la imagen">
</body>
</html>El HTML es la columna vertebral de cualquier página web. Su comprensión y uso correcto son esenciales para crear sitios funcionales, accesibles y optimizados tanto para usuarios como para motores de búsqueda.
Aunque por sí solo no puede generar diseños complejos o interactividad, combinado con CSS y JavaScript, permite construir experiencias web completas y modernas.



























































