HTML para principiantes (Parte 19): La sección HEAD

Redes sociales

El elemento <head> es un contenedor de metadatos (datos de datos).

Los metadatos son datos sobre el propio documento HTML. Los metadatos no se visualizan cuando se muestra una página web en el navegador.HEAD - HTML

En los metadatos definirás el título de documentos, los estilos utilizados, enlaces, scripts empleados y algunas otras informaciones.

Las etiquetas HTML que puedes emplear para definir metadatos son: <title>, <style>, <meta>, <link>, <script> y <base>.

¿Puedo omitir las etiquetas <html> y <body>?

En HTML5, puedes omitir las etiquetas <html>, <body> y <head>.

El siguiente código HTML5 es totalmente válido:

<!DOCTYPE html>
<title>Título de la página</title>
<h1>Esto es un encabezamiento</h1>
<p>Esto es un párrafo.</p>

Sin embargo, yo no te aconsejo que omitas las etiquetas <html> y <body>. El elemento <html> muestra el origen del documento, además es el lugar indicado para que declares el lenguaje del documento:

<!DOCTYPE html>
<html lang="es-ES">

Que especifiques el lenguaje es importante para facilitar la accesibilidad y correcta clasificación de tu web de algunas aplicaciones, como son por ejemplo, los motores de búsqueda.

Si omites <html> y <body> puedes hacer que falle, por código mal escrito, el software DOM/XML.

Por último la omisión de <body> puede provocar errores en navegadores antiguos como IE9.

Omitiendo <head>

En HTML5, puedes omitir también la etiqueta <head>.

Por defecto, los navegadores interpretarán cualquier elemento anterior a la etiqueta <body>, como parte del HEAD.

Si lo deseas, pueden reducir la complejidad del código HTML, omitiendo la etiqueta <head>:

Ejemplo

<!DOCTYPE html>
<html>
<title>Título de la página</title>
<body>
<h1>Esto es un encabezamiento</h1>
<p>Esto es un párrafo.</p>
</body>
</html>

El elemento HTML  <title>

Con el elemento <title> defines el título del documento.

El elemento <title> es imprescindible en cualquier documento HTML/XHTML.

Utilizando el elemento <title>:

  • Mostrarás un título en la pestaña del navegador.
  • Proporcionarás un título para la página web cuando sea añadida a favoritos.
  • Darás un título a la página cuando aparezca en los resultados de una búsqueda en los motores de búsqueda.

El elemento HTML <style>

Deberás utilizar el elemento <style> para definir la información sobre los estilos del documento HTML.

En el interior del elemento <style> especificarás como serán mostrados por el navegador los elementos visibles de tu página web.

Ejemplo:

<!DOCTYPE html>
<html>
<title>Título de la página</title>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
<body>
  <h1>Esto es un encabezamiento</h1>
  <p>Esto es un párrafo.</p>
</body>
</html>

Temas WordPress para todo el mundo

El elemento HTML <link>

Mediante el elemento <link> definirás el enlace a un recurso externo.
El elemento <link> es muy utilizado para acceder a hojas de estilo.

Ejemplo:

<!DOCTYPE html>
<html>
<title>Título de la página</title>
<link rel="stylesheet" href="mystyle.css">
<body>
  <h1>Esto es un encabezado</h1>
  <p>Esto es un párrafo.</p>
</body>
</html>

El elemento HTML <meta>

Utilizarás el elemento <meta> para especificar una descripción, las palabras clave, el autor, y algunas otras informaciones de la página.

Los metadatos son utilizados por los navegadores (le indican cómo mostrar el contenido), por los motores de búsqueda (palabras clave), y por otros servicios web.

Para indicar las palabras claves

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Para especificar un descripción del contenido de la página

<meta name="description" content="Tutorial gratuito de HTML y CSS">

Para definir el juego de caracteres utilizado

<meta charset="UTF-8">

Para indicar el autor de la página

<meta name="author" content="Jorge Lamarque">

Para recargar la página, por ejemplo cada 60 segundos

<meta http-equiv="refresh" content="60">

Ejemplo

<!DOCTYPE html>
<html>
<title> Utilización de metadatos </title>
<meta name="description" content="Tutorial web gratuito">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Jorge Lamarque">
<meta charset="UTF-8">
<body>
<p>Toda la información meta va antes de la etiquera body.</p>
</body>
</html>

El elemento HTML <script>

Debes utilizar el elemento <script> para definir código Java-Script que deberá ejecutarse del lado del cliente.

Ejemplo

El siguiente script muestra el texto “¡Hola Java-Script!” en un elemento HTML con el id=”demo”, al hacer clic en un botón.

<!DOCTYPE html>
<html>
<title>Webdisenia .:. Ejemplo Java-Script</title>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "¡Hola Java-Script!";
}
</script>
<body>
<h1>Mi página web</h1>
<p id="demo">Un párrafo</p>
<button type="button" onclick="myFunction()">Clic aquí</button>
</body>
</html>

El elemento HTML <base>

La etiqueta <base>, te permite especificar una URL por defecto y un destino por defecto para todos los enlaces relativos de la página web.

Ejemplo

<!DOCTYPE html>
<html>
<title>Webdisenia .:. Ejemplo metadatos</title>
<base href="http://www.webdisenia.com/images/" target="_blank">
<body>
<img src="html5.png">
<p>
Como se ha especificado una URL base, el navegador busca "html5.png" en "http://www.webdisenia.com/images/html5.png"
</p>
<p><a href="http://www.webdisenia.com">Webdisenia</a>
</p>
<p>
El enlace anterior se abre en una ventana nueva, ya que el destino target especificado en base es "_blank".
</p>
</body>
</html>

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *