jorgesumle
/
referencia-html


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							.. 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``
======================

Es el apropiado para marcar con especial énfasis las
partes más importantes de un texto.

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>Capítulo 1: <strong>La Práctica</strong></h1>

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

Aplica el tamaño mínimo de la fuente de texto del navegador, este elemento se
utiliza 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 o científico.
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 agregació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 línea, marca las citas de 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``
====================

Usamos el elemento ``<data>`` para representa un contenido, junto con el
atributo ``value`` crea un formato legible de ese contenido para una computadora.

El atributo ``value`` debe estar presente. Su valor debe ser una representación
del contenido del elemento en un formato entendible por la computadora.
El formato de los datos para que una computadora pueda leerlos son RDF, XML, JSON.

  .. code-block:: html

    <body>
      <p>Nuevos Productos</p>
        <ul>
          <li><data value="3967381398">Mini Ketchup</data></li>
          <li><data value="3967381399">Jumbo Ketchup</data></li>
          <li><data value="3967381400">Mega Jumbo Ketchup</data></li>
        </ul>
    </body>

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

Representa el valor de una fecha y hora. El formato equivalente
legible por una computadora se debe indicar 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 contenido de la fecha
y hora del elemento añadido.

  .. code-block:: html

     <body>
       <div class="vevent">
         <a class="url" href="https://www.example.com/">https://www.w2conf.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.

Es un fragmento de código de un programa de computadora o cualquier otra cadena
que una computadora podría reconocer.

  .. code-block:: html

     <body>
       <p>El <code>code</code>es un elemento que representa un fragmento de código.</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``
====================

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

  .. code-block:: html

       <p> La computadora dijo</p>
       <p>aparecerá una ventana con el mensaje: <samp>Hola mundo</samp>
       </p>

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

La utilidad del elemento ``<kbd>`` es la entrada de datos por parte 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 línea.

  .. 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,
un término técnico, una frase idiomática de otro idioma, una transliteración,
un pensamiento, o el nombre de una nave en textos occidentales.

  .. code-block:: html

     <p>El <i class="taxonomy">Felis silvestris catus</i> es bonito.</p>
     <p>El término<i>contenido en prosa</i> esta definido encima.</p>
     <p>Estas en lo cierto <i lang="fr">je ne sais quoi</i> esta en el aire.</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

     <body>
       <p>El <b>hidrógeno</b> y el <b>carbono</b> son componentes básicos de la materia.</p>
     </body>

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.

  .. code-block:: html
  
     <body>
       <p><u>Todo</u> se explica
         <u>buceando dentro de Python</u></p>
       <p><em>Todo</em> se explica
         <i>buceando dentro de Python</i></p>
     </body>

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 palabra 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 del contenido.

  .. 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``
==================

Usar ``<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 uso de ``<wbr>`` (*word break opportunity*) te permite dividir la palabra,
haciendo un salto de línea si la palabra no entra en el navegador, evitando así
el scroll horizontal. Es útil en el caso de que una palabra sea muy larga y no
entre en la misma línea. A diferencia de la etiqueta ``<br>`` solo hace salto de línea
cuando la palabra no entra horizontalmente en el navegador o choca con el marco de la
ventana del navegador.

  .. 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>. ¡Corre, si nos coge, estamos perdidos!".</p>