Aprende HTML desde cero con esta guía completa que explica qué es HTML, estructura de documentos, etiquetas esenciales y cómo crear tu primera página web.
HTML (HyperText Markup Language) es la base de cada página web que has visitado. Ya sea que quieras crear tu propio sitio web, entender cómo funciona la web, o comenzar tu viaje en el desarrollo web, aprender HTML es tu primer paso esencial. Esta guía completa te llevará desde principiante completo hasta escribir tu primera página web.
HTML significa HyperText Markup Language. Piénsalo como el esqueleto de cualquier página web: proporciona la estructura básica y el contenido que los navegadores pueden entender y mostrar.
HTML es crucial porque:
Piensa en HTML como el andamiaje de una casa. Así como una casa necesita un andamiaje sólido antes de agregar paredes, tuberías y decoración, las páginas web necesitan estructura HTML antes de agregar estilos (CSS) e interactividad (JavaScript).
Cada documento HTML sigue la misma estructura básica. Vamos a desglosarlo paso a paso:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>Bienvenido a Mi Sitio Web</h1>
<p>Este es mi primer párrafo.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
lang="es" especifica el idioma (español en este caso)<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
El head contiene metadatos (información sobre la página):
<body>
<h1>Bienvenido a Mi Sitio Web</h1>
<p>Este es mi primer párrafo.</p>
</body>
El body contiene todo el contenido visible que los usuarios ven e interactúan.
HTML usa etiquetas para marcar contenido. Las etiquetas son palabras clave rodeadas por corchetes angulares < >. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura y una de cierre.
Encabezados (H1 a H6):
<h1>Encabezado Principal</h1>
<h2>Encabezado de Sección</h2>
<h3>Encabezado de Subsección</h3>
<h4>Encabezado Menor</h4>
<h5>Encabezado Pequeño</h5>
<h6>Encabezado Más Pequeño</h6>
Párrafos:
<p>Este es un párrafo de texto. Puede contener una o más oraciones y se ajustará automáticamente para adaptarse al ancho del contenedor.</p>
Formato de Texto:
<strong>Texto en negrita para énfasis</strong>
<em>Texto en cursiva para énfasis</em>
<u>Texto subrayado</u>
<mark>Texto resaltado</mark>
Enlaces básicos:
<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>
<a href="acerca.html">Página Acerca de</a>
<a href="mailto:hola@ejemplo.com">Enviar email</a>
<a href="tel:+34123456789">Llámanos</a>
Enlaces con atributos:
<a href="https://www.ejemplo.com" target="_blank">Abrir en nueva pestaña</a>
<a href="https://www.ejemplo.com" title="Visita nuestro sitio web">Ejemplo</a>
Imagen básica:
<img src="foto.jpg" alt="Descripción de la imagen">
Imagen con atributos:
<img src="foto.jpg" alt="Un hermoso atardecer" width="300" height="200">
El atributo alt es crucial para:
Listas no ordenadas (viñetas):
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
Listas ordenadas (numeradas):
<ol>
<li>Paso uno</li>
<li>Paso dos</li>
<li>Paso tres</li>
</ol>
Contenedor genérico:
<div>
<p>Este div agrupa contenido relacionado.</p>
</div>
Secciones semánticas:
<header>Encabezado de página o sección</header>
<nav>Menú de navegación</nav>
<main>Área de contenido principal</main>
<section>Una sección de contenido</section>
<article>Una pieza completa de contenido</article>
<aside>Barra lateral o contenido relacionado</aside>
<footer>Pie de página o sección</footer>
<form>
<label for="nombre">Tu nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Tu email:</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>
Vamos a juntar todo y crear una página web completa. Sigue paso a paso:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
<body>
<header>
<h1>Bienvenido a Mi Primera Página Web</h1>
<nav>
<ul>
<li><a href="#acerca">Acerca</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="acerca">
<h2>Acerca de Mí</h2>
<p>¡Hola! Estoy aprendiendo HTML y esta es mi primera página web. Estoy emocionado de aprender más sobre desarrollo web y crear sitios web increíbles.</p>
<p>Esta página web demuestra la estructura básica de HTML incluyendo encabezados, párrafos, listas y enlaces.</p>
</section>
<section id="hobbies">
<h2>Mis Hobbies</h2>
<ul>
<li>Leer libros</li>
<li>Tocar guitarra</li>
<li>Aprender programación</li>
<li>Fotografía</li>
</ul>
</section>
<section id="contacto">
<h2>Contáctame</h2>
<p>¿Quieres ponerte en contacto? Aquí hay algunas formas de contactarme:</p>
<ul>
<li>Email: <a href="mailto:hola@ejemplo.com">hola@ejemplo.com</a></li>
<li>Teléfono: <a href="tel:+34123456789">+34 123 456 789</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Mi Primera Página Web. ¡Creada con HTML!</p>
</footer>
</body>
</html>
Vamos a desglosar lo que hace cada parte de tu página web:
<h1>)<header> y <nav> para mejor estructura<main> para indicar contenido primario© para el símbolo de copyright<footer><!DOCTYPE html><html>, <head>, y <body><strong> para texto importante, no solo estilo en negrita<!-- Incorrecto -->
<p>Este párrafo no está cerrado
<!-- Correcto -->
<p>Este párrafo está correctamente cerrado</p>
<!-- Incorrecto -->
<p><strong>Texto en negrita</p></strong>
<!-- Correcto -->
<p><strong>Texto en negrita</strong></p>
<!-- Incorrecto -->
<img src="foto.jpg">
<!-- Correcto -->
<img src="foto.jpg" alt="Descripción de la foto">
Evita etiquetas antiguas como <font>, <center>, y <b>. Usa alternativas modernas:
<b>, usa <strong><i>, usa <em><center>, usa CSS¡Felicidades! Has aprendido los fundamentos de HTML y creado tu primera página web. Aquí está lo que puedes explorar a continuación:
HTML puede parecer intimidante al principio, pero en realidad es bastante lógico y directo una vez que entiendes los fundamentos. Cada desarrollador web experto comenzó exactamente donde estás ahora y aprendió estos conceptos fundamentales.
La página web que acabas de crear demuestra todos los conceptos centrales de HTML: estructura de documento apropiada, marcado semántico, enlaces, listas y organización de contenido. Estas habilidades forman la base para todo lo demás que aprenderás en desarrollo web.
Recuerda que aprender HTML es como aprender un nuevo idioma - requiere práctica y paciencia. No te preocupes por recordar todo de inmediato. Enfócate en entender los conceptos y crear cosas. Mientras más practiques, más natural se volverá.
¡Sigue experimentando, sigue creando, y lo más importante - diviértete! La web es una plataforma increíble para la creatividad y expresión, y acabas de dar tu primer paso en este emocionante mundo.
¿Listo para continuar tu viaje HTML? Comienza modificando tu primera página web, agregando nuevas secciones, experimentando con diferentes etiquetas y viendo qué puedes crear. ¡Las posibilidades son infinitas!
Continúa leyendo con estos artículos relacionados
Aprende todo sobre las etiquetas y atributos HTML. Guía completa con ejemplos prácticos, mejores prácticas y técnicas avanzadas para dominar la estructura HTML.
Aprende la estructura completa de un documento HTML desde DOCTYPE hasta el cierre. Guía detallada con ejemplos prácticos, mejores prácticas y técnicas avanzadas.
Aprende a usar encabezados y párrafos HTML correctamente. Guía completa con ejemplos prácticos, jerarquía semántica, accesibilidad y mejores prácticas SEO.
Domina los enlaces y anclas HTML. Aprende a crear navegación web efectiva con ejemplos prácticos, atributos avanzados, accesibilidad y mejores prácticas SEO.