jorgesumle
/
referencia-html


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
							.. 4.5

==========================
Semántica a nivel de Texto
==========================

El elemento ``a``
=================

Define un `hipervínculo <https://www.w3.org/TR/html51/links.html#hyperlink>`__.

  .. code-block:: html

     <nav>
       <ul>
         <li> <a href="/">Home</a> </li>
         <li> <a href="/news">News</a> </li>
         <li> <a>Examples</a> </li>
         <li> <a href="/legal">Legal</a> </li>
       </ul>
     </nav>

Puede usarse con los siguientes atributos:

- ``href``. La dirección del hipervínculo.

- ``target``. El contexto de navegación.

- ``download``. Indica si se debe descargar el recurso en vez de dirigirse a este.

- ``rel``. Relación del documento actual con el recurso de destino.

- ``rev``. Relación del recurso de destino con el documento actual.

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

- ``type``. El tipo MIME del recurso enlazado.

Los atributos ``target``, ``download``, ``rel``, ``rev``, ``hreflang`` y ``type``
deben omitirse si el atributo ``href`` no está presente.

El elemento ``em``
==================

El elemento ``<em>`` representa el énfasis en el contenido como un acento de
intensidad.

  .. code-block:: html

     <p>Los <em>gatos</em> son animales preciosos.</p>

El elemento ``strong``
======================

El elemento ``<strong>`` es el apropiado para marcar con especial énfasis las
partes más importantes de un texto.

El elemento ``<strong>`` puede usarse en un encabezado, un título o un párrafo para
distinguir la parte que realmente importa de otras partes que podrían ser más
detalladas o simplemente publicadas.

  .. code-block:: html

     <h1>Chapter 1: <strong>The Praxis</strong></h1>

El elemento ``small``
=====================

Aplica el tamaño mínimo de la fuente de texto del navegador, este elemento se
reutiliza para representar comentarios secundarios y letras pequeñas, incluidos
los derechos de autor y el texto legal, independientemente de su presentación con estilo.

  .. code-block:: html

     <body>
       <dl>
         <dt>Habitacion simple
           <dd>199 € <small>Desayuno incluido, IVA no incluido</small>
         <dt>Habitacion doble
           <dd>239 € <small>Desayuno incluido, IVA no incluido</small>
       </dl>
     </body>

El elemento ``s``
=================

El elemento ``<s>`` representa los contenidos que ya no son precisos o que ya no son relevantes.

  .. code-block:: html

     <body>
       <p>Compra nuestro refresco</p>
       <p><s>Precio recomendado: $3.99 por botella</s></p>
       <p><strong>Ahora lo vendemos a : $2.99 una botella!</strong></p>
     </body>

El elemento ``cite``
====================

El elemento ``<cite>`` representa una referencia a un trabajo creativo.
Debe incluir el título de la obra o el nombre del autor
(persona, personas u organización) o una referencia URL, o una referencia en
forma abreviada según las convenciones utilizadas para la adición de metadatos
de citas.

  .. code-block:: html

     <body>
       <p>En palabras de  <cite>Charles Bukowski</cite> -
       <q>Un intelectual dice una cosa simple de una manera dura.
      <br>Un artista dice una cosa difícil de una manera sencilla.</q></p>
     </body>

El elemento ``q``
=================

El elemento ``<q>`` crea citas en linea, marca las citas a otros autores o documentos.

  .. code-block:: html

   <!DOCTYPE html>
   <html>
     <head>
       <title></title>
     </head>
     <body>
       <p>El estándar dice: <q cite='https://www.w3.org/TR/html51/textlevel-semantics.html#elementdef-q'>
          ... O sirve para citas cortas (contenido en línea) que no necesitan cambios de párrafo.</q>
       </p>
     </body>
   </html>

El elemento ``dfn``
===================

El elemento ``<dfn>`` sirve para marcar el término que se quiere definir.

  .. code-block:: html

     <body>
       <p>El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos.</p>
     </body>

El elemento ``abbr``
====================

Representa una abreviación o un acrónimo, opcionalmente proporciona una
explicación de su significado. Si está presente, el atributo ``title`` debe
contener simplemente su significado.

  .. code-block:: html

     <body>
       <p>Escribo <abbr title="Hypertext Markup Language">HTML</abbr></p>
     </body>

El elemento ``data``
====================

El elemento de ``<data>`` representa el contenido, junto con una forma legible
por máquina de esos contenidos en el atributo ``value``.

El atributo ``value`` debe estar presente. Su valor debe ser una representación
del contenido del elemento en un formato legible por máquina.

El elemento ``time``
====================

Representa un valor de fecha y hora; el equivalente legible por máquina puede
ser representado en el atributo ``datetime``.

  .. code-block:: html

     <body>
       <time>2011-11-18 06:54:39.929-08:00</time>
     </body>

El atributo ``dateTime`` debe reflejar el atributo de contenido de fecha
y hora del elemento.

  .. code-block:: html

     <body>
       <div class="vevent">
         <a class="url" href="https://www.web2con.com/">https://www.web2con.com/</a>
         <span class="resumen">Web 2.0 Conferencia</span>:
         <time class="dtstart" datetime="2005-10-05">Octubre 5</time> -
         <time class="dtend" datetime="2005-10-07">7</time>,
         at the <span class="location">Gran Hotel, Almeria</span>
       </div>
     </body>

El elemento ``code``
====================

Representa un código de ordenador.

El elemento de ``<code>``, un programa de computadora o cualquier otra cadena
que una computadora reconocería.

  .. code-block:: html

     <body>
       <p>The <code>code</code>El elemento ``code`` reprensenta un fragmento de codigo.</p>
       <p>Cuando llama al método <code> activate () </code> en el objeto
       <code> robot </code>, los ojos le brillan. </p>
       <p> El ejemplo siguiente utiliza la palabra clave <code> begin </code> para indicar
           el inicio de un bloque de instrucciones. Se empareja con una palabra <code> end </ code>
           , seguida por el <code>. </code> carácter de puntuación
           (punto final) para indicar el final del programa. </ p>
     </body>

El atributo ``class`` se utiliza en este ejemplo para indicar el lenguaje programacion utilizado.

  .. code-block:: html

     <body>
       <pre><code class="language-pascal">var i: Integer;
       begin
       i := 1;
       end.</code></pre>
     </body>

El elemento ``var``
===================

Representa una variable, es decir, una expresión matemática o contexto de
programación, un identificador que represente a una constante, un símbolo que
identifica una cantidad física, un parámetro de una función o un marcador de
posición en prosa.

  .. code-block:: html

     <body>
       <figure>
        <math>
        <mi>a</mi>
        <mo>=</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mi>+</mi>
          <msup><mi>c</mi><mn>2</mn></msup>
        </msqrt>
        </math>
        <figcaption>
        Utilizando el teorema de Pitágoras para resolver la hipotenusa <var>a</var>
        de un triángulo con lados <var>b</var> and <var>c</var>
        </figcaption>
       </figure>
     </body>

El elemento ``samp``
====================

Elemento representa la muestra o la salida cotizada de otro programa o sistema informático.

  .. code-block:: html

       <p> La computadora dijo
       <samp> Demasiado queso en la bandeja de dos
       </samp> pero no sabía lo que eso significaba.
       </p>

El elemento ``kbd``
===================

El elemento ``<kbd>`` representa la entrada del usuario (normalmente la entrada
del teclado, aunque también se puede utilizar para representar otras entradas,
como los comandos de voz).

  .. code-block:: html

       <p>Hacer que Jorge coma una manzana, pulsar <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

  .. code-block:: html

       <p>Hacer que Jorge coma una manzana, seleccionar
           <kbd><kbd><samp>Archivo</samp></kbd>|<kbd><samp>Comer manzana...</samp></kbd></kbd>
       </p>

El elemento ``sub``
===================

Crea un subíndice posicionando el texto marcado por debajo de la linea.

  .. code-block:: html

       <p>Las mujeres más guapas son
         <span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> y
         <span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

El elemento ``i``
=================

Representa una extensión de texto en una voz o estado de ánimo alternativo,
o de lo contrario se desvía de la prosa normal de una manera que indica una
calidad diferente del texto, como una designación taxonómica, un término
técnico, una frase idiomática de otro idioma, una transliteración,
un pensamiento, o un nombre de nave en textos occidentales.

  .. code-block:: html

       <p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
       <p>The term <i>prose content</i> is defined above.</p>
       <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

El elemento ``b``
=================

Representa una extensión de texto a la que se está llamando la atención con
fines utilitarios sin transmitir ninguna importancia extra y sin implicación de
una voz o estado de ánimo alternativo, como palabras clave en un documento
abstracto, nombres de productos en una revisión, En software interactivo basado
en texto, o en un artículo.

  .. code-block:: html

       <p>El <b>hidrogeno</b> y el <b>oxigeno</b> son componentes básicos de la materia.</p>

El elemento ``u``
=================

Representa una extensión de texto con una anotación no textual, aunque
explícitamente traducida, no textual, como etiquetar el texto como un nombre
propio en un texto chino (una marca china), o etiquetar el texto como mal escrito.

Esta etiqueta esta **desaprobada**

El elemento ``mark``
====================

Representa un texto resaltado, es decir, una ejecución de texto marcado para referencia,
debido a su relevancia en un contexto particular. Por ejemplo, se puede utilizar
en una página que muestra los resultados de búsqueda para resaltar cada uno de estos por palabra.

  .. code-block:: html

     <p lang="en-US">Consider the following quote:</p>
     <blockquote lang="en-GB">
       <p>Look around and you will find, no-one’s really
       <mark>colour</mark> blind.</p>
     </blockquote>
     <p lang="en-US">As we can tell from the <em>spelling</em> of the word,
     the person writing this quote is clearly not American.</p>

El elemento ``bdi``
===================

Aisla un trozo de texto para que pueda ser formateado con una dirección diferente
al texto que hay fuera de él.

Es útil al embeber o incrustar texto del que se desconoce la direccionalidad,
por ejemplo, proveniente de una base de datos, dentro de un texto con una
direccionalidad fija.

  .. code-block:: html

     <p dir="ltr">Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi>
     se muestra automáticamente de derecha a izquierda.
     </p>

El elemento ``bdo``
===================

La dirección de escritura del texto está relacionada con el idioma y se declara
con el atributo dir. Pero en ocasiones esto no es suficiente, entonces entra en
juego el elemento bdo (anulación del algoritmo bidireccional) que al anular el
algoritmo permite un control total de la direccionalidad.

  .. code-block:: html

     <p> cero(0)
       <bdo dir="rtl">
         <em> uno(1) dos(2) </em> tres(3) cuatro(4)
         <em dir="ltr"> cinco(5) seis(6) </em> siete(7) ocho(8)
       </bdo> nueve(9)
     </p>

El elemento ``span``
====================

Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos
en línea.

  .. code-block:: html

     <div style="border: 1px dotted blue;">
       <h4>Ejemplo de div y span </h4>
         <p>Esto es un párrafo dentro de un div,
           <span style="color: red;"> y esto un span dentro de un párrafo. </span>
        </p>
     </div>

El elemento ``br``
==================

El elemento HTML line break ``<br>`` produce un salto de línea en el texto
**(retorno de carro)**. Es útil para escribir un poema o una dirección, donde la
división de las líneas es significante.

No utilices ``<br>`` para incrementar el espacio entre líneas de texto; para ello
utiliza la propiedad margin de CSS o el elemento ``<p>``.

  .. code-block:: html

     <p>P. Sherman<br>
     42 Wallaby Way<br>
     Sydney</p>

El elemento ``wbr``
===================

El elemento ``<wbr>`` (*word break opportunity*) representa una posición
dentro del texto donde el explorador puede opcionalmente saltar una línea,
aunque sus reglas de salto de línea de otra manera no crearían un salto en esa
posición.

En páginas codificadas en **UTF-8**, ``<wbr>`` se comporta como el punto de
código **U+200B ZERO-WIDTH SPACE**. En particular se comporta como un punto de
código **unicode bidi BN**, significando esto que no tiene efecto en ordenamiento
bidi: ``<div dir=rtl>123,<wbr>456</div>`` muestra, cuando no se rompa en dos
líneas, ``123, 456`` y no ``456, 123``.

Por la misma razón el elemento ``<wbr>`` no introduce un guion en el salto de
línea. Para hacer aparecer un guion solo al final de la línea, usar la entidad
de caracter del guion de separación **(&shy;)** en su lugar.

  .. code-block:: html

     <p>Entonces señaló al tigre y gritó
     "Es<wbr>el<wbr>mayor<wbr>tigre<wbr>que<wbr>he<wbr>visto<wbr>en<wbr>mi<wbr>vida<wbr>,correr"!</p>