.. highlight:: html .. _html-basicos: Elementos básicos ***************** Incluimos dentro de esta macrocategoría aquellos elementos de más simple uso que nos permiten escribir documentos |HTML| muy sencillos de texto puro, esto es, documentos que no incrustan imágenes u otros elementos multimedia. .. warning:: La presentación de los elementos bajo este epígrafe y los siguientes y los ya vistos al tratar la cabecera es algo vaga, y no incluye exactamente cuál es el contenido admisible o cuáles pueden ser sus elementos padre. Hay para cada cual, no obstante, un enlace a su descripción en `la página para desarrolladores del proyecto Mozilla `_, donde la información es más exhaustiva. Encabezados =========== |HTML| dispone de una serie de etiquetas para definir títulos o encabezados: .. table:: :class: el-html +--------------+----------------------------------------------------------+ | |h1| | Encabezado de nivel superior | +--------------+----------------------------------------------------------+ | |h2| | Encabezado de segundo nivel | +--------------+----------------------------------------------------------+ | |h3| | Encabezado de tercer nivel | +--------------+----------------------------------------------------------+ | |h4| | Encabezado de cuarto nivel | +--------------+----------------------------------------------------------+ | |h5| | Encabezado de quinto nivel | +--------------+----------------------------------------------------------+ | |h6| | Encabezado de sexto nivel | +--------------+----------------------------------------------------------+ .. index:: h1, h2, h3, h4, h5, h6 .. _html-h1: .. _html-h2: .. _html-h3: .. _html-h4: .. _html-h5: .. _html-h6: **h1**, **h2**, **h3**, **h4**, **h5**, **h6** (:devmoz:`h1`) Permiten establecer los títulos del documento en orden decreciente de importancia. Es habitual conjugar estos elementos con el uso de los :ref:`elementos semánticos de estructura `, aunque por ahora podemos limitarnos a usarlos según la importancia que tenga el título::

Título de la página

Introducción

Bla, bla, bla...

Primeros pasos

Bla, bla, bla...

Son elementos de bloque que pueden contener elementos en línea. .. note:: Lo lógico es que en una página sólo exista un encabezado de primer nivel (|h1|) que, dependiendo de cómo hayamos creado la página estará en el |header| de la página o dentro del contenido en sí. Para más información échele un ojo al `tutorial del W3C sobre encabezados `_. Elementos de párrafo ==================== Incluimos bajo este epígrafe los elementos de bloque que permiten crear párrafos o estructuras análogas: .. table:: :class: el-html +--------------+-----------------------------------------------------------+ | |p| | Párrafo de texto | +--------------+-----------------------------------------------------------+ | |pre| | Párrafo en el que se respetan espacios y saltos de línea | +--------------+-----------------------------------------------------------+ | |blockquote| | Cita larga mostrada como texto independiente | +--------------+-----------------------------------------------------------+ | |details| | Genera un elemento en que la información se hace visible | | | al pinchar sobre él. | +--------------+-----------------------------------------------------------+ | |address| | Permite especificar información de contacto | +--------------+-----------------------------------------------------------+ .. index:: p .. _html-p: **p** (:devmoz:`p`) Es el elemento en bloque apropiado para definir párrafos. Puede contener una mezcla de texto y :ref:`elementos en línea `, pero nunca otros elementos de bloque. Podemos prescindir de su cierre, ya que el procesador entenderá que el elemento acaba cuando comience el siguiente elemento de bloque::

Esto es un párrafo bastante corto que dejamos sin cerrar.

Este es un segundo párrafo, independiente del anterior, aunque aquel no se haya cerrado, ya que un párrafo no puede contener a otro párrafo.

.. index:: pre .. _html-pre: **pre** (:devmoz:`pre`) Elemento de bloque que permite escribir un texto preformateado, esto es, un texto del que el procesador respeta espacios en blanco (no se colapsan), tabulaciones, cambios de línea, etc. Al igual que el párrafo contiene texto y elementos en línea. Es muy común que se use para escribir fragmentos de código, así que suele acompañarse de |code|:: 

      encodeImg = function(svg) {
         var type = "image/svg+xml";

         return "data:" + type + "," +
         svg.outerHTML.replace(/(:?"|'|#|\s+)/g, function(c) {
            return {
               '"': "%22",
               "'": "%27",
               "#": "%23"
            }[c] || " ";
         });
      }
