TeoríaFundamentos de HTML

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado que define la estructura y el contenido de una página web. Los navegadores (Chrome, Firefox, Safari, Edge) interpretan el código HTML y lo muestran visualmente al usuario.

Estructura de un documento HTML

Todo documento HTML sigue una estructura jerárquica obligatoria:

<!DOCTYPE html> — Declara que el documento utiliza HTML5, la versión actual del estándar. Siempre debe ser la primera línea del archivo.
<html> — Elemento raíz que envuelve todo el contenido de la página.
<head> — Contiene metadatos (información sobre la página que no se muestra directamente): título, codificación de caracteres, enlaces a hojas de estilo, etc.
<title> — Define el título que aparece en la pestaña del navegador.
<meta charset="UTF-8"> — Especifica la codificación de caracteres para que se muestren correctamente las letras acentuadas, la ñ, etc.
<body> — Contiene todo el contenido visible de la página: textos, imágenes, enlaces, etc.

Etiquetas esenciales del cuerpo

<h1> — Título principal de la página. Solo debe haber uno por página.
<p> — Párrafo de texto.

Principios importantes

Las etiquetas se abren (<etiqueta>) y se cierran (</etiqueta>).
Las etiquetas se anidan unas dentro de otras, formando un árbol (el DOM).
La indentación (sangría) no afecta al resultado, pero mejora la legibilidad del código.

<>

Etiquetas

Los bloques básicos de HTML. Se abren y se cierran para envolver contenido.

{}

Atributos

Información adicional dentro de la etiqueta de apertura, como lang o charset.

DOM

Estructura jerárquica

Las etiquetas se anidan formando un árbol que el navegador interpreta.

2

Ejemplo de códigoTu primera página web

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página Web</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
</body>
</html>

3

PruébaloVe el resultado del código

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera
    página web.</p>
</body>
</html>

Resultado en el navegador

¡Hola, mundo!

Esta es mi primera página web.

4

Ejercicio prácticoPon en práctica lo aprendido

Crea tu primera página web

Crea una carpeta llamada mi-sitio-web en tu ordenador.
Dentro de esa carpeta, crea un archivo llamado index.html.
Escribe la estructura HTML básica con <!DOCTYPE html>, <html>, <head>, <title> y <body>.
En el <body>, añade un título <h1> con tu nombre y un párrafo <p> que te presente brevemente.
Abre el archivo en un navegador haciendo doble clic sobre él y comprueba el resultado.
Modifica el contenido del <title> y observa cómo cambia el texto en la pestaña del navegador.