metadatos.rst 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. =======================
  2. Metadatos del documento
  3. =======================
  4. Los metadatos de los documentos HTML se incluyen en la etiqueta ``<head>``.
  5. El elemento ``head``
  6. ====================
  7. Dentro de este elemento se incluyen los metadatos del documento HTML.
  8. El elemento ``<title>`` es obligatorio.
  9. El elemento ``title``
  10. =====================
  11. Representa el título del documento HTML.
  12. El elemento ``base``
  13. ====================
  14. Sirve para especificar la URL base del documento que utilizará como
  15. referencia para localizar archivos utilizando URLs relativas.
  16. .. code-block:: html
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20. <title>Esto es un ejemplo del elemento &lt;base&gt;</title>
  21. <base href="https://www.example.com/news/index.html">
  22. </head>
  23. <body>
  24. <p>Visita las <a href="archives.html">entradas</a>.</p>
  25. </body>
  26. </html>
  27. En el anterior ejemplo el enlace a las entradas nos dirige a `https://www.example.com/news/archives.html`_,
  28. pues toma el directorio ``news`` (``https://www.example.com/news/``) como base.
  29. El elemento ``link``
  30. ====================
  31. Permite enlazar el documento a otros recursos.
  32. El destino de los enlaces se especifica en el atributo ``href``, que debe
  33. estar presente y contener una URL válida.
  34. El elemento ``<link>`` también debe contenter el atributo ``rel``, que representa
  35. el tipo del recurso al que se enlaza. Por ejemplo, ``rel="license"`` indica que
  36. el recurso enlazado es una licencia de copyright. Podéis encontrar la `lista
  37. de todos los tipos de enlaces <https://www.w3.org/TR/html51/links.html#sec-link-types>`__
  38. en la especificación de HTML 5.1.
  39. A continuación, se muestran todos los posibles atributos que puede contener el
  40. elemento ``<link>``:
  41. - ``href``. URL del recurso.
  42. - ``crossorigin``. Se usa para configurar las peticiones para los
  43. para los archivos que var a ser utilizados. Las peticiones pueden
  44. requerir de credenciales o no. Este atributo tiene los
  45. siguientes posibles valores:
  46. - ``anonymous``. No requiere credenciales.
  47. - ``use-credentials``. Requiere de credenciales; lo que significa
  48. que la petición suministrará los credenciales para recuperar
  49. el archivo.
  50. .. code-block:: html
  51. <head>
  52. <title>La etiqueta link</title>
  53. <link crossorigin="anonymous" rel="stylesheet" href="http://www.example.com/css/screen.css" type="text/css">
  54. </head>
  55. - ``rel``. El tipo de recurso al que se enlaza
  56. - ``rev``. Contiene una URL que expresa la relación inversa con un link.
  57. A difrerencia de ``rel`` que indica una relación directa
  58. («como está el enlace relacionado conmigo»), el atributo ``rev``
  59. permite describir relaciones en la dirección opuesta
  60. («como estoy relacionado con este enlace»). Dados varios documentos,
  61. cada uno conteniendo un capítulo de un libro, los atributos ``rel`` y
  62. ``rev`` se utilizan de la siguiente manera. En el siguiente ejemplo estamos
  63. situados en el documento correspondiente al capítulo 2.
  64. .. code-block:: html
  65. <head>
  66. <title>Capítulo 2</title>
  67. <link href="capitulo1.html" rel="prev" rev="next">
  68. <link href="capitulo3.html" rel="next" rev="prev">
  69. </head>
  70. - ``media``. Indica el tipo de dispositivo o medio para el cual el recurso
  71. está optimizado.
  72. .. code-block:: html
  73. <head>
  74. <title>La etiqueta link</title>
  75. <link rel="stylesheet" type="text/css" href="normal.css">
  76. <link rel="stylesheet" type="text/css" href="impresion.css" media="print">
  77. </head>
  78. - ``hreflang``. El idioma del recurso enlazado.
  79. - ``type``. El `tipo MIME <https://www.w3.org/TR/html51/infrastructure.html#mime-type>`__
  80. del contenido del enlace. Debe contener un
  81. `tipo MIME válido <https://www.w3.org/TR/html51/infrastructure.html#valid-mime-type>`__.
  82. .. code-block:: html
  83. <head>
  84. <title>La etiqueta link</title>
  85. <link href="http://www.example.com/feeds/all-es.atom.xml" type="application/atom+xml" rel="alternate" title="es Translation Atom Feed">
  86. <link rel="stylesheet" href="http://www.example.com/css/screen.css" type="text/css">
  87. </head>
  88. - ``sizes``. Tamaño de iconos en píxeles (cuando ``rel="icon"``).
  89. .. code-block:: html
  90. <head>
  91. <title>La etiqueta link</title>
  92. <link rel="shortcut icon" type="image/png" href="http://www.freakspot.net/programas/ducker/favicon.png" sizes="16x16">
  93. <link rel="shortcut icon" type="image/x-icon" href="http://www.freakspot.net/programas/ducker/favicon.ico" sizes="32x32 48x48">
  94. </head>
  95. El elemento ``meta``
  96. ====================
  97. El elemento ``<meta>`` representa diferentes tipos de metadatos que no pueden
  98. ser expresados mediante los elementos ``<title>``, ``<base>``, ``<link>``,
  99. ``<style>`` y ``<script>``.
  100. Se puede utilizar con el atributo ``charset`` para establecer la
  101. codificación de caracteres que se utilizará en el documento.
  102. .. code-block:: html
  103. <head>
  104. <title>La etiqueta meta</title>
  105. <meta charset="UTF-8">
  106. </head>
  107. Para este mismo propósito se puede utilizar también el atributo
  108. ``http-equiv``.
  109. .. code-block:: html
  110. <head>
  111. <title>La etiqueta meta</title>
  112. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  113. </head>
  114. El atributo ``http-equiv``, entre otras cosas, permite también especificar
  115. la frecuencia con la que el navegador recargará la página. El siguiente
  116. ejemplo recarga la página cada 30 segundos.
  117. .. code-block:: html
  118. <head>
  119. <title>La etiqueta meta</title>
  120. <meta http-equiv="refresh" content="30">
  121. </head>
  122. En la etiqueta ``<meta>`` también se puede especificar el atributo
  123. ``name``, que en combinación con el atributo ``content``, permite
  124. especificar metadatos de forma libre por el autor. No obstante,
  125. existen varios nombres de valores estándares para el atributo ``name``:
  126. - ``application-name``. Se usa para especificar el nombre de la aplicación
  127. web que representa la página. Si la página no forma parte de una
  128. aplicación web, no debería usarse este valor.
  129. - ``author``. Indica el nombre de uno de los autores de la página web.
  130. Si existen varios autores, pueden utilizarse varias etiquetas ``<meta>``.
  131. - ``description``. Permite proporcionar una descripción del documento.
  132. - ``generator``. Indica el programa utilizado para generar el documento
  133. HTML. Este valor no debe utilizarse en páginas que no hayan sido
  134. generadas mediante software, por ejemplo, en páginas creadas con un
  135. editor de texto.
  136. - ``keywords``. Permite especificar valores separados por comas, con
  137. datos descriptivos de la página web. Anteriormente solían ser utilizados
  138. por los motores de búsqueda para proporcionar resultados relevantes,
  139. pero con esto muchas veces se engañaba al motor de búsqueda.
  140. .. code-block:: html
  141. <head>
  142. <title>La etiqueta meta</title>
  143. <meta charset="utf-8">
  144. <meta name="viewport" content="width=device-width,initial-scale=1">
  145. <meta name="generator" content="Pelican">
  146. <meta name="author" content="Jorge Maldonado Ventura">
  147. <meta name="description" content="Ejemplo de uso del atributo name del elemento HTML meta">
  148. <meta name="keywords" content="html,html5,meta,name,content,ejemplo">
  149. </head>
  150. Existen más valores del atributo ``name`` para la etiqueta ``<meta>``.
  151. Podéis encontrarlos y registrar los vuestros propios en la siguiente
  152. página: https://wiki.whatwg.org/wiki/MetaExtensions.
  153. El elemento ``style``
  154. =====================
  155. Permite incluir información de estilo en documentos HTML. Permite
  156. modificar la apariencia de la página.
  157. Se puede incluir el atributo ``type`` para especificar el lenguaje de estilo.
  158. Si no está presente el tipo, su valor por defecto es ``text/css``.
  159. El atributo ``media`` indica los dispositivos o medios a los que el estilo
  160. se aplica.
  161. .. code-block:: html
  162. <!DOCTYPE html>
  163. <html>
  164. <head>
  165. <title>Mi libro favorito</title>
  166. <style>
  167. body { color: black; background: white; }
  168. em { font-style: normal; color: red; }
  169. </style>
  170. </head>
  171. <body>
  172. <p>Mi libro <em>favorito</em> es <cite>Resurrección</cite>. Es una
  173. <i>novela</i> que versa sobre la injusticia de las leyes humanas y la
  174. hipocresía de la iglesia institucionalizada.</p>
  175. </body>
  176. </html>
  177. .. _https://www.example.com/news/archives.html: https://www.example.com/news/archives.html