.. index:: blockquote .. _html-blockquote: **blockquote** (:devmoz:`blockquote`) Permite incluir en el documento una cita larga que puede estar compuesta por uno o más párrafos. A diferencia de los dos elementos anteriores, es posible incluir dentro de él otros elementos de bloque::

Yo, señor, soy de Segovia. Mi padre se llamó Clemente Pablo, natural del mismo pueblo; Dios le tenga en el cielo. Fue, tal como todos dicen, de oficio barbero; aunque eran tan altos sus pensamientos, que se corría de que le llamasen así, diciendo que él era tundidor de mejillas y sastre de barbas. Dicen que era de muy buena cepa, y, según él bebía, es cosa para creer.

Estuvo casado con Aldonza de San Pedro, hija de Diego de San Juan y nieta de Andrés de San Cristóbal. Sospechábase en el pueblo que no era cristiana vieja, aunque ella, por los nombres y sobrenombres de sus pasados, quiso esforzar que era descendiente de la letanía. Tuvo muy buen parecer, y fue tan celebrada, que en el tiempo que ella vivió, casi todos los copleros de España hacían cosas sobre ella.

.. table:: Atributos de blockquote :class: attr-html +--------------+----------+---------------------------------------------+ | cite | url | |URL| de donde se obtiene el texto citado | +--------------+----------+---------------------------------------------+ .. index:: details .. _html-details: **details** (:devmoz:`details`) Sirve para ocultar detalles y que estos se hagan visibles al desplegarlos. Suele incluir un primer elemento :code:`` que es lo único que se muestra cuando el elemento no está desplegado. El resto del contenido pueden ser texto, elementos de línea o elementos de bloque::
Datos Extraidos del Instituto Nacional de Estadistica
.. rst-class:: ej-html .. raw:: html
Datos Extraidos del Instituto Nacional de Estadistica.
.. table:: Atributos de details :class: attr-html +--------------+----------+---------------------------------------------+ | open | \- | Muestra abierto los detalles. | +--------------+----------+---------------------------------------------+ | name | token | Permite relacionar todos los elementos | | | | |details| cuyo valor de este atributo sea | | | | el mismo. Esto provoca que solamente uno | | | | del grupo pueda estar abierto. | +--------------+----------+---------------------------------------------+ .. index:: address .. _html-address: **address** (:devmoz:`address`) elemento de bloque que permite definir una información de contacto relativa a un particular o una organización::

Información de contacto:

Página web personal
Email: elmio@pagina.com
Teléfono: +34959959959
.. _html-el-linea: Elementos en línea ================== El epígrafe está dedicado a elementos en línea que muy habitualmente se encuentran incluidos dentro de párrafos y estructuras similares. .. index:: strong, b, em, i, u, s, mark, cite, span, q, sup, sub, small, abbr, dfn, br, img .. table:: :class: el-html +--------------+-----------------------------------------------------------+ | |strong| | Marca un trozo de texto de relevancia. | +--------------+-----------------------------------------------------------+ | |b| | Marca un texto que, sin tener especial importancia, | | | requiere distinguirse del resto, como las palabras clave | | | en la entradilla de un artículo. | +--------------+-----------------------------------------------------------+ | |em| | Marca un texto que debe enfatizarse. | +--------------+-----------------------------------------------------------+ | |i| | Marca un texto que requiere una modulación especial de la | | | voz o que por cualquier otra razón suele escribirse en | | | letras cursivas (título de una obra, etc.) | +--------------+-----------------------------------------------------------+ | |u| | Marca un trozo de texto incorrecto (p.e. una palabra mal | | | escrita). | +--------------+-----------------------------------------------------------+ | |s| | Marca un trozo de texto inexacto o que dejó de ser válido.| +--------------+-----------------------------------------------------------+ | |mark| | Marca un texto remarcado por alguna cuestión relevantes, | | | como cuando se marca un texto con rotulador *fosforito*. | +--------------+-----------------------------------------------------------+ | |span| | Marca de forma genérica un trozo de texto, que por alguna | | | razón se quiere diferenciar del texto (muy probablemente | | | para aplicarse algún estilo |CSS|. | +--------------+-----------------------------------------------------------+ | |cite| | Permite referir una obra. | +--------------+-----------------------------------------------------------+ | |q| | Representa una cita corta (frente a |blockquote| que | | | representa una larga). | +--------------+-----------------------------------------------------------+ | |sup| | Marca texto en superíndice. | +--------------+-----------------------------------------------------------+ | |sub| | Marca texto en subíndice. | +--------------+-----------------------------------------------------------+ | |small| | Marca pequeños comentarios como aquellos dedicados a | | | definir la licencia o el copyright. | +--------------+-----------------------------------------------------------+ | |abbr| | Marca una abreviatura o acrónimo. | +--------------+-----------------------------------------------------------+ | |dfn| | Marca el término que se está definiendo en una sentencia. | +--------------+-----------------------------------------------------------+ | |br| | Fuerza un cambio de línea. | +--------------+-----------------------------------------------------------+ | |img| | Permite incrustar una imagen. | +--------------+-----------------------------------------------------------+ | |a| | Permite hacer un hipervínculo | +--------------+-----------------------------------------------------------+ .. index:: strong .. index:: b .. index:: em .. index:: i .. _html-strong: .. _html-b: .. _html-em: .. _html-i: | **strong** (:devmoz:`strong`) | **b** (:devmoz:`b`) | **em** (:devmoz:`em`) | **i** (:devmoz:`i`) | El uso de estos elementos no tiene mayor dificultad más allá de conocer exactamente cuándo deben usarse. En `esta página de stellify.net `_ discute sobre cuándo deben usarse unos u otros. Tengo presente que tanto :code:`` como :code:`` suelen representarse con letras negritas, y tanto :code:`` como :code:`` con letras cursivas. Sin embargo, |HTML|\ 5 desterró el marcado procedimental, por lo que todas estas etiquetas tienen un significado semántico. .. index:: u .. _html-u: **u** (:devmoz:`u`) Permite significar que la palabra o expresión es incorrecta. Por ejemplo::

Un molesto vulgarismo es el llamado dequeismo, que consiste en incluir una superflua preposición "de" delante de la conjunción "que" que introduce oraciones subordinadas sustantivas: Pienso de que no sea en realidad muy importante. .. rst-class:: ej-html .. raw:: html

Un molesto vulgarismo es el llamado dequeismo, que consiste en incluir una superflua preposición "de" delante de la conjunción "que" que introduce oraciones subordinadas sustantivas: Pienso de que no sea en realidad muy importante. .. note:: El navegador, por defecto, representa esta incorrección subrayando la palabra, a pesar de que en castellano las incorrecciones se notan anteponiendo un asterisco. Para adaptarnos a las normas ortográficas del castellano podrían añadir este código |CSS|: .. code-block:: css u::before { content: "*"; } u { text-decoration: inherit; font-style: italic; } .. seealso:: En el ejemplo, se han usado atributos |ARIA|, que facilitan la compresión del documento a discapacitados. Puede echar un ojo a esta `página al respecto `_. .. index:: s .. _html-s: **s** (:devmoz:`s`) Dado que significa al fragmento de texto inválido, suele tener el efecto de tachar el texto::

HTML, como lenguaje de marcas SGML, es... .. rst-class:: ej-html .. raw:: html

HTML, como lenguaje de marcas SGML, es... .. index:: mark .. _html-mark: **mark** (:devmoz:`mark`) Cumple la misma función que en el texto manuscrito el rotulador de color chillón: remarcar especialmente una palabra o fragmento del texto. Es muy común en los resultados de búsqueda para remarcar el término que se buscaba::

Resultados para la búsqueda "HTML":

HTML es un lenguaje de marcas nacido a comienzos de los 90...

La sintaxis del HTML ha dejado de ser SGML... .. rst-class:: ej-html .. raw:: html

Resultados para la búsqueda "HTML":

HTML es un lenguaje de marcas nacido a comienzos de los 90...

La sintaxis del HTML ha dejado de ser SGML... .. index:: span .. _html-span: **span** (:devmoz:`span`) Agrupa un fragmento en línea del texto al que generalmente se le quiere asignar unas características comunes (idioma, estilos, etc). Por ejemplo::

Habrá quien dude de este chascarrillo, pero se non è vero, è ben trovato. No debe usarse si se pretende notar algo para lo que ya hay un elemento específico. De hecho, el ejemplo anterior en concreto podríamos haberlo escrito::

Habrá quien dude de este chascarrillo, pero se non è vero, è ben trovato. ya que suelen notarse las expresiones extranjeras de un modo distinto (cursiva) a como se escribe el resto del texto. .. index:: cite .. _html-cite: **cite** (:devmoz:`cite`) La referencia a una obra, que exige incluir el título (o |URL| de la obra) y el autor::

En un lugar de la Mancha... arranca el primer capítulo del don Quijote de Miguel de Cervantes.

.. index:: q .. _html-q: **q** (:devmoz:`q`) Es el equivalente en línea a |blockquote|. Como aquel, puede estar acompañado por un atributo :code:`cite`. .. index:: sup .. _html-sup: **sup** (:devmoz:`sup`) Permite escribir superíndices::

La fórmula del teorema de Pitágoras es: a2 + b2 = c2. .. rst-class:: ej-html .. raw:: html

La fórmula del teorema de Pitágoras es: a2 + b2 = c2. .. index:: sub .. _html-sub: **sub** (:devmoz:`sub`) Permite escribir subíndices::

Es posible que si le pido H2O, así que le pediré que me sirva agua.

.. rst-class:: ej-html .. raw:: html

Es posible que si le pido H2O, no me entienda, así que mejor le pido que me sirva agua.

.. index:: small .. _html-small: **small** (:devmoz:`small`) Muy comúnmente representa comentarios que incluyen el *copyright* o la licencia::

... final del documento

© Perico de los Palotes. Publicado bajo la licencia Creative Commons.

.. rst-class:: ej-html .. raw:: html

... final del documento

© Perico de los Palotes. Publicado bajo la licencia Creative Commons.

.. index:: abbr .. _html-abbr: **abbr** (:devmoz:`abbr`) Permite notar una abreviatura o un acrónimo\ [#]_::

HTML es un lenguaje de marcas. .. index:: dfn .. _html-dfn: **dfn** (:devmoz:`dfn`) Marca el término definido en una definición. Para un ejemplo de uso, consulte el ejemplo ilustrativo del uso del elemento |u|. .. index:: br .. _html-br: **br** (:devmoz:`br`) Fuerza un cambio de línea. El comportamiento por defecto de |HTML| es colapsar los caracteres seguidos de espaciado (sean espacios, tabulaciones a cambios de línea) a un único espacio, y sólo transformar el espacio por un cambio de línea cuando se alcance la anchura del bloque contenedor, salvo dentro del elemento |pre|. Cuando en un elemento normal se quiere forzar un cambio de línea, es preciso usar el elemento :code:`
`::

Primera línea
Segunda línea

.. rst-class:: ej-html .. raw:: html

Primera línea
Segunda línea

.. index:: img .. _html-img: **img** (:devmoz:`img`) Permite incrustar una imagen en la página |HTML|. Existen otros modos de incrustar imágenes :ref:`que se verán más adelante `. .. table:: Atributos más frecuentes para :class: attr-html +------------+-----------+---------------------------------------------+ | src | url | |URL| de donde descargar la imagen. | +------------+-----------+---------------------------------------------+ | alt | texto | Descripción de la imagen. | +------------+-----------+---------------------------------------------+ | height | dimension | Altura de la imagen. | +------------+-----------+---------------------------------------------+ | width | dimension | Anchura de la imagen. | +------------+-----------+---------------------------------------------+ :code:`src` y :code:`alt` son atributos obligatorios. Si no se proporcionan dimensiones, la imagen tenderá a mostrarse en su tamaño original, y si se proprociona una de ellas, la otra adquirirá una longitud proporcional, esto es, si la anchura de la imagen es de *1200px* y se fija :code:`width="600px"`, la anchura de la imagen pasará a ser también la mitad que la original. Lo habitual es proporcionar las dimensiones en píxeles o porcentaje sobre la dimensión original. Por tanto, para la imagen de *1200px* de ancho :code:`width="600px"` es equivalente a :code:`width="50%"`. .. warning:: En |HTML|\ 5, a diferencia de lo que ocurría en versiones anteriores, no pueden usarse porcentajes como valores de los atributos de ancho o alto. Si queremos utilizar porcentajes, deberemos recurrir a |CSS|. Los navegadores suelen soportan varios tipos de imágenes: los más frecuentes son JPEG_, PNG_, GIF_ en imágenes de píxeles, y SVG_ en imágenes vectoriales. .. seealso:: |HTML|\ 5 introdujo un par de atributos más para facilitar el diseño adaptable. :ref:`Más adelante ` se volverá a tratar este elemento. .. index:: a .. _html-a: **a** (:devmoz:`a`) Es el elemento en línea que permite crear hipervínculos. .. table:: Atributos más habituales para :class: attr-html +------------+-----------+---------------------------------------------+ | href | url | |URL| del hipervínculo | +------------+-----------+---------------------------------------------+ | download | \- | Indica que el destino se debe descargar, en | | | | vez de dirigir el navegador a él | +------------+-----------+---------------------------------------------+ | rel | texto | Tiene el mismo propósito que el atributo | | | | homónimo del elemento |link|. | +------------+-----------+---------------------------------------------+ | target | valor | Indica dónde mostrar el destino. | +------------+-----------+---------------------------------------------+ El uso es bastante simple y ya se ha mostrado en ejemplo anteriores (p.e. al ilustrar el elemento |small| y enlazar con la página que contiene las cláusulas de la licencia). No obstante, es aconsejable aclarar cuáles son los valores que puede adoptar el atributo :code:`target`: *_self* Carga el destino en el contexto de navegación del documento en el que se encuentra el enlace. En la mayor parte de los casos esto supone que el navegador cargue la nueva página en la misma pestaña. *_blank* Carga el destino en un nuevo contexto de navegación. Dependiendo de cómo se haya configurado el navegador esto supondrá cargar en una nueva pestaña o una nueva ventana. *_parent* Carga el destino en el contexto de navegación del documento padre. Esto tiene sentido cuando el documento se encuentra en dentro de un |iframe|, de modo que el documento padre es aquel que contiene el |iframe|. Si no es el caso, se comporta como *_self*. *_top* Carga el destino en el contexto de navegación del documento que es el primer ancenstro. Sólo tiene sentido cuando hay varios elementos |iframe| anidados. Si no es el caso, se comporta como *_self*. Contenido informático ===================== Incluimos bajo este epígrafe los elementos en línea orientados a textos de temática informática. .. table:: :class: el-html +--------------+-----------------------------------------------------------+ | |kbd| | Entrada de información de usuario. | +--------------+-----------------------------------------------------------+ | |samp| | Salida de un programa informático. | +--------------+-----------------------------------------------------------+ | |var| | Variable (matemática o informática) | +--------------+-----------------------------------------------------------+ | |time| | Hora y fecha legible por humanos. | +--------------+-----------------------------------------------------------+ | |data| | Información con expresión del valor orientado a la | | | máquina. | +--------------+-----------------------------------------------------------+ | |code| | Fragmento de código fuente | +--------------+-----------------------------------------------------------+ .. index:: kbd .. _html-kbd: **kbd** (:devmoz:`kbd`) Marcan entradas de usuario::

Para cancelar el programa basta con pulsar Ctrl+T .. rst-class:: ej-html .. raw:: html

Para cancelar el programa basta con pulsar Ctrl+T .. note:: Para crear el efecto se ha usado el siguiente estilo: .. code-block:: css kbd { font-family: Monospace; padding: 2px 6px; background: #eee; border: 3px solid #bbb; border-top-width: 1px; border-bottom: 3px solid #777; } .. index:: samp .. _html-samp: **samp** (:devmoz:`samp`) Marca un texto que representa la salida de un programa::

Es posible que reciba el siguiente mensaje:

-bash: saas: command not found

.. rst-class:: ej-html .. raw:: html

Es posible que reciba el siguiente mensaje:

-bash: saas: command not found

.. index:: var .. _html-var: **var** (:devmoz:`var`) Permite marcar texto que representa variables informáticas o matemáticas. Consulte el ejemplo dedicado a |sup|, donde se usa también este elemento. .. index:: time .. _html-time: **time** (:devmoz:`time`) El elemento permite escribir una hora o fecha en formato legible por un humano, pero de modo que también pueda ser procesado por una máquina. Tiene un atributo: .. table:: Atributos para time :class: attr-html +------------+------------+---------------------------------------------+ | datetime | hora/fecha | Fecha, hora o duración en formato | | | | inteligible por la máquina. | +------------+------------+---------------------------------------------+ Ejemplos::