jorgesumle
/
referencia-html


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							=======================
Metadatos del documento
=======================

Los metadatos son datos que describen otros datos.

El elemento ``head``
====================

Dentro de este elemento se incluyen los metadatos del documento HTML.
El elemento ``<title>`` es obligatorio.

El elemento ``title``
=====================

Representa el título del documento HTML.

El elemento ``base``
====================

Sirve para especificar la URL base del documento que se utilizará como
referencia para localizar archivos utilizando URLs relativas.

.. code-block:: html

   <!DOCTYPE html>
   <html>
     <head>
       <title>Esto es un ejemplo del elemento &lt;base&gt;</title>
       <base href="https://www.example.com/news/index.html">
     </head>
     <body>
       <p>Visita las <a href="archives.html">entradas</a>.</p>
     </body>
   </html>

En el anterior ejemplo el enlace a las entradas nos dirige a `https://www.example.com/news/archives.html`_,
pues toma el directorio ``news`` (``https://www.example.com/news/``) como base.

El elemento ``link``
====================

Permite enlazar el documento a otros recursos.

El destino de los enlaces se especifica en el atributo ``href``, que debe
estar presente y contener una URL válida.

El elemento ``<link>`` también debe contenter el atributo ``rel``, que representa
el tipo del recurso al que se enlaza. Por ejemplo, ``rel="license"`` indica que
el recurso enlazado es una licencia de copyright. Podéis encontrar la `lista
de todos los tipos de enlaces <https://www.w3.org/TR/html51/links.html#sec-link-types>`__
en la especificación de HTML 5.1.

A continuación, se muestran todos los posibles atributos que puede contener el
elemento ``<link>``:

- ``href``. URL del recurso.
- ``crossorigin``. Se usa para configurar las peticiones
  para los archivos que van a ser utilizados. Las peticiones pueden
  requerir de credenciales o no. Este atributo tiene los
  siguientes posibles valores:

    - ``anonymous``. No requiere credenciales.
    - ``use-credentials``. Requiere de credenciales; lo que significa
      que la petición suministrará los credenciales para recuperar
      el archivo.

  .. code-block:: html

     <head>
       <title>La etiqueta link</title>
       <link crossorigin="anonymous" rel="stylesheet" href="http://www.example.com/css/screen.css" type="text/css">
     </head>

- ``rel``. El tipo de recurso al que se enlaza
- ``rev``. Contiene una URL que expresa la relación inversa con un link.
  A diferencia de ``rel`` que indica una relación directa
  («como está el enlace relacionado conmigo»), el atributo ``rev``
  permite describir relaciones en la dirección opuesta
  («como estoy relacionado con este enlace»). Dados varios documentos,
  cada uno conteniendo un capítulo de un libro, los atributos ``rel`` y
  ``rev`` se utilizan de la siguiente manera. En el siguiente ejemplo estamos
  situados en el documento correspondiente al capítulo 2.

  .. code-block:: html

     <head>
       <title>Capítulo 2</title>
       <link href="capitulo1.html" rel="prev" rev="next">
       <link href="capitulo3.html" rel="next" rev="prev">
     </head>

- ``media``. Indica el tipo de dispositivo o medio para el cual el recurso
  está optimizado.

  .. code-block:: html

     <head>
       <title>La etiqueta link</title>
       <link rel="stylesheet" type="text/css" href="normal.css">
       <link rel="stylesheet" type="text/css" href="impresion.css" media="print">
     </head>

- ``hreflang``. El idioma del recurso enlazado.

  .. code-block:: html

    <link hreflang="es" href="http://es.example.com/"/>

- ``type``. El `tipo MIME <https://www.w3.org/TR/html51/infrastructure.html#mime-type>`__
  del contenido del enlace. Debe contener un
  `tipo MIME válido <https://www.w3.org/TR/html51/infrastructure.html#valid-mime-type>`__.

  .. code-block:: html

     <head>
       <title>La etiqueta link</title>
       <link href="http://www.example.com/feeds/all-es.atom.xml" type="application/atom+xml" rel="alternate" title="es Translation Atom Feed">
       <link rel="stylesheet" href="http://www.example.com/css/screen.css" type="text/css">
     </head>

- ``sizes``. Tamaño de iconos en píxeles (cuando ``rel="icon"``).

  .. code-block:: html

     <head>
       <title>La etiqueta link</title>
       <link rel="shortcut icon" type="image/png" href="http://www.freakspot.net/programas/ducker/favicon.png" sizes="16x16">
       <link rel="shortcut icon" type="image/x-icon" href="http://www.freakspot.net/programas/ducker/favicon.ico" sizes="32x32 48x48">
     </head>

El elemento ``meta``
====================

El elemento ``<meta>`` representa diferentes tipos de metadatos que no pueden
ser expresados mediante los elementos ``<title>``, ``<base>``, ``<link>``,
``<style>`` y ``<script>``.

Se puede utilizar con el atributo ``charset`` para establecer la
codificación de caracteres que se utilizará en el documento.

  .. code-block:: html

     <head>
       <title>La etiqueta meta</title>
       <meta charset="UTF-8">
     </head>

Para este mismo propósito se puede utilizar también el atributo
``http-equiv``.

  .. code-block:: html

     <head>
       <title>La etiqueta meta</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     </head>

El atributo ``http-equiv``, entre otras cosas, permite también especificar
la frecuencia con la que el navegador recargará la página. El siguiente
ejemplo recarga la página cada 30 segundos.

  .. code-block:: html

     <head>
       <title>La etiqueta meta</title>
       <meta http-equiv="refresh" content="30">
     </head>

En la etiqueta ``<meta>`` también se puede especificar el atributo
``name``, que en combinación con el atributo ``content``, permite
especificar metadatos de forma libre por el autor. No obstante,
existen varios nombres de valores estándares para el atributo ``name``:

- ``application-name``. Se usa para especificar el nombre de la aplicación
  web que representa la página. Si la página no forma parte de una
  aplicación web, no debería usarse este valor.
- ``author``. Indica el nombre de uno de los autores de la página web.
  Si existen varios autores, pueden utilizarse varias etiquetas ``<meta>``.
- ``description``. Permite proporcionar una descripción del documento.
- ``generator``. Indica el programa utilizado para generar el documento
  HTML. Este valor no debe utilizarse en páginas que no hayan sido
  generadas mediante software, por ejemplo, en páginas creadas con un
  editor de texto.
- ``keywords``. Permite especificar valores separados por comas, con
  datos descriptivos de la página web. Anteriormente solían ser utilizados
  por los motores de búsqueda para proporcionar resultados relevantes,
  pero con esto muchas veces se engañaba al motor de búsqueda.


  .. code-block:: html

     <head>
       <title>La etiqueta meta</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <meta name="generator" content="Pelican">
       <meta name="author" content="Jorge Maldonado Ventura">
       <meta name="description" content="Ejemplo de uso del atributo name del elemento HTML meta">
       <meta name="keywords" content="html,html5,meta,name,content,ejemplo">
     </head>

Existen más valores del atributo ``name`` para la etiqueta ``<meta>``.
Podéis encontrarlos y registrar los vuestros propios en la siguiente
página: https://wiki.whatwg.org/wiki/MetaExtensions.

El elemento ``style``
=====================

Permite incluir información de estilo en documentos HTML. Permite
modificar la apariencia de la página.

Se puede incluir el atributo ``type`` para especificar el lenguaje de estilo.
Si no está presente el tipo, su valor por defecto es ``text/css``.

El atributo ``media`` indica los dispositivos o medios a los que el estilo
se aplica.

Se puede utilizar también el atributo ``nonce`` para representar un *nonce
criptográfico* («número usado una vez»), que puede ser usado por la `Content
Security Policy <https://www.w3.org/TR/CSP3/>`__ para determinar si el
estilo especificado será aplicado al documento.

  .. code-block:: html

     <!DOCTYPE html>
     <html lang="es">
       <head>
         <meta charset="utf-8">
         <title>Mi libro favorito</title>
         <style>
           body { color: black; background: white; }
           em { font-style: normal; color: red; }
         </style>
       </head>
       <body>
         <p>Mi libro <em>favorito</em> es <cite>Resurrección</cite>. Es una
         <i>novela</i> que versa sobre la injusticia de las leyes humanas y la
         hipocresía de la iglesia institucionalizada.</p>
       </body>
     </html>

.. _https://www.example.com/news/archives.html: https://www.example.com/news/archives.html