agrupando-contenido.rst 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
  1. ===================
  2. Agrupando contenido
  3. ===================
  4. El elemento ``p``
  5. =================
  6. Representa un párrafo.
  7. .. code-block:: html
  8. <p>Un párrafo es una unidad comunicativa formada por un conjunto de
  9. oraciones secuenciales que trata un mismo tema.</p>
  10. .. code-block:: html
  11. <fieldset>
  12. <legend>Información personal</legend>
  13. <p>
  14. <label>Nombre: <input name="n"></label>
  15. <label><input name="anon" type="checkbox"> Mantener anónimo</label>
  16. </p>
  17. <p><label>Dirección: <textarea name="a"></textarea></label></p>
  18. </fieldset>
  19. .. code-block:: html
  20. <p>No me contéis más cuentos,<br>
  21. que vengo de muy lejos<br>
  22. y sé todos los cuentos.<br>
  23. No me contéis más cuentos.</p>
  24. El elemento ``<p>`` no debería ser usado cuando existe un elemento más
  25. específico y apropiado.
  26. El siguiente ejemplo es técnicamente correcto...
  27. .. code-block:: html
  28. <section>
  29. <!-- ... -->
  30. <p>Modificado: 2002-05-24</p>
  31. <p>Autor: nombre@ejemplo.com</p>
  32. </section>
  33. Sin embargo, es más correcto utilizar etiquetas más concretas...
  34. .. code-block:: html
  35. <section>
  36. <!-- ... -->
  37. <footer>Modificado: 2002-05-24</footer>
  38. <address>Autor: nombre@ejemplo.com</address>
  39. </section>
  40. .. code-block:: html
  41. <section>
  42. <!-- ... -->
  43. <footer>
  44. <p>Modificado: 2002-05-24</p>
  45. <address>Autor: nombre@ejemplo.com</address>
  46. </footer>
  47. </section>
  48. Los elementos de listas (en concreto, los elementos ``<ol>`` y ``<ul>``) no pueden ser hijos de elementos ``<p>``.
  49. En términos de HTML, un párrafo no es un concepto lógico, sino
  50. estructural. Según la especificación de HTML 5.1 en el siguiente ejemplo
  51. hay cinco párrafos: uno antes de la lista, uno para cada viñeta y otro después
  52. de la lista.
  53. .. code-block:: html
  54. <p>Por ejemplo, está fantástica oración tiene viñetas relacionadas con</p>
  55. <ul>
  56. <li>magos,
  57. <li>viajes en el tiempo y
  58. <li>telepatía,
  59. </ul>
  60. <p>y no tiene sentido.</p>
  61. Si quisieramos dar formato a ese párrafo «lógico», podríamos utilizar el
  62. elemento ``<div>`` en vez del elemento ``<p>``.
  63. .. code-block:: html
  64. <div>Por ejemplo, está fantástica oración tiene viñetas relacionadas con
  65. <ul>
  66. <li>magos,
  67. <li>viajes en el tiempo y
  68. <li>telepatía,
  69. </ul>
  70. y no tiene sentido.</div>
  71. El elemento ``hr``
  72. ==================
  73. Representa una división temática, por ejemplo, un
  74. cambio de escenario en una historia o una transición a otra dentro
  75. de una sección de un libro de referencia.
  76. .. code-block:: html
  77. <section>
  78. <h1>Communication</h1>
  79. <p>There are various methods of communication. This section
  80. covers a few of the important ones used by the project.</p>
  81. <hr>
  82. <p>Communication stones seem to come in pairs and have mysterious
  83. properties:</p>
  84. <ul>
  85. <li>They can transfer thoughts in two directions once activated
  86. if used alone.</li>
  87. <li>If used with another device, they can transfer one’s
  88. consciousness to another body.</li>
  89. <li>If both stones are used with another device, the
  90. consciousnesses switch bodies.</li>
  91. </ul>
  92. <hr>
  93. <p>Radios use the electromagnetic spectrum in the meter range and
  94. longer.</p>
  95. <hr>
  96. <p>Signal flares use the electromagnetic spectrum in the
  97. nanometer range.</p>
  98. </section>
  99. <section>
  100. <h1>Food</h1>
  101. <p>All food at the project is rationed:</p>
  102. <dl>
  103. <dt>Potatoes</dt>
  104. <dd>Two per day</dd>
  105. <dt>Soup</dt>
  106. <dd>One bowl per day</dd>
  107. </dl>
  108. <hr>
  109. <p>Cooking is done by the chefs on a set rotation.</p>
  110. </section>
  111. En el anterior ejemplo, no hay necesidad de usar el elemento ``<hr>``, puesto
  112. que los elementos ``<section>`` y ``<h1>`` implican un cambio temático por
  113. sí mismos.
  114. A continuación, se muestra un extracto de *Scholarium* de Claudia Gross. En
  115. el libro, el cambio de escena se representa con dos espacios antes del nuevo
  116. párrafo. Aquí se representa con el elemento ``<hr>``.
  117. .. code-block:: html
  118. <p>Subió las escaleras a toda prisa. La ventana de la habitación
  119. estaba abierta; la cerró de golpe y, por fin, encendió la luz.</p>
  120. <hr>
  121. <p>—Y si el cielo fuera amarillo como un limón, también lo querríais
  122. demostrar. ¿Conocéis la teoría de la doble verdad de Duns Escoto?
  123. Afirma que algo puede ser verdadero y falso a la vez, dependiendo
  124. únicamente del ángulo desde donde se mire. Y yo pregunto: ¿qué punto
  125. de vista sostenéis vosotros?</p>
  126. El elemento ``pre``
  127. ===================
  128. Representa un bloque de texto preformateado, en el cual la estructura se
  129. representa por convenciones tipográficas en vez de por elementos.
  130. A continuación, citamos algunos ejemplos de casos en los que el elemento
  131. ``<pre>`` podría ser usado:
  132. - Incluyendo un email, con párrafos rodeados de líneas en blanco, listas
  133. indicadas por líneas con una viñeta, etc.
  134. - Para incluir fragmentos de código, con una estructura acorde con las
  135. convenciones de ese lenguage.
  136. - Para mostrar arte ASCII.
  137. .. code-block:: html
  138. <pre>
  139. ,
  140. / \,,_ .'|
  141. ,{{| /}}}}/_.' _____________________________________________
  142. }}}}` '{{' '. / \
  143. {{{{{ _ ;, \ / Ladies and Gentlemen, \
  144. ,}}}}}} /o`\ ` ;) | |
  145. {{{{{{ / ( | this is ... |
  146. }}}}}} | \ | |
  147. {{{{{{{{ \ \ | |
  148. }}}}}}}}} '.__ _ | | _____ __ __ _ |
  149. {{{{{{{{ /`._ (_\ / | / ___/__ ______ / /_____ ______/ /_(_)____ |
  150. }}}}}}' | //___/ --=: \__ \/ / / / __ \/ __/ __ `/ ___/ __/ / ___/ |
  151. jgs `{{{{` | '--' | ___/ / /_/ / / / / /_/ /_/ (__ ) /_/ / /__ |
  152. }}}` | /____/\__, /_/ /_/\__/\__,_/____/\__/_/\___/ |
  153. | /____/ |
  154. | /
  155. \_____________________________________________/</pre>
  156. Para representar un bloque de código, el elemento ``<pre>`` puede ser
  157. usado con un elemento ``<code>``; para representar
  158. la salida de un programa, el elemento ``<pre>`` puede combinarse con el
  159. elemento ``<samp>``; y para
  160. indicar el texto que el usuario debe introducir, puede combinarse el elemento
  161. ``<pre>`` con el elemento ``<kbd>``.
  162. El siguiente ejemplo de código muestra combina los elementos ``<pre>`` y
  163. ``<code>`` para mostrar el código de una función.
  164. .. code-block:: html
  165. <p>Este es el constructor <code>Panel</code>:</p>
  166. <pre><code>function Panel(element, canClose, closeHandler) {
  167. this.element = element;
  168. this.canClose = canClose;
  169. this.closeHandler = function () { if (closeHandler) closeHandler() };
  170. }</code></pre>
  171. El en siguiente fragmento de código los elementos ``<samp>`` y ``<kbd>`` se
  172. combinan para mostrar una sesión de Zork I.
  173. .. code-block:: html
  174. <pre><samp>You are in an open field west of a big white house with a boarded
  175. front door.
  176. There is a small mailbox here.
  177. ></samp> <kbd>open mailbox</kbd>
  178. <samp>Opening the mailbox reveals:
  179. A leaflet.
  180. ></samp></pre>
  181. El siguiente ejemplo de código muestra un poema contemporáneo, usando la
  182. etiqueta ``<pre>`` para preservar los espacios, que forman parte del poema.
  183. .. code-block:: html
  184. <pre> maxling
  185. it is with a heart
  186. heavy
  187. that i admit loss of a feline
  188. so loved
  189. a friend lost to the
  190. unknown
  191. (night)
  192. ~cdr 11dec07</pre>
  193. El elemento ``blockquote``
  194. ==========================
  195. Representa contenido citado de otra fuente, opcionalmente con una cita que
  196. debe ser escrita en el elemento ``<footer>`` o ``<cite>``, y opcionalmente con
  197. cambios como anotaciones y abreviaciones.
  198. .. code-block:: html
  199. <figure>
  200. <blockquote>Sólo por propósitos comerciales, Google, [...]
  201. están coleccionando enormes cantidades de información de las personas
  202. [...]. Rastrean tus hábitos,
  203. tus compras, tu comportamiento, lo que haces y están tratando de
  204. controlarte dirigiéndote en determinadas direcciones.
  205. Y creo que lo están haciendo en niveles que exceden a lo que el gobierno hace.
  206. Así que el gobierno les está pidiendo ayuda.</blockquote>
  207. <footer>
  208. <cite class="title">¿Por qué Chomsky desconfía de internet?</cite> por
  209. <cite class="author">Noam Chomsky</cite>, por <a href="http://www.bbc.com/mundo/noticias/2013/07/130702_chomsky_internet_digital_criticas_pmt.shtml">BBC Mundo</a>
  210. </footer>
  211. </figure>
  212. La atribución de la cita puede ser ubicada dentro de un elemento ``<cite>``.
  213. .. code-block:: html
  214. <blockquote>
  215. The people recognize themselves in their commodities; they find their
  216. soul in their automobile, hi-fi set, split-level home, kitchen equipment.
  217. — <cite><a href="https://en.wikipedia.org/wiki/Herbert_Marcuse">Herbert Marcuse</a></cite>
  218. </blockquote>
  219. El elemento ``ol``
  220. ==================
  221. Representa una lista de elementos en la que los elementos han sido ordenados
  222. intencionadamente, de forma que cambiar su orden cambiaría el significado del
  223. documento.
  224. Los componentes de la lista son elementos ``<li>`` hijos del elemento ``<ol>``.
  225. El elemento ``<ol>`` puede acompañarse de algunos atributos propios que
  226. cambian su significado:
  227. - El atributo ``reversed`` es un booleano. Si está presente, indica que el
  228. orden de la lista es descendente (..., 3, 2, 1). Si se omite, el orden de la
  229. lista es ascendente (1, 2, 3, ...).
  230. - El atributo ``start``, si se indica, debe ser un número entero que indique
  231. el valor ordinal del primer elemento.
  232. - El atributo ``type`` puede ser utilizado para indicar el tipo de marca
  233. utilizado en la lista, en casos en los que es importante (por ejemplo, porque
  234. se hace referencia a sus elementos a través de su número o letra). Este
  235. atributo puede tener los siguientes valores:
  236. - decimal
  237. - lower-alpha
  238. - upper-alpha
  239. - lower-roman
  240. - upper-roman
  241. Cabe tener en cuenta que los números iguales o menores que cero siempre
  242. usarán el sistema decimal, ignorando el atributo ``type``.
  243. .. code-block:: html
  244. <p>He vivido en los seguientes países (ordenados según la primera vez
  245. que viví en ellos):</p>
  246. <ol>
  247. <li>Cuba</li>
  248. <li>Italia</li>
  249. <li>Argentina</li>
  250. <li>Ecuador</li>
  251. </ol>
  252. El elemento ``ul``
  253. ==================
  254. Representa una lista de elementos en la que el orden de los elementos no es
  255. importante, es decir, cambiar el orden de los elementos no altera el
  256. significado del documento.
  257. Los componentes de la lista son elementos ``<li>`` hijos del elemento ``<ul>``.
  258. .. code-block:: html
  259. <p>He vivido en los seguientes países:</p>
  260. <ul>
  261. <li>Cuba</li>
  262. <li>Italia</li>
  263. <li>Argentina</li>
  264. <li>Ecuador</li>
  265. </ul>
  266. El elemento ``li``
  267. ==================
  268. Representa un elemento de una lista. Su elemento padre puede ser ``<ol>``,
  269. ``<ul>`` o ``<menu>``.
  270. Si su elemento padre es ``<ol>``, el elemento ``<li>`` tiene un valor ordinal.
  271. Este valor se puede modificar a través del atributo ``value``
  272. .. code-block:: html
  273. <figure>
  274. <figcaption>
  275. Los cinco mejores libros
  276. (todavía no sabemos cuáles son el número 4 y el 1)
  277. </figcaption>
  278. <ol>
  279. <li value="5" lang="de"><cite>Die Verwandlung</cite></li>
  280. <li value="3"><cite>El Quijote</cite></li>
  281. <li value="2"><cite>Guerra y Paz</cite></li>
  282. </ol>
  283. </figure>
  284. El elemento ``dl``
  285. ==================
  286. Representa una lista descriptiva de grupos de términos y descripciones.
  287. Cada grupo de términos y descripciones consiste en uno o más términos
  288. (representados por elementos ``<dt>``) y una o más descripciones
  289. (representadas por elementos ``<dd>``).
  290. Los grupos término-descriptivos pueden ser nombres y definiciones,
  291. preguntas y respuestas, categorías y tópicos...
  292. .. code-block:: html
  293. <dl>
  294. <dt><em>C-b</em></dt>
  295. <dd>Se mueve atrás un carácter.</dd>
  296. <dt><em>C-f</em></dt>
  297. <dd>Se mueve adelante un carácter.</dd>
  298. </dl>
  299. En el siguiente ejemplo cada elemento ``<dt>`` tiene asociados varios
  300. ``<dd>``...
  301. .. code-block:: html
  302. <p>Información sobre el grupo de rock Queen:</p>
  303. <dl>
  304. <dt>Miembros</dt>
  305. <dd>Brian May</dd>
  306. <dd>Freddie Mercury</dd>
  307. <dd>John Deacon</dd>
  308. <dd>Roger Taylor</dd>
  309. <dt>Discográficas</dt>
  310. <dd>EMI</dd>
  311. <dd>Parlophone</dd>
  312. <dd>Capitol</dd>
  313. <dd>Hollywood</dd>
  314. <dd>Island</dd>
  315. </dl>
  316. El elemento ``dt``
  317. ==================
  318. Representa un término que forma parte de un grupo término-descriptivo
  319. en una lista descriptiva (elemento ``<dl>``).
  320. El elemento ``dd``
  321. ==================
  322. Representa una descripción que forma parte de un grupo término-descriptivo
  323. en una lista descriptiva (elemento ``<dl>``).
  324. El elemento ``figure``
  325. ======================
  326. Representa `contenido de flujo <https://www.w3.org/TR/html51/dom.html#flow-content>`__,
  327. opcionalmente con una leyenda, al que se hace referencia como una
  328. únidad en el flujo del documento. Puede ser utilizado para mostrar
  329. ilustraciones, diagramas, fotografías, etc.
  330. .. code-block:: html
  331. <figure>
  332. <img src="mazana.png" alt="Manzana" />
  333. <figcaption>
  334. Breve descripción de la manzana.
  335. </figcaption>
  336. </figure>
  337. .. code-block:: html
  338. <figure>
  339. <video src="trailer-pelicula.ogg"></video>
  340. <figcaption>Trailer de la película</figcaption>
  341. </figure>
  342. El elemento ``figcaption``
  343. ==========================
  344. Representa la descripción o leyenda del contenido de su elemento padre
  345. ``<figure>``.
  346. El elemento ``main``
  347. ====================
  348. Representa el contenido principal del cuerpo (``<body>``) del documento
  349. o aplicación.
  350. El área de contenido principal de un documento incluye contenido que es
  351. único de ese documento y excluye contenido que se repite en varios documentos,
  352. como pueden ser enlaces de navegación, información de copyright,
  353. logotipos de la página, banners y formularios de búsqueda (a no ser
  354. que la función principal del documento o aplicación sea la de un formulario
  355. de búsqueda).
  356. En el siguiente ejemplo, podemos ver dos artículos relacionados con
  357. manzanas (el tema principal de la página web).
  358. .. code-block:: html
  359. <!-- otro contenido secundario... -->
  360. <main>
  361. <h1>Manzanas</h1>
  362. <p>La manzana es una fruta pomácea comestible fruto del manzano.</p>
  363. <article>
  364. <h2>Manzana roja</h2>
  365. <p>Estas brillantes manzanas rojas son comunes...</p>
  366. <p>...</p>
  367. <p>...</p>
  368. </article>
  369. <article>
  370. <h2>Manzana verde</h2>
  371. <p>Esta clase de manzana se encuentra en...</p>
  372. <p>...</p>
  373. <p>...</p>
  374. </article>
  375. </main>
  376. <!-- otro contenido secundario... -->
  377. El elemento ``div``
  378. ===================
  379. El elemento ``<div>`` no tiene un significado especial. Representa a sus hijos.
  380. Puede ser usado con otros atributos como ``class``, ``lang`` y ``title``.
  381. Se recomienda utilizar el elemento ``<div>`` como un último recurso, cuando
  382. ningún otro elemento es adecuado.
  383. Se suele utilizar mucho para dar estilo a regiones de una página web haciendo
  384. uso de los atributos ``class`` e ``id`` y de reglas CSS.
  385. En el siguiente ejemplo se usa el elemento ``<div>`` para indicar que parte
  386. de un párrafo está escrita en otro idioma que no es el principal de la
  387. página.
  388. .. code-block:: html
  389. <p>Debería escribir solo en castellano, <div lang="de">aber ich
  390. habe keine Lust</div></p>