Habíamos mencionado que la estructura de un documento HTML debía contener siempre dos etiquetas HTML principales: la cabecera de la página o <head> y el cuerpo de la página o <body> . El primero de ellos, del que hablaremos en este apartado, se encarga de contener las etiquetas HTML de metadatos (información sobre el documento) así como establecer relaciones con otros documentos. El segundo de ellos, la etiqueta <body> de la que hablaremos más adelante, se encarga de la parte visual que verá el usuario en el navegador.
Cabecera del documento
Existen varias etiquetas que se pueden utilizar en la sección <head> del documento HTML. Veámoslas en una tabla:
| Etiqueta HTML | ¿Donde se pueden usar? | Descripción | ||
|---|---|---|---|---|
<title> |
✅ <head> |
❌ <body> |
Indica el título de la página (pestaña del navegador o título de resultados en Google). | |
<base> |
✅ <head> |
❌ <body> |
URL base de los enlaces (usado para gestionar rutas relativas). | |
<link> |
✅ <head> |
❌ <body> |
Establece una relación del documento actual con otro externo. | Ver etiqueta link |
<meta> |
✅ <head> |
❌ <body> |
Establece un metadato específico en el documento actual. | Ver etiqueta meta |
<style> |
✅ <head> |
✅ <body> |
Crea estilos CSS que afectarán únicamente al documento actual. | |
<script> |
✅ <head> |
✅ <body> |
Indica un script a cargar o ejecutar en la página actual. | |
Existen dos etiquetas que tradicionalmente solían incluirse en la cabecera <head> de un documento HTML. Sin embargo, actualmente también pueden utilizarse en el cuerpo de la página. Hablamos de las etiquetas <style> y <script>.
- La etiqueta
<style>sirve para incluir estilos CSS en la propia página HTML. - La etiqueta
<script>sirve para incluir código Javascript en la propia página HTML (o de forma externa), pero tiene una explicación mucho más extensa y la retomaremos más adelante.
La etiqueta title
En el interior de la etiqueta <head> es aconsejable, como mínimo, indicar siempre las siguientes dos etiquetas:
<head>
<title>Título del documento</title>
<meta charset="utf-8" />
</head>La etiqueta <title> sirve para indicar un título de nuestro documento. Es una etiqueta que debe aparecer de forma obligatoria en un documento HTML, ya que siempre debería tener un título. El título puede servir para varias cosas:
- Determinará el título de la ventana o pestaña del navegador.
- Si la página se indexa en Google, es muy posible que use ese título para el resultado en el buscador.
- Es un título identificativo que pueden usarlo bots o sistemas automáticos que lean la página.
La etiqueta meta
En este ejemplo, también hemos incluído la etiqueta <meta> más básica que existe. Es una etiqueta para indicar al navegador que utilice la codificación UTF-8 para mostrar el texto. Es muy importante utilizar siempre de forma coherente una misma codificación en todos nuestros documentos, de esta forma evitaremos problemas con vocales acentuadas, o carácteres como ñ , ¿ , ¡ u otros.
Para evitar este tipo de problemas, se recomienda revisar los siguientes pasos:
- Utilizar la etiqueta
<meta charset="utf-8">en la cabecera del documento. - Guardar el archivo HTML con codificación UTF-8 en las opciones del editor que utilicemos.
- Si aún tenemos problemas de codificación, revisar la configuración del servidor web (server-side).
De esta forma reducimos la probabilidad de tener problemas de este tipo.
En resumen, con la etiqueta <meta> se pueden indicar aspectos generales, información o metadatos para que el documento HTML tenga en cuenta. Existen muchísimas más etiquetas <meta> a parte de la etiqueta <meta charset>, que es una de las más básicas. Las analizaremos más adelante.
► Aprende más sobre la etiqueta meta
La etiqueta base
La etiqueta <base> se puede utilizar en el documento HTML para establecer una ruta base de los enlaces relativos utilizados en nuestro documento. Probablemente, esto se entienda mejor después de ver el apartado de enlaces o hipervínculos.
Imaginemos el siguiente ejemplo de la página https://manz.dev/:
<head>
<title>Documento HTML sin usar base</title>
</head>
<body>
<a href="/index.html">Página de inicio</a>
<a href="/streams/">Página de streams</a>
</body>En este caso, el primer enlace nos lleva a la ruta https://manz.dev/index.html, mientras que el segundo enlace nos lleva a la página https://manz.dev/streams/. Simplemente, el enlace se añade al final de la URL donde nos encontramos.
Veamos ahora un ejemplo donde utilizamos la etiqueta <base>:
<head>
<title>Documento HTML utilizando base</title>
<base href="https://manz.dev/links/" target="_blank">
</head>
<body>
<a href="index.html">Página de inicio</a>
<a href="./streams/">Página de streams</a>
</body>Ahora, aunque nos encontremos en la página https://manz.dev/, hemos establecido la URL base https://manz.dev/links para los enlaces, por lo que el primer enlace del documento nos llevará a https://manz.dev/links/index.html y el segundo enlace nos llevará a la página https://manz.dev/links/streams/. Como se puede ver, la ruta establecida en la etiqueta <base> (debe ser ruta relativa) se utiliza como base de las URLs utilizadas. En el caso de utilizar una ruta absoluta o una ruta relativa que comience por /, no se tendrá en cuenta la ruta indicada en <base>.
Además, también hemos establecido el atributo target a _blank, por lo que los enlaces se abrirán en una pestaña nueva. El atributo target nos permite realizar ciertas tareas dependiendo de su valor:
| Atributo target | Descripción |
|---|---|
_self |
El enlace se abre en la misma pestaña. Es el valor por defecto, incluso si se omite el atributo. |
_blank |
El enlace se abre en una nueva pestaña o ventana. |
Otros valores como _parent o _top permiten abrir el enlace en un contexto superior al actual, si existe. En caso contrario, se actua como si se hubiera indicado un valor _self.
¿Quién soy yo?
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev