¿Qué es HTML?
Al finalizar este tema
Podrás explicar qué es HTML y crear tu propia página web sencilla utilizando etiquetas.
Una página web es un documento
Todas las páginas web que se ven en el navegador son, en realidad, un documento. El lenguaje utilizado para escribir este documento es HTML (HyperText Markup Language).
No es un "lenguaje de programación". HTML es un lenguaje de marcado, es decir, un lenguaje que indica la estructura y el significado del contenido. Su función es informar al navegador: "esto es un título", "esto es un párrafo", "esto es un enlace".
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Hola</h1>
<p>Esta es una página web creada con HTML.</p>
</body>
</html>Guarde este archivo como index.html y ábralo en el navegador para ver el título y los párrafos. No necesita un servidor.
Principio de las etiquetas
La esencia de HTML son las etiquetas. Estas se encierran entre corchetes angulares (< >) para definir el significado del contenido.
<!-- Etiquetas de título: h1 (la mayor) ~ h6 (la menor) -->
<h1>Título grande</h1>
<h2>Título mediano</h2>
<!-- Etiqueta de párrafo -->
<p>Este es un párrafo.</p>
<!-- Etiqueta de enlace: URL en el atributo href -->
<a href="https://google.com">Ir a Google</a>
<!-- Etiqueta de imagen: sin etiqueta de cierre -->
<img src="photo.jpg" alt="Descripción de la foto">
<!-- Etiqueta de lista -->
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>La mayoría de las etiquetas se componen de etiqueta de apertura + contenido + etiqueta de cierre, como <p>contenido</p>. También hay algunas que no tienen etiqueta de cierre, como <img>.
Recuerde la estructura
Todos los documentos HTML tienen la misma estructura:
<!DOCTYPE html> <!-- Declara que es un documento HTML5 -->
<html> <!-- Raíz que envuelve todo el documento -->
<head> <!-- Información no visible (título, configuración) -->
<title>Título de la pestaña</title>
</head>
<body> <!-- Todo el contenido visible en pantalla -->
<h1>Inicio del contenido</h1>
</body>
</html><head> contiene metadatos, como el título de la pestaña del navegador, la codificación de caracteres y la vinculación de CSS, mientras que <body> contiene el contenido que el usuario ve realmente. Esta estructura es la misma para cualquier sitio web.
→ Aplicado a Bio: DevBench — Fundamentos de HTML y CSS