texto-nivel-semantico.rst 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. .. 4.5
  2. ==========================
  3. Semántica a nivel de Texto
  4. ==========================
  5. El elemento ``a``
  6. =================
  7. Define un `hipervínculo <https://www.w3.org/TR/html51/links.html#hyperlink>`__.
  8. .. code-block:: html
  9. <nav>
  10. <ul>
  11. <li> <a href="/">Home</a> </li>
  12. <li> <a href="/news">News</a> </li>
  13. <li> <a>Examples</a> </li>
  14. <li> <a href="/legal">Legal</a> </li>
  15. </ul>
  16. </nav>
  17. Puede usarse con los siguientes atributos:
  18. - ``href``. La dirección del hipervínculo.
  19. - ``target``. El contexto de navegación.
  20. - ``download``. Indica si se debe descargar el recurso en vez de dirigirse a este.
  21. - ``rel``. Relación del documento actual con el recurso de destino.
  22. - ``rev``. Relación del recurso de destino con el documento actual.
  23. - ``hreflang``. El idioma del recurso enlazado.
  24. - ``type``. El tipo MIME del recurso enlazado.
  25. Los atributos ``target``, ``download``, ``rel``, ``rev``, ``hreflang`` y ``type``
  26. deben omitirse si el atributo ``href`` no está presente.
  27. El elemento ``em``
  28. ==================
  29. El elemento ``<em>`` representa el énfasis en el contenido como un acento de
  30. intensidad.
  31. .. code-block:: html
  32. <p>Los <em>gatos</em> son animales preciosos.</p>
  33. El elemento ``strong``
  34. ======================
  35. El elemento ``<strong>`` es el apropiado para marcar con especial énfasis las
  36. partes más importantes de un texto.
  37. El elemento ``<strong>`` puede usarse en un encabezado, un título o un párrafo para
  38. distinguir la parte que realmente importa de otras partes que podrían ser más
  39. detalladas o simplemente publicadas.
  40. .. code-block:: html
  41. <h1>Chapter 1: <strong>The Praxis</strong></h1>
  42. El elemento ``small``
  43. =====================
  44. Aplica el tamaño mínimo de la fuente de texto del navegador, este elemento se
  45. reutiliza para representar comentarios secundarios y letras pequeñas, incluidos
  46. los derechos de autor y el texto legal, independientemente de su presentación con estilo.
  47. .. code-block:: html
  48. <body>
  49. <dl>
  50. <dt>Habitacion simple
  51. <dd>199 € <small>Desayuno incluido , tv incluida</small>
  52. <dt>Habitacion doble
  53. <dd>239 € <small>Desayuno incluido, tv no incluida</small>
  54. </dl>
  55. </body>
  56. El elemento ``s``
  57. =================
  58. El elemento ``<s>`` representa los contenidos que ya no son precisos o que ya no son relevantes.
  59. .. code-block:: html
  60. <body>
  61. <p>Compra nuestro refresco</p>
  62. <p><s>Precio recomendado: $3.99 por botella</s></p>
  63. <p><strong>Ahora lo vendemos a : $2.99 una botella!</strong></p>
  64. </body>
  65. El elemento ``cite``
  66. ====================
  67. El elemento ``<cite>`` representa una referencia a un trabajo creativo.
  68. Debe incluir el título de la obra o el nombre del autor
  69. (persona, personas u organización) o una referencia URL, o una referencia en
  70. forma abreviada según las convenciones utilizadas para la adición de metadatos
  71. de citas.
  72. .. code-block:: html
  73. <body>
  74. <p>En palabras de <cite>Charles Bukowski</cite> -
  75. <q>Un intelectual dice una cosa simple de una manera dura.
  76. <br>Un artista dice una cosa difícil de una manera sencilla.</q></p>
  77. </body>
  78. El elemento ``q``
  79. =================
  80. El elemento ``<q>`` crea citas en linea, marca las citas a otros autores o documentos.
  81. .. code-block:: html
  82. <!DOCTYPE html>
  83. <html>
  84. <head>
  85. <title></title>
  86. </head>
  87. <body>
  88. <p>El estándar dice: <q cite='https://www.w3.org/TR/html51/textlevel-semantics.html#elementdef-q'>
  89. ... O sirve para citas cortas (contenido en línea) que no necesitan cambios de párrafo.</q>
  90. </p>
  91. </body>
  92. </html>
  93. El elemento ``dfn``
  94. ===================
  95. El elemento ``<dfn>`` sirve para marcar el término que se quiere definir.
  96. .. code-block:: html
  97. <body>
  98. <p>El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos.</p>
  99. </body>
  100. El elemento ``abbr``
  101. ====================
  102. El elemento de ``<abbr>`` (o Elemento de Abreviación HTML) representa una
  103. **abreviación** y opcionalmente proporciona a descripción completa para ella.
  104. Si está presente, el atributo ``title`` debe contener la descripción completa y nada más.
  105. .. code-block:: html
  106. <body>
  107. <p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>
  108. </body>
  109. El elemento ``data``
  110. ====================
  111. El elemento de ``<data>`` representa el contenido, junto con una forma legible
  112. por máquina de esos contenidos en el atributo ``value``.
  113. El atributo ``value`` debe estar presente. Su valor debe ser una representación
  114. del contenido del elemento en un formato legible por máquina.
  115. El elemento ``time``
  116. ====================
  117. Representa un valor de fecha y hora; el equivalente legible por máquina puede
  118. ser representado en el atributo ``datetime``.
  119. .. code-block:: html
  120. <body>
  121. <time>2011-11-18 06:54:39.929-08:00</time>
  122. </body>
  123. El atributo ``dateTime`` debe reflejar el atributo de contenido de fecha
  124. y hora del elemento.
  125. .. code-block:: html
  126. <body>
  127. <div class="vevent">
  128. <a class="url" href="https://www.web2con.com/">https://www.web2con.com/</a>
  129. <span class="resumen">Web 2.0 Conferencia</span>:
  130. <time class="dtstart" datetime="2005-10-05">Octubre 5</time> -
  131. <time class="dtend" datetime="2005-10-07">7</time>,
  132. at the <span class="location">Gran Hotel, Almeria</span>
  133. </div>
  134. </body>
  135. El elemento ``code``
  136. ====================
  137. Representa un código de ordenador.
  138. El elemento de ``<code>``, un programa de computadora o cualquier otra cadena
  139. que una computadora reconocería.
  140. .. code-block:: html
  141. <body>
  142. <p>The <code>code</code>El elemento ``code`` reprensenta un fragmento de codigo.</p>
  143. <p>Cuando llama al método <code> activate () </code> en el objeto
  144. <code> robot </code>, los ojos le brillan. </p>
  145. <p> El ejemplo siguiente utiliza la palabra clave <code> begin </code> para indicar
  146. el inicio de un bloque de instrucciones. Se empareja con una palabra <code> end </ code>
  147. , seguida por el <code>. </code> carácter de puntuación
  148. (punto final) para indicar el final del programa. </ p>
  149. </body>
  150. El atributo ``class`` se utiliza en este ejemplo para indicar el lenguaje programacion utilizado.
  151. .. code-block:: html
  152. <body>
  153. <pre><code class="language-pascal">var i: Integer;
  154. begin
  155. i := 1;
  156. end.</code></pre>
  157. </body>
  158. El elemento ``var``
  159. ===================
  160. Representa a una ``variable``, es decir, una expresión matemática o contexto de
  161. programación, un identificador que represente a una constante, un símbolo que
  162. identifica una cantidad física, un parámetro de una función o un marcador de
  163. posición en prosa.
  164. .. code-block:: html
  165. <body>
  166. <figure>
  167. <math>
  168. <mi>a</mi>
  169. <mo>=</mo>
  170. <msqrt>
  171. <msup><mi>b</mi><mn>2</mn></msup>
  172. <mi>+</mi>
  173. <msup><mi>c</mi><mn>2</mn></msup>
  174. </msqrt>
  175. </math>
  176. <figcaption>
  177. Utilizando el teorema de Pitágoras para resolver la hipotenusa <var>a</var>
  178. de un triángulo con lados <var>b</var> and <var>c</var>
  179. </figcaption>
  180. </figure>
  181. </body>
  182. El elemento ``samp``
  183. ====================
  184. Elemento representa la muestra o la salida cotizada de otro programa o sistema informático.
  185. .. code-block:: html
  186. <p> La computadora dijo
  187. <samp> Demasiado queso en la bandeja de dos
  188. </samp> pero no sabía lo que eso significaba.
  189. </p>
  190. El elemento ``kbd``
  191. ===================
  192. El elemento ``<kbd>`` representa la entrada del usuario (normalmente la entrada
  193. del teclado, aunque también se puede utilizar para representar otras entradas,
  194. como los comandos de voz).
  195. .. code-block:: html
  196. <p>Hacer que Jorge coma una manzana, pulsar <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
  197. .. code-block:: html
  198. <p>Hacer que Jorge coma una manzana, seleccionar
  199. <kbd><kbd><samp>Archivo</samp></kbd>|<kbd><samp>Comer manzana...</samp></kbd></kbd>
  200. </p>
  201. El elemento ``sub``
  202. ===================
  203. Crea un subíndice posicionando el texto marcado por debajo de la linea.
  204. .. code-block:: html
  205. <p>Las mujeres más guapas son
  206. <span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> y
  207. <span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>
  208. El elemento ``i``
  209. =================
  210. Representa una extensión de texto en una voz o estado de ánimo alternativo,
  211. o de lo contrario se desvía de la prosa normal de una manera que indica una
  212. calidad diferente del texto, como una designación taxonómica, un término
  213. técnico, una frase idiomática de otro idioma, una transliteración ,
  214. un pensamiento, o un nombre de nave en textos occidentales.
  215. .. code-block:: html
  216. <p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
  217. <p>The term <i>prose content</i> is defined above.</p>
  218. <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
  219. El elemento ``b``
  220. =================
  221. Representa una extensión de texto a la que se está llamando la atención con
  222. fines utilitarios sin transmitir ninguna importancia extra y sin implicación de
  223. una voz o estado de ánimo alternativo, como palabras clave en un documento
  224. abstracto, nombres de productos en una revisión, En software interactivo basado
  225. en texto, o en un artículo.
  226. .. code-block:: html
  227. <p>El <b>hidrogeno</b> y el <b>oxigeno</b> son componentes básicos de la materia.</p>
  228. El elemento ``u``
  229. =================
  230. Representa una extensión de texto con una anotación no textual, aunque
  231. explícitamente traducida, no textual, como etiquetar el texto como un nombre
  232. propio en un texto chino (una marca china), o etiquetar el texto como mal escrito.
  233. Esta etiqueta esta **desaprobada**
  234. El elemento ``mark``
  235. ====================
  236. Representa un texto resaltado, es decir, una ejecución de texto marcado para referencia,
  237. debido a su relevancia en un contexto particular. Por ejemplo, se puede utilizar
  238. en una página que muestra los resultados de búsqueda para resaltar cada uno de estos por palabra.
  239. .. code-block:: html
  240. <p lang="en-US">Consider the following quote:</p>
  241. <blockquote lang="en-GB">
  242. <p>Look around and you will find, no-one’s really
  243. <mark>colour</mark> blind.</p>
  244. </blockquote>
  245. <p lang="en-US">As we can tell from the <em>spelling</em> of the word,
  246. the person writing this quote is clearly not American.</p>
  247. El elemento ``bdi``
  248. ===================
  249. Aisla un trozo de texto para que pueda ser formateado con una dirección diferente
  250. al texto que hay fuera de él.
  251. Es útil al embeber o incrustart texto del que se desconoce la direccionalidad,
  252. por ``ejemplo`` proveniente de una base de datos, dentro de un texto con una
  253. direccionalidad fija.
  254. .. code-block:: html
  255. <p dir="ltr">Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi>
  256. se muestra automáticamente de derecha a izquierda.
  257. </p>
  258. El elemento ``bdo``
  259. ===================
  260. La dirección de escritura del texto está relacionada con el idioma y se declara
  261. con el atributo dir. Pero en ocasiones esto no es suficiente, entonces entra en
  262. juego el elemento bdo (anulación del algoritmo bidireccional) que al anular el
  263. algoritmo permite un control total de la direccionalidad.
  264. .. code-block:: html
  265. <p> cero(0)
  266. <bdo dir="rtl">
  267. <em> uno(1) dos(2) </em> tres(3) cuatro(4)
  268. <em dir="ltr"> cinco(5) seis(6) </em> siete(7) ocho(8)
  269. </bdo> nueve(9)
  270. </p>
  271. El elemento ``span``
  272. ====================
  273. Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos
  274. en línea.
  275. .. code-block:: html
  276. <div style="border: 1px dotted blue;">
  277. <h4>Ejemplo de div y span </h4>
  278. <p>Esto es un párrafo dentro de un div,
  279. <span style="color: red;"> y esto un span dentro de un párrafo. </span>
  280. </p>
  281. </div>
  282. El elemento ``br``
  283. ==================
  284. El elemento HTML line break ``<br>`` produce un salto de línea en el texto
  285. **(retorno de carro)**. Es útil para escribir un poema o una dirección, donde la
  286. división de las líneas es significante.
  287. No utilices ``<br>`` para incrementar el espacio entre líneas de texto; para ello
  288. utiliza la propiedad margin de CSS o el elemento ``<p>``.
  289. .. code-block:: html
  290. <p>P. Sherman<br>
  291. 42 Wallaby Way<br>
  292. Sydney</p>
  293. El elemento ``wbr``
  294. ===================
  295. El elemento ``<wbr>`` (*word break opportunity*) representa una posición
  296. dentro del texto donde el explorador puede opcionalmente saltar una línea,
  297. aunque sus reglas de salto de línea de otra manera no crearían un salto en esa
  298. posición.
  299. En páginas codificadas en **UTF-8**, ``<wbr>`` se comporta como el punto de
  300. código **U+200B ZERO-WIDTH SPACE**. En particular se comporta como un punto de
  301. código **unicode bidi BN**, significando esto que no tiene efecto en ordenamiento
  302. bidi: ``<div dir=rtl>123,<wbr>456</div>`` muestra, cuando no se rompa en dos
  303. líneas, ``123, 456`` y no ``456, 123``.
  304. Por la misma razón el elemento ``<wbr>`` no introduce un guion en el salto de
  305. línea. Para hacer aparecer un guion solo al final de la línea, usar la entidad
  306. de caracter del guion de separación **(&shy;)** en su lugar.
  307. .. code-block:: html
  308. <p>Entonces señaló al tigre y gritó
  309. "Es<wbr>el<wbr>mayor<wbr>tigre<wbr>que<wbr>he<wbr>visto<wbr>en<wbr>mi<wbr>vida<wbr>,correr"!</p>