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 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.