El documento y sus metadatos
El esqueleto de toda página y lo que va en <head>.
<html>: La raíz del documento.
<head>: La cabecera del documento.
<title>: El título del documento.
<meta>: Metadatos que no tienen elemento propio.
- El esqueleto de toda página y lo que va en <head>: información para el navegador y los buscadores que no se ve en la página.
- Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
- Esencial. La raíz del documento: contiene todo lo demás. Lleva el idioma de la página en lang, que usan los lectores de pantalla y los traductores.
- 📌 Nota. Delante va siempre <!DOCTYPE html>: avisa de que es HTML moderno.
- Esencial. La cabecera del documento: metadatos, título, hojas de estilo y scripts. Nada de lo que hay aquí se ve en la página.
Introducción
El esqueleto de toda página y lo que va en <head>: información para el navegador y los buscadores que no se ve en la página.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
<html>
Esencial. La raíz del documento: contiene todo lo demás. Lleva el idioma de la página en lang, que usan los lectores de pantalla y los traductores.
📌 Nota. Delante va siempre <!DOCTYPE html>: avisa de que es HTML moderno.
<head>
Esencial. La cabecera del documento: metadatos, título, hojas de estilo y scripts. Nada de lo que hay aquí se ve en la página.
<title>
Esencial. El título del documento: sale en la pestaña del navegador, en los marcadores y en los resultados de los buscadores. Uno por página, corto y distinto en cada página.
<meta>
Esencial. Metadatos que no tienen elemento propio: la codificación de caracteres, la vista en móvil, la descripción para buscadores… Es un elemento vacío.
Valores: charset, name + content, property (Open Graph)
<link>
Esencial. Relaciona el documento con otro recurso. Sobre todo, enlaza la hoja de estilos y el icono de la pestaña (favicon). Es un elemento vacío.
Valores: rel (stylesheet, icon, preload…), href
<style>
CSS escrito dentro del propio HTML. Sirve para pruebas; en un sitio real, el CSS va en un fichero aparte enlazado con <link>.
<script>
Esencial. Código JavaScript, escrito dentro o en un fichero aparte con src. Con defer se ejecuta cuando la página está lista, sin bloquearla.
Valores: src, defer, type="module"
📌 Nota. En tus páginas: <script src="js/main.js" defer></script> en el <head>.
<noscript>
Lo que se muestra solo si el navegador tiene JavaScript desactivado.
<base>
La dirección base para todas las rutas relativas del documento. Uno como mucho, en <head>. Se usa poco: cambia el sentido de todos los enlaces.
<body>
Esencial. El cuerpo del documento: todo lo que se ve en la página. Solo hay uno, justo después de <head>.