Si alguna vez has navegado por internet (y claro que lo has hecho), te has encontrado con HTML en cada página web que has visitado. Es el esqueleto de cualquier sitio, la base sobre la que todo se construye.
Pero ¿qué es exactamente HTML? ¿Cómo funciona? Y, lo más importante, ¿cómo puedes usarlo para crear tu propia página web? En esta guía te explico todo lo que necesitas saber.
¿Qué es HTML y para qué sirve?
HTML (HyperText Markup Language, o Lenguaje de Marcado de Hipertexto) es el estándar que estructura y presenta contenido en la web. No es un lenguaje de programación como JavaScript o Python, sino un lenguaje de marcado que define la estructura de una página mediante etiquetas.
En otras palabras, HTML le dice al navegador qué mostrar y cómo mostrarlo.
¿Para qué se usa HTML?
✔️ Crear la estructura de una página web.
✔️ Insertar imágenes, enlaces, videos y formularios.
✔️ Definir encabezados, párrafos y listas.
✔️ Integrarse con CSS para diseño y con JavaScript para interactividad.
Sin HTML, la web simplemente no existiría.
Estructura básica de un documento HTML
Cada página HTML tiene una estructura básica que sigue un mismo patrón. Aquí tienes un ejemplo de código HTML mínimo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página web</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-28c0d4de-8241-4828-8f8d-a87d9292eeff: url('https://creamosnegocio.online/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-28c0d4de-8241-4828-8f8d-a87d9292eeff: url('https:\/\/creamosnegocio.online\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"28c0d4de-8241-4828-8f8d-a87d9292eeff","url":"https:\/\/creamosnegocio.online\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Bienvenido a mi primera página web con HTML.</p>
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/creamosnegocio.online\/wp-admin\/admin-ajax.php","nonce":"29c5489a69","url":"https:\/\/creamosnegocio.online\/diseno-paginas-web\/html-web-guia-completa-para-entender-y-usar-el-lenguaje-de-la-web","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg, section, header","width_threshold":1600,"height_threshold":700,"delay":500,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://creamosnegocio.online/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Explicación del código:
📌 <!DOCTYPE html> → Indica que el documento es HTML5.
📌 <html> → Contenedor principal de la página.
📌 <head> → Contiene información sobre la página (título, metaetiquetas).
📌 <body> → Es el contenido visible de la página.
Si entiendes esto, ya tienes la base para crear una web.
Estructura básica de un documento HTML
<h1> a <h6>
Encabezados (H1 es el más importante)
<p>
Párrafos de texto
<a href=»url»>
Enlaces a otras páginas
<img src=»imagen.jpg» alt=»Descripción»>
Imágenes
<ul> y <ol>
Listas (ordenadas y desordenadas)
<table>
Tablas de datos
Cómo crear una página web con HTML paso a paso
Para crear tu primera página web necesitas:
1️⃣ Un editor de código (como VS Code o Sublime Text).
2️⃣ Un navegador web para visualizar los cambios.
3️⃣ Conocimientos básicos de HTML (que estás aprendiendo aquí 😉).
Pasos básicos para crear una web:
- Crea un archivo con extensión .html.
- Escribe la estructura básica de HTML.
- Agrega texto, imágenes y enlaces.
- Guarda el archivo y ábrelo en el navegador.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi sitio web</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-28c0d4de-8241-4828-8f8d-a87d9292eeff: url('https://creamosnegocio.online/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-28c0d4de-8241-4828-8f8d-a87d9292eeff: url('https:\/\/creamosnegocio.online\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"28c0d4de-8241-4828-8f8d-a87d9292eeff","url":"https:\/\/creamosnegocio.online\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Bienvenido a mi web</h1>
<p>Esta es mi primera página web con HTML.</p>
<a href="https://www.google.com">Ir a Google</a>
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/creamosnegocio.online\/wp-admin\/admin-ajax.php","nonce":"29c5489a69","url":"https:\/\/creamosnegocio.online\/diseno-paginas-web\/html-web-guia-completa-para-entender-y-usar-el-lenguaje-de-la-web","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg, section, header","width_threshold":1600,"height_threshold":700,"delay":500,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://creamosnegocio.online/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body>
</html>
Así de fácil. 🎉
Ejemplo práctico: Creando una web simple en HTML
Vamos a hacer un ejemplo más completo: una página con una imagen, un formulario y una lista de enlaces.
<!DOCTYPE html>
<html>
<head>
<title>Mi página de prueba</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-28c0d4de-8241-4828-8f8d-a87d9292eeff: url('https://creamosnegocio.online/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-28c0d4de-8241-4828-8f8d-a87d9292eeff: url('https:\/\/creamosnegocio.online\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"28c0d4de-8241-4828-8f8d-a87d9292eeff","url":"https:\/\/creamosnegocio.online\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Bienvenido a mi web</h1>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Una imagen de ejemplo" data-lazy-src="imagen.jpg"><noscript><img decoding="async" src="imagen.jpg" alt="Una imagen de ejemplo"></noscript>
<p>Esta es una prueba de HTML.</p>
<h2>Enlaces útiles</h2>
<ul>
<li><a href="https://developer.mozilla.org/es/docs/Web/HTML">MDN HTML</a></li>
<li><a href="https://www.w3schools.com/html/">W3Schools</a></li>
</ul>
<h2>Formulario de contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="email">Correo:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Enviar">
</form>
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/creamosnegocio.online\/wp-admin\/admin-ajax.php","nonce":"29c5489a69","url":"https:\/\/creamosnegocio.online\/diseno-paginas-web\/html-web-guia-completa-para-entender-y-usar-el-lenguaje-de-la-web","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg, section, header","width_threshold":1600,"height_threshold":700,"delay":500,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://creamosnegocio.online/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body>
</html>
Este código muestra texto, imágenes, enlaces y un formulario en una página web real.
HTML y CSS: Cómo se complementan
HTML por sí solo crea la estructura, pero para darle estilo necesitas CSS (Cascading Style Sheets).
Ejemplo de HTML con CSS:
<style>
body { background-color: #f4f4f4; font-family: Arial, sans-serif; }
h1 { color: blue; }
</style>
CSS permite personalizar colores, fuentes, márgenes y más.
Recursos y herramientas para aprender HTML
Si quieres profundizar en HTML, aquí tienes algunos recursos:
📖 MDN Web Docs → La mejor documentación técnica.
📖 W3Schools → Tutoriales interactivos.
📖 Cursos online → En Udemy, Coursera o YouTube.
Conclusión
HTML es el pilar fundamental de la web. Sin él, simplemente no existirían las páginas que visitas a diario. Aprenderlo es el primer paso para cualquier persona que quiera iniciarse en el desarrollo web, y lo mejor es que es fácil de entender y empezar a usar.
Con solo unas pocas etiquetas, puedes estructurar una página completa. Y cuando combinas HTML con CSS y JavaScript, las posibilidades se multiplican.
Si realmente quieres dominar HTML, la clave es la práctica. Crea proyectos, experimenta con código y sigue aprendiendo. La web evoluciona constantemente, y cuanto más te sumerjas en ella, más puertas se abrirán para ti. 🚀
¡Ahora es tu turno! Abre tu editor de código y empieza a crear tu primera página web.
10 Preguntas Frecuentes sobre HTML
HTML, siglas de «HyperText Markup Language» (Lenguaje de Marcado de Hipertexto), es el lenguaje estándar utilizado para crear y estructurar páginas web. Define la estructura y el contenido de una página mediante el uso de etiquetas y elementos.
HTML5 es la quinta y más reciente versión del lenguaje HTML. Introduce nuevas etiquetas y funcionalidades, como soporte nativo para audio y video, gráficos mediante <canvas>, y mejoras en el almacenamiento local y la semántica del documento.
Las etiquetas en HTML son comandos encerrados entre los signos < y > que indican al navegador cómo debe mostrarse el contenido. Por ejemplo, <p> define un párrafo y <a> define un enlace.
Una etiqueta de cierre indica el final de un elemento y se representa añadiendo una barra inclinada antes del nombre de la etiqueta, como </p> para cerrar un párrafo. No todas las etiquetas requieren una etiqueta de cierre.
Los atributos proporcionan información adicional sobre un elemento y se incluyen dentro de la etiqueta de apertura. Por ejemplo, en <a href=»https://www.ejemplo.com»>, href es un atributo que especifica la URL a la que enlaza.
El <!DOCTYPE html> es una declaración que se coloca al inicio de un documento HTML para indicar al navegador que se está utilizando la versión HTML5. Ayuda a garantizar que la página se renderice correctamente.
Los elementos semánticos son etiquetas que describen claramente su significado y el tipo de contenido que albergan, como <header>, <footer>, <article> y <section>. Mejoran la accesibilidad y el SEO de las páginas web.
Para insertar una imagen, se utiliza la etiqueta <img> con el atributo src que especifica la ruta de la imagen, y el atributo alt que proporciona una descripción alternativa. Por ejemplo: <img src=»imagen.jpg» alt=»Descripción de la imagen»>.
Una lista en HTML es una colección de elementos agrupados. Hay tres tipos principales: listas ordenadas (<ol>), listas desordenadas (<ul>) y listas de definiciones (<dl>). Cada elemento de la lista se define con <li> para los dos primeros tipos y con <dt> y <dd> para las listas de definiciones.
Los formularios se crean utilizando la etiqueta <form>, que contiene elementos como campos de texto (<input>), áreas de texto (<textarea>), botones de envío (<button> o <input type=»submit»>), entre otros. Los formularios permiten a los usuarios enviar datos al servidor.
