logo wextensible
Inicio » Temas » XHTML y CSS » XHTML: Formatos

XHTML: FORMATOS

Elementos: Bloque <div> Línea <span> Atributos generales Comentario Retorno <br> Regla <hr> Encabezado <hn> Párrafo <p> Itálica <i> Negrita <b> Agrandar <big> Reducir <small> Enfásis <em> Resalte <strong> Subíndice <sub> Superíndice <sup> Centrar <center> Direccionalidad <bdo> Autor <address> Cita <blockquote> Cita <q> Cita <cite> Abreviatura <abbr> Acrónimo <acronym> Definición <dfn> Borrado <del> Teclado <kbd> Insertado <ins> Código <code> Código <pre> Monoespaciado <samp> Monoespaciado <tt> Variable <var>
Otra información: Introducción Búsquedas e índices

ELEMENTO EN BLOQUE <div>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: Alinear (align)
Es un elemento del tipo %block que puede contener elementos del tipo %Flow. Este elemento a nivel de bloque básico es, junto al elemento en línea <span>, piezas que no tienen una finalidad específica y, por tanto, pueden ser dotados de estilo CSS con total libertad. Los bloques se caracterizan por causar un salto de línea, a diferencia de los elementos en línea. Puede contener cualquier elemento en bloque o en línea.

TIPOS DE ELEMENTOS DE FLUJO (%Flow)

Partiendo de la especificación de los DTD, los elementos de flujo son la tipología básica de todos los elementos XHTML. Los elementos que sean de este tipo pueden contener elementos en bloque y en línea, como por ejemplo, las entradas de las listas o el cuerpo de una página. Se definen como %Flow y se desglosan o pueden contener los tipos %Block e %Inline, que desglosados a su vez son finalmente los siguientes:

  • Elementos a nivel de texto, definidos por el tipo básico de XML #PCDATA.
  • Elementos del tipo bloque puros %block.
  • Elemento <form>.
  • Elementos del tipo en linea puros %inline.
  • Mezclados del tipo %misc.
Veáse la diferencia de definición de %Block y %block e igual para %Inline y %inline, pues no son las mismas entidades (diferencia mayúsculas y minúsculas).

TIPOS DE ELEMENTOS DE BLOQUE (%Block)

Los elementos en bloque se agrupan para su definición en el tipo %Block y se desglosan a su vez en los siguientes:

  • Elemento en bloque puros %block:
    • Elemento párrafo <p>.
    • Encabezados, todos del tipo %heading expuestos en <h1...h6>.
    • Elemento <div> de este apartado.
    • Listas %lists: <ul>, <ol>, <dl>. También se incluyen menu | dir pero son elementos desaprobados (sólo XHTML Transicional) y no serán estudiados en estas páginas.
    • Bloques de texto %blocktext: <pre>, <hr>, <blockquote>, <address>. Además incluye los elementos desaprobados (XHTML Transicional) <center> y <noframes>.
    • Elemento <isindex> (XHTML Transicional).
    • Elemento <fieldset>.
    • Elemento <table>.
  • Elemento <form>.
  • Mezclados del tipo %misc.

Por ejemplo, el elemento que estamos tratando <div> se incluyó antes en el tipo %block y se define en el DTD como <!ELEMENT div %Flow;>, lo que significa que puede contener cualquier elemento de flujo del tipo %Flow. Sin embargo el elemento <p> tambien es del tipo %block, pero según su definición <!ELEMENT p %Inline;> sólo puede contener elementos %Inline, en línea.

Ejemplo <div>

División de página
<div>Muestra de una división de página</div>
Resultado:
Muestra de una división de página

Alinear una división <div align = "x">(XHTML transicional)

HTML401 Ver <E align>.
Ver elementos de línea <span>

ELEMENTO EN LÍNEA <span>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento de tipo %special (dentro del grupo de %inline) que puede contener elementos del tipo %Inline. Se trata de un elemento a nivel de línea, no pudiendo contener elementos en bloque en su interior. Convierte todos los saltos de línea en espacios. Junto a <div> son los dos elementos básicos de XHTML, pues no tienen una finalidad específica y pueden ser dotados de estilo CSS con total libertad.

TIPOS DE ELEMENTOS EN LÍNEA (%Inline)

Un elemento en línea cualquiera sólo puede contener otros elementos en línea, pero no en bloque. Los elementos en línea se agrupan en el tipo %Inline que se desglosa a su vez en los siguientes:

Veáse que el texto con datos de carácter #PCDATA son en si mismos equivalentes a elementos en línea. En cierto contexto pueden generar cajas en línea o en bloque llamadas cajas anónimas. Hay elementos que se declaran directamente en este tipo básico, como <!ELEMENT textarea (#PCDATA)>.

Ejemplo <span>

Los elementos de línea se configuran en la misma línea y tienen su mayor utilidad cuando se les dota de formato específicos mediante las hojas de estilo. En este ejemplo comprobamos que varios elementos de línea se mantienen en la misma línea.
<div>
    Un bloque 'div' equivalente a un párrafo con un 
    <span>SPAN</span> y otro <span>SPAN</span> 
    en la misma línea.
</div>
Resultado:
Un bloque 'div' equivalente a un párrafo con un SPAN y otro SPAN en la misma línea.
Ver elementos de bloque <div>

ATRIBUTOS GENERALES <E atributo/evento = "x">

DTD-XHTML10T DTD-XHTML10S
Atributos: Clase (class) Identificador (id) Lenguaje (lang) Direccionalidad (dir) Estilo (style) Título (title) Acceso rápido (accesskey) Orden tabulación (tabindex) Alinear (align)

Se relacionan los atributos que son aplicables a la mayoría de elementos XHTML. En la exposición de cada atributo se indican las excepciones. "E" significa un elemento XHTML cualquiera, donde atributo/evento es uno de los siguientes:

Los vínculos a los eventos nos llevan al documento script.html donde se explican. El resto que son atributos generales se exponen a continuación.

Asociar una clase a un elemento <E class = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S "E" es un elemento de XHTML y "x" es el nombre de la clase, siendo un tipo de datos CDATA.

Se aplica a todos los elementos excepto a <base>, <head>, <html>, <meta>, <style>, <title>, <script>. <param>. El atributo class tiene su importancia cuando se usa conjuntamente con una hoja de estilos, donde podemos hacer referencia a la clase para darle un formato específico.

Ejemplo <E class>

Aplicado a un elemento <p> El atributo no modifica el formato por sí mismo, por lo que este ejemplo no produce ningún efecto.
<p class="mi-clase">Contenido</p>
Resultado:

Contenido

Ver también los selectores por clase E.clase{}.

Asignar un nombre único a un elemento <E id = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S Con este atributo se identifican elementos individuales, por lo que en una misma página no pueden haber dos valores "id" iguales. El valor "x" es un tipo de datos ID.

Especialmente útil para combinar con estilos y, sobre todo, para identificar un lugar y así podernos referir al mismo desde otra parte de la página o desde otras páginas. Se aplica a todos los elementos excepto a <base>, <head>, <html>, <meta>, <style>, <title>, <script>.

Este atributo id es equivalente a usar el atributo name cuando es utilizado en vínculos con <a name>, pues sigue vigente para que aún funcione con las versiones más antiguas de HTML, aunque debería usarse siempre id.

Ejemplo <E id>

Podemos referenciar un elemento en una parte de la página y luego, desde otra parte, dirigirnos a áquella con un elemento de vínculo <a href="#id"> tal como se expone a continuación:
<p id="mi párrafo">
    Elemento párrafo referenciado con su id="mi-parrafo".
</p>
<p>
    Otro párrafo.
</p>
<p>
    Ahora en este párrafo podemos ir al id 
    <a href="#mi-parrafo">mi párrafo'</a>
</p>
Resultado:

Elemento párrafo referenciado con su id="mi-parrafo".

Otro párrafo.

Ahora en este párrafo podemos ir al id mi párrafo

Ver también selectores por identificador E.identificador{}.

Especificar el lenguaje en el que está escrito un elemento <E lang = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S El valor "x" es del tipo %LanguageCode. Se trata de unos códigos de lenguaje formados generalmente por dos letras para un idioma dado ("es" para español, "en" para inglés, etc), determinando las características de cada uno como, por ejemplo, el tipo de comillas que se usan (" " en inglés y « » para otros idiomas europeos).

El atributo xml:lang tiene su finalidad en los documentos XML y su propósito es el mismo que lang, siendo recomendable incluir ambos con el mismo valor.

Se aplica a todos los elementos excepto a <base>, <applet>, <br>, <frame>, <iframe>, <param>. <script>.

Ver la especificación de idiomas en este atributo en HTML401.

Direccionalidad del texto <E dir = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S Se trata de un atributo para declara la dirección que tomará el texto al ser leído. Por ejemplo, en español se lee de izquierda a derecha, pero en hebreo es de derecha a izquierda. El valor "x" es un tipo enumerado que puede ser uno de los siguientes valores:
  • ltr, para dirección izquierda a derecha
  • rtl, para dirección derecha a izquierda

Se aplica a todos los elementos excepto <br>, <base>, <applet>, <frame>, <iframe>, <script>.

Se aplica de forma obligatoria para <bdo>.

Ejemplo <E dir>

En este ejemplo presentamos un texto para ser leído de izquierda a derecha y otro invirtiendo el orden de los carácteres para ser leído al revés. La codificación que usualmente se usa en XHTML es UNICODE (o algunos de sus subconjuntos como UTF-8). En UNICODE todos los carácteres tienen asignado una dirección de lectura. Así una letra del subconjunto ASCII (A-Z, a-z) cualquiera tiene una dirección izquierda-derecha.

Pero una del alfabeto hebreo por ejemplo como א tiene una dirección derecha-izquierda. Todos los caracteres son almacenados en XHTML en la dirección izquierda-derecha, pero el navegador es capaz de reconocer una secuencia de caracteres de dirección contraria y entonces, automáticamente, los presenta en orden contrario. Esto se conoce con el nombre de algoritmo de bidireccionalidad o direccionalidad mixta del texto.

Para realizar este ejemplo hemos de desactivar este algoritmo, lo cual puede conseguirse con el elemento <bdo>.

<p>Dirección izquierda derecha con <em>ltr</em>
    <bdo dir="ltr" style="border: solid 1px; ">
        elemento &lt;bdo&gt;
    </bdo>
</p>
<p>Dirección derecha izquierda con <em>rtl</em>
    <bdo dir="rtl" style="border: solid 1px; ">
        elemento &lt;bdo&gt;
    </bdo>
</p>
Resultado:

Dirección izquierda derecha con ltr elemento <bdo>

Dirección derecha izquierda con rtl elemento <bdo>

Mediante estilos CSS puede actuar con {direction} que equivale a este atributo E dir y con {unicode-bidi} que equivale al elemento <bdo>.

Aplicar estilo local a un elemento <E style = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S Los datos de una hoja de estilo CSS pueden incluirse en tres sitios:
  • Estilo externo en un archivo con extensión "*.css", el cual se puede vincular en la cabecera de una página con <link>
  • Estilo interno que se puede declarar en un elemento <style> incluido en la cabecera de una página
  • Estilo local que se configura con el atributo E style

Por lo tanto en estilo local se aplica al elemento E un estilo "x" que es una entidad definida en el DTD como %StyleSheet del tipo final CDATA, siendo una cadena de parejas propiedad:valor que se separan por punto y coma. Las propiedades de estilo CSS se comentan en:

En el valor del atributo E style="x" no puede incluir ciertos caracteres que tienen algún significado en XHTML, que sin embargo si pueden incluirse en estilo interno con el elemento <style>. Por ejemplo, el caracter "&" no puede incluirse en el valor del atributo mientras que sí se puede en el elemento. Para incluirlo en el atributo debe usarse la referencia a caracteres con el valor "&amp;" o "&#38;" que referencia al carácter "&". De igual forma pasa con las comillas dobles (" ") pues el valor del atributo ya está encerrado con ellas. En el caso de que se incluyan comillas en su interior deberán ser simples (' ') o usar la referencia &quot;.

Se aplica a todos los elementos excepto a <base>, <head>, <html>, <meta>, <style>, <title>, <script>. <param>.

Ejemplo <E style>

Para aplicar fuente, tamaño y centrado de un texto a un párrafo:
<p style="font-family:'arial'; font-size:24px; ext-align:center;">
Texto Arial de tamaño 24 centrado</p>
Resultado:

Texto Arial de tamaño 24 centrado

También puede ver la descripción de codificación de caracteres CSS.

Etiquetar elementos con descripciones emergentes <E title = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S Con este atributo aparecerá una etiqueta descriptiva cuando se sitúe el cursor sobre el elemento. El valor "x" es una entidad referenciada en el DTD como %Text siendo de un tipo final CDATA.

Algunos navegadores pueden usar etiquetas descriptivas con el atributo alt disponible para elementos como <img>, <area>, pero siempre se dará preferencia a las etiquetas title. Por lo tanto si quiere anular esas etiquetas puede usar un <E title="">.

Se aplica a todos los elementos excepto a <base>, <head>, <html>, <meta>, <title>, <script>, <param>.

Ejemplo <E tittle>

<p>Párrafo de prueba con una etiqueta emergente descriptiva 
<big title="item">AQUÍ</big>, que se evidencia situando el cursor sobre 
esa palabra.</p>
Resultado:

Párrafo de prueba con una etiqueta descriptiva AQUÍ, que se evidencia situando el cursor sobre esa palabra.

El elemento <img> dispone de un atributo <img alt> obligatorio con similar resultado. Existe un elemento <title> para dotar de título en la cabecera de una página. Con el elemento <link> tiene un significado especial.

Tecla de acceso rápido <E accesskey = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S Con este atributo dotamos una tecla para un acceso rápido a un elemento. El valor "x" es una entidad referenciada en el DTD como %Character que viene a ser un tipo final CDATA. Se trata de dar a "x" el valor de un único carácter con el objeto de que cuando sea pulsada el foco se dirija a ese elemento.

Se aplica exclusivamente a los siguientes elementos: <a>, <area>, <button>, <input>, <textarea>, <label>, <legend>.

Ejemplo <E accesskey>

En este ejemplo damos a un vínculo <a> la tecla 'f' para que obtenga el foco.
<a href="ejemplos/formato/imagen_3.jpg" title="La tecla 'f' nos presenta 'imagen_3.jpg'" 
accesskey="f" >Pulse 'f' para acceder a la imagen 'imagen_3.jpg'</a>
Resultado:

Vínculo que abre un archivo de imagen. En Windows debe pulsar "alt-f": Pulse 'f' (o 'alt+f') para acceder a la imagen 'imagen_3.jpg'

Sólo hemos visto que se ejecuta adecuadamente con Safari, pues haciendo alt+f se abre el vínculo. Con Explorer y alt+f sitúa el foco en el vínculo, pero no lo abre. Con Firefox y Opera no se ejecuta.

Orden de tabulación <E tabindex = "x">

HTML401 DTD-XHTML10T DTD-XHTML10S El valor "x" es del tipo %Number definido en el DTD que viene a ser un tipo final CDATA, conteniendo uno o más dígitos númericos para un número entero en el rango [0, 32767]. Especifica la posición que ocupa el elemento "E" en el orden de tabulación de la página.

Se aplica exclusivamente a los siguientes elementos: <a>, <area>, <object>, <button>, <input>, <textarea>, <select>.

Ejemplo <E tabindex>

Hay un ejemplo comentado en <a tabindex>

Alinear contenidos <E align = "x"> (XHTML Transicional)

HTML401 DTD-XHTML10T El valor "x" es un tipo de datos %TextAlign que puede tomar uno de los siguientes valores:
  • left, alinea a la izquierda
  • center, centrado
  • right, alinea a la derecha
Se aplica a los elementos <p>, <div>, <h1-h6>. Si embargo otros elementos pueden también disponer de un atributo denominado align pero que tiene otra estructura, en cuyo caso se comentará en su lugar. Este atributo está desaprobado aconsejándose usar estilo CSS, como {text-align}.

Ejemplo <E align>

<div align="right">División alineada a la derecha</p>
Resultado:
División alineada a la derecha

COMENTARIO <!-- -->

HTML401
Comentarios que no aparecen en el navegador.

Ejemplo <!--comentario-->

<p>Un párrafo que tiene insertado un comentario <!-- comentario 
--> en medio</p>
Resultado:

Un párrafo que tiene insertado un comentarioen medio

RETORNO DE CARRO <br>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: Finalizar ajuste elementos (clear)
Elemento del tipo %special que no puede contener elementos (tipo EMPTY). Crear un retorno de carro (o salto de línea). La etiqueta se finaliza con la barra inclinada para cumplir la norma de etiqueta de cierre en XHTML, por lo que es importante que haya un espacio entre 'br' y la barra inclinada para que el documento pueda ser leído por HTML en versiones anteriores a XHTML.

Ejemplo <br>

<p>Una línea y un salto de línea <br /> hasta otra 
línea</p>
Resultado:

Una línea y un salto de línea
hasta otra línea

Finalizar ajuste de elementos <br clear = "x"> (XHTML transicional)

Aunque es un atributo transicional, es de gran utilidad para las flotaciones de imágenes en un texto, aunque debería usarse la propiedad de estilo {clear} que realiza el mismo efecto sobre las flotaciones ejecutadas con {float}. De todas formas lo exponemos para saber que, conjuntamente con el atributo de imagen <img align>, pueden flotarse estos elementos sin hacer uso de estilos.

El valor "x" es un tipo enumerado que puede tomar los valores siguientes:

  • left, la siguiente línea comienza en la primera que quede por debajo de los objetos que estén flotando en el margen izquierdo.
  • all, la siguiente línea comienza en la primera que quede por debajo de los objetos que estén flotando en cualquier margen.
  • right, la siguiente línea comienza en la primera que quede por debajo de los objetos que estén flotando en el margen derecho.
  • none, (VALOR INICIAL) la siguiente línea empezará normalmente.

Ejemplo <br clear>

Alinear varias imágenes de tal forma que el texto las rodee. En este primer ejemplo vemos que tenemos dos imagenes y un texto situadas en este orden: imagen de la izquierda (imagen_2.gif), imagen de la derecha (imagen_3.jpg) y texto. Para que los ajustes de las imagenes no influyan sobre lo que viene a continuación incorporamos al final <br clear="all" /> de tal forma que borramos todos los ajustes anteriores pendientes.
<img src="ejemplos/formato/imagen_2.gif" align="left" alt="imagen_2" />
<img src="ejemplos/formato/imagen_3.jpg" align="right" alt="imagen_3" />
<p>LA CALIDAD EN EUROPA: En los últimos meses, y debido principalmente a la creciente importancia 
que se le ha dado a la evaluación de la satisfacción del cliente en la revisión del 2000 de la norma 
ISO 9000 y los modelos de Excelencia (EFQM, Malcolm Baldrige, Premio Deming, etc), ha aflorado la 
cantidad de organizaciones que hacen evaluaciones de satisfacción de sus clientes. Obviamente, si los 
clientes están más satisfechos, serán más fieles y por tanto nos darán mayores ingresos y durante un 
mayor periodo de tiempo.</p>
<br clear="all" />
Resultado:
imagen_2 imagen_3

LA CALIDAD EN EUROPA: En los últimos meses, y debido principalmente a la creciente importancia que se le ha dado a la evaluación de la satisfacción del cliente en la revisión del 2000 de la norma ISO 9000 y los modelos de Excelencia (EFQM, Malcolm Baldrige, Premio Deming, etc), ha aflorado la cantidad de organizaciones que hacen evaluaciones de satisfacción de sus clientes. Obviamente, si los clientes están más satisfechos, serán más fieles y por tanto nos darán mayores ingresos y durante un mayor periodo de tiempo.


Ejemplo <br clear>

Pero si en el ejemplo anterior quisiéramos que el texto empezará por debajo de la imagen de la derecha entonces borraríamos los ajustes a la derecha con <br clear="right" /> tal como se expone a continuación e inmediatamente después de la imagen de la derecha:
<img src="ejemplos/formato/imagen_2.gif" align="left" alt="imagen_2" />
<img src="ejemplos/formato/imagen_3.jpg" align="right" alt="imagen_3" />
<br clear="right" />
<p>LA CALIDAD EN EUROPA: En los últimos meses, y debido principalmente a la creciente importancia 
que se le ha dado a la evaluación de la satisfacción del cliente en la revisión del 2000 de la norma 
ISO 9000 y los modelos de Excelencia (EFQM, Malcolm Baldrige, Premio Deming, etc), ha aflorado la 
cantidad de organizaciones que hacen evaluaciones de satisfacción de sus clientes. Obviamente, si los 
clientes están más satisfechos, serán más fieles y por tanto nos darán mayores ingresos y durante un 
mayor periodo de tiempo.</p>
<br clear="all" />
Resultado:
imagen_2 imagen_3

LA CALIDAD EN EUROPA: En los últimos meses, y debido principalmente a la creciente importancia que se le ha dado a la evaluación de la satisfacción del cliente en la revisión del 2000 de la norma ISO 9000 y los modelos de Excelencia (EFQM, Malcolm Baldrige, Premio Deming, etc), ha aflorado la cantidad de organizaciones que hacen evaluaciones de satisfacción de sus clientes. Obviamente, si los clientes están más satisfechos, serán más fieles y por tanto nos darán mayores ingresos y durante un mayor periodo de tiempo.


Ver más sobre como configurar texto e imágenes en la página <img align>, controlar espacios en {white-space}. Para alinear imágenes y texto con estilos ver {position}. Para hacer flotar elementos mediante estilos ver {float}.

REGLA HORIZONTAL <hr>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: Alto (size) Ancho (width) Sólida (noshade) Alinear (align)
Elemento del tipo %blocktext que no puede contener elementos (tipo EMPTY). Crear líneas de división horizontales, forzando un retorno de carro a la línea siguiente. Se trata de un elemento vacío por lo que se finaliza con un espacio antes de la barra inclinada. En caso de no usar los atributos de este elemento que son transicionales, puede usarse hojas de estilo aplicando bordes con formato personalizado en uno de los lados horizontales para conseguir el mismo efecto que con este elemento. No se pueden incluir dentro de un elemento <p>.

Ejemplo <hr>

Regla forzando un retorno de carro:
<p>Comienzo del texto antes de la regla <hr /> y después de la regla.</p>
Resultado:
Comienzo del texto antes de la regla
y después de la regla.

Alto de la regla <hr size = "x"> (XHTML transicional)

Aplicar altura a la regla horizontal. El valor "x" es un tipo %Pixels definido sobre el tipo básico CDATA representando longitudes enteras en píxeles.

Ejemplo <hr size>

Regla con 15 píxeles de alto.
<hr size="15" />
Resultado:

Ancho de la regla <hr width = "x"> (XHTML transicional)

Aplicar ancho a la regla horizontal. El valor "x" es del tipo %Length definido sobre el tipo básico CDATA representando un número entero para píxeles o bien un número entero finalizado con "%" para porcentajes en relación al ancho disponible.

Ejemplo <hr width>

Barra horizontal que ocupará el 50% del ancho de la ventana del navegador y 15 píxeles de alto.
<hr width="50%" size="15" />
Resultado:

Reglas sólidas <hr noshade = "x"> (XHTML transicional)

Mostrar reglas horizontales sin el efecto cincelado o sombra, mostrándose en color sólido (en algún color por defecto del navegador). El valor "x" es un tipo enumerado que toma el único valor noshade.

Ejemplo <hr noshade>

Regla sin sombra donde hemos añadido el atributo de estilo XHTML para dotarla de color gris.
<hr size="20" noshade="noshade" style="color:silver;" />
Resultado:

Alinear reglas <hr align = "x"> (XHTML transicional)

HTML401 Para alinear la regla. El valor "x" es un tipo enumerado que puede tomar los valores:
  • left, izquierda
  • center, centro
  • right, derecha

Ejemplo <hr align>

Regla alineada a la derecha:
<hr width="10%" size="15" align="right" />
Resultado:

ENCABEZADO <hn> con n=1,2,3,4,5,6

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: Alinear (align)
Elemento del tipo %block que sólo puede contener elementos del tipo %Inline. Crea encabezados mayores cuanto más pequeño sea n. Los principales navegadores usan la fuente Times New Roman negrita con tamaños 24 hasta 8. Los encabezados tienen finalidades específicas en XHTML tal como se expone en las consideraciones sobre separación entre estilo y estructura de un documento XHTML.

Ejemplo <hn>

Encabezado de tamaño 5:
<h5>Ejemplo de un encabezado con n=5</h5>
Resultado:
Ejemplo de un encabezado con n=5

Ejemplo <hn>:

En la propiedad de estilo {counter-increment} se expone un ejemplo para dar numeración automática a los encabezados de un texto.

Alinear texto de un encabezado <p align = "x"> (XHTML transicional)

HTML401 DTD-XHTML10T Ver <E align>.

PÁRRAFO <p>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: Alinear (align)
Elemento del tipo %block que puede contener elementos del tipo %Inline. Crea un párrafo de texto eliminando espacios extras como retornos de carro, tabuladores, etc.

Ejemplo <p>

Párrafo:
<p>Ejemplo de un párrafo con espacios extras entre comillas simples: retorno carro '
', espacios seguidos '     ', espacios de tabulador '	'</p>
Resultado:

Ejemplo de un párrafo con espacios extras entre comillas simples: retorno carro ' ', espacios seguidos ' ', espacios de tabulador ' '

Alinear texto de un párrafo <p align = "x"> (XHTML transicional)

HTML401 Ver <E align>.

ITÁLICA <i>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %fontstyle que puede contener elementos del tipo %Inline. Formato de texto en itálica.

Ejemplo <i>

Texto en itálica:
<i>Ejemplo de texto en itálica.</i>
Resultado:
Ejemplo de texto en itálica
Ver también <em>, {font-style} .

NEGRITA <b>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %fontstyle que puede contener elementos del tipo %Inline. Formato de texto en negrita.

Ejemplo <b>

Texto en negrita:
<b>Ejemplo de texto en negrita</b>
Resultado:
Ejemplo de texto en negrita
Ver también <strong>, {font-weight} .

AGRANDAR TAMAÑO DEL TEXTO <big>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo final %fontstyle que puede contener elementos del tipo %Inline. Agranda el tamaño relativo de una palabra o frase con respecto al texto de alrededor. No se especifica cuanto más grande será, sino que la mayoría de los navegadores se limitan a subir el tamaño entre los típicos 8,9,10,12,14,16,...

Ejemplo <big>

Texto con tamaño de letra más grande. Si se aplica varias veces como en este ejemplo el efecto es acumulativo:
Tamaño normal y <big><big>Tamaño resaltado del texto
</big></big>, tras lo cual vuelve al tamaño normal.
Resultado:
Tamaño normal y Tamaño resaltado del texto, tras lo cual vuelve al tamaño normal.
Ver también <small>, {font-size}.

REDUCIR TAMAÑO DEL TEXTO <small>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %fontstyle que puede contener elementos del tipo %Inline. Reduce el tamaño relativo de una palabra o frase con respecto al texto de alrededor. No se especifica cuanto más pequeño será, sino que la mayoría de los navegadores se limitan a bajar el tamaño entre los típicos 8,9,10,12,14,16,...

Ejemplo <small>

Texto con tamaño de letra más pequeño. Si se aplica varias veces como en este ejemplo el efecto es acumulativo:
Tamaño normal y <small><small>Tamaño reducido del texto<
/small></small>, tras lo cual vuelve al tamaño normal.
Resultado:
Tamaño normal y Tamaño reducido del texto , tras lo cual vuelve al tamaño normal.
Ver también <big>, {font-size}.

ENFATIZAR TEXTO <em>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos del tipo %Inline. Para enfatizar texto, donde en la mayoría de navegadores se muestra en cursiva.

Ejemplo <em>

Texto enfatizado.
Texto normal, <em>texto enfatizado</em>, vuelve a texto 
normal
Resultado:
Texto normal, texto enfatizado, vuelve a texto normal
Ver también <i>, <strong> , {font-style}.

RESALTAR TEXTO <strong>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos del tipo %Inline. Para enfatizar texto, donde en la mayoría de navegadores se muestra en negrita.

Ejemplo <strong>

Texto enfatizado.
Texto normal, <strong>texto enfatizado</strong>, vuelve a 
texto normal
Resultado:
Texto normal, texto enfatizado, vuelve a texto normal
Ver también <b>, <em>, {font-weight}.

SUBÍNDICES <sub>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos tipo %Inline. Para presentar texto en subíndices.

Ejemplo <sub>

La fórmula del agua es H<sub>2</sub>O
Resultado:
La fórmula del agua es H2O
Ver también <sup>

SUPERÍNDICES <sup>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos tipo %Inline. Para presentar texto en superíndices.

Ejemplo <sup>

Superficie de 257 m<sup>2</sup>
Resultado:
Superficie de 257 m2
Ver también <sub>

CENTRAR ELEMENTOS <center> (XHTML transicional)

HTML401 DTD-XHTML10T
Elemento del tipo %blocktext que puede contener elementos de flujo, tipo %Flow. Sirve para el centrado de elementos. Aunque no es un elemento de XHTML estricto, sigue teniendo alguna validez pues el centrado con las hojas de estilo CSS es más complejo, aunque conviene usar estilo dado que este elemento podrá desaparecer en versiones futuras de XHTML. Equivale a usar el atributo transicional en una división <div align="center">.

Ejemplo <center>

Como atributo de una división:
<center>Ejemplo de texto centrado</center>
<div align="center">Ejemplo de texto centrado</div>
Resultado:
Ejemplo de texto centrado
Ejemplo de texto centrado
Ver también <div align>

ANULAR DIRECCIONALIDAD MIXTA DEL TEXTO <bdo>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %special que puede contener elementos del tipo %Inline. Este elemento debe contener obligatoriamente el atributo genérico <E dir> para especificar como queda la nueva dirección del texto. Para comprender este elemento es mejor leer las propiedades CSS de {unicode-bidi} y {direction} que equivale a este elemento y su atributo <bdo dir = "x">.

Ejemplo <bdo>

Un uso del elemento comentándose los detalles en el resultado.
Originalmente...
<div style="font-size: 2em; border: solid 1px; ">
    español &#1488; &#1489; &#1490; 
    &#1491; &#1492; &#1493; español
</div>
Pero ...
<div style="font-size: 2em; border: solid 1px; ">
    español &#1493; &#1492; &#1491; 
    &#1490; &#1489; &#1488; español
</div>
Para ...
<div style="font-size: 2em; border: solid 1px; ">
    español 
    <bdo dir="ltr">
        &#1493; &#1492; &#1491; &#1490; 
        &#1489; &#1488;
    </bdo>
    español
</div>
Resultado:
Originalmente un texto como el siguiente escrito en español (dirección por defecto de izquierda a derecha) que contenga un trozo de texto en un idioma que escribe de derecha a izquierda como hebreo, es detectado por un algoritmo de bidireccionalidad o direccionalidad mixta que forma parte del navegador. En este caso el texto está en hebreo y se corresponde con los códigos UNICODE del 1488 (א) al 1493 (ו), los seis primeros caracteres del alfabeto hebreo. Está almacenado en ese orden ascendente, pero se presenta al revés, como corresponde al texto en hebreo.
español א ב ג ד ה ו español
Pero hay algunos casos como el protocolo MIME para correo que exige el almacenamiento de textos en la misma dirección en la que se leen. Así el texto estaría almacenado en su correcta forma de presentarlo (del 1493 al 1488), pero el algoritmo de bidireccionalidad lo invierte:
español ו ה ד ג ב א español
Para evitar esto desactivamos el algoritmo con el elemento <bdo> y con su atributo dir en este caso con el valor ltr, para que indique al navegador que la dirección de lectura es de izquierda a derecha, pues los caracteres ya vienen almacenados en su posición correcta:
español ו ה ד ג ב א español

AUTOR <address>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %blocktext que puede contener elementos del tipo %Inline. Se usa por los autores de las páginas para proporcionar información de contacto. Suele aparecer al principio de un documento, al inicio del cuerpo <body>.

Ejemplo <address>

Aunque la especificación habla sobre este elemento, el navegador no proporciona más efecto que poner el tipo de letra en cursiva, como vemos en este ejemplo:
Contenido de la página...
<address>Datos del autor: documentos confeccionados por XXX...</address>
Resultado:
Contenido de la página...
Datos del autor: documentos confeccionados por XXX...

BLOQUE SANGRADO DE CITA <blockquote>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: URL de la cita (cite)

Elemento del tipo %blocktext que puede contener elementos en bloque del tipo %Block. Se usa para sangrar un bloque de texto, especialmente para mostrar citas identificándose autor, origen e idioma por medio del atributo cite.

Ejemplo <blockquote>

Bloque sangrado.
<p>Primer párrafo antes de la cita...</p>
<blockquote>Aquí comienza la cita...</blockquote>
<p><p>Ahora continúa el texto...</p>
Resultado:

Primer párrafo antes de la cita...

Aquí comienza la cita...

Ahora continúa el texto...

Mostrar el URL de la cita <blockquote cite = "x">

HTML401 Para incorporar "x" del tipo %URI de la cita. Los navegadores probados no tratan este atributo. Sólo Firefox muestra el menú propiedades con el botón derecho del ratón al situarnos sobre el elemento y ofreciendo en este caso el valor del atributo en una cuadro emergente.

Ejemplo <blockquote cite>

<blockquote cite="http://www...">Aquí comienza la cita...</blockquote>
Resultado:
Aquí comienza la cita...
Ver también <cite>, <q>.

CITAR PASAJES BREVES DEL TEXTO <q>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: URL de la cita (cite)
Elemento del tipo %phrase que puede contener elemento en línea del tipo %Inline. Las citas en línea se sitúan automáticamente entre comillas.

Ejemplo <q>

Si el navegador no soporta este elemento, no tendrá ningún efecto.
<q>Texto citado</q>
Resultado:
Texto citado

Facilitar URL de la cita <q cite = "x">

HTML401 Para incorporar "x" del tipo URL.

Ejemplo <q cite>

Se emplea este elemento, aunque si el navegador no soporta este atributo no tendrá ningún efecto. Sólo Firefox muestra el menú propiedades con el botón derecho del ratón al situarnos sobre el elemento y ofreciendo en este caso el valor del atributo en una cuadro emergente.
<q cite="http://www...">Texto citado</q>
Resultado:
Texto citado
Ver también <blockquote>, <cite>. En el selector por pseudoclase E:lang(){} se explica como personalizar las comillas para las citas en cada lenguaje. En las propiedades de comillas {quotes} y de texto generado {context} puede encontrar formas de representar el entrecomillado en varios niveles para las citas.

MARCAR TEXTO COMO CITA <cite>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos del tipo %Inline. Marca el texto como cita. Se trata de citas en línea que generalmente se muestran en cursiva, en oposición a las citas en bloques <blockquote> que sólo se sangran.

Ejemplo <cite>

<cite>Texto citado</cite>
Resultado:
Texto citado
Ver también <blockquote>, <q>

EXPLICAR ABREVIATURAS <abbr>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos del tipo %Inline. Marca el texto como una abreviatura. Debe usarse con el atributo title para ofrecer la explicación de la abreviatura, como hacemos con el siguiente ejemplo. Firefox y Opera añaden un subrayado de puntos mientras que Explorer y Safari no ejecutan nada al respecto. Sólo Firefox muestra el menú propiedades con el botón derecho del ratón al situarnos sobre el elemento y ofreciendo en este caso el valor del atributo title en cuadro emergente.

Ejemplo <abbr>

En este ejemplo se muestra la explicación emergente al situar el cursor en la abreviatura.
<abbr title="Hyper Text Mark Language">HTML</abbr>
Resultado:
HTML
Ver también <acronym>

EXPLICAR ACRÓNIMOS <acronym>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos del tipo %Inline. Marca el texto como un acrónimo de forma similar al elemento anterior <abbr>.

Ejemplo <acronym>

En este ejemplo se muestra la explicación emergente al situar el cursor en el acrónimo.
<acronym title="Radio Detection And Ranging">radar</acronym>
Resultado:
radar
Ver también <abbr>

DEFINICIÓN <dfn>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos en línea del tipo %Inline. Con este elemento se indica el lugar donde se define el término encerrado.

Ejemplo <dfn>

Los navegadores se limitan a poner la fuente en cursiva.
<dfn>Término</dfn>
Resultado:
Término

MARCAR TEXTO BORRADO <del>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: URL (cite) Fecha-hora (datetime)
Elemento del tipo %misc que puede contener elementos del tipo %Inline. Marca el texto tachándolo para significar que ha sido borrado.

Ejemplo <del>

Texto···<del>este texto ha sido borrado</del>...sigue el 
texto...
Resultado:
Texto...este texto ha sido borrado...sigue el texto...

URL que informa sobre el borrado <del cite = "x">

Atributo del tipo %URI que nos da un vínculo a información sobre la causa del borrado.

Ejemplo <del cite>

Se usa este atributo, aunque no causa ningún efecto aparente en los navegadores consultados.
Texto <del cite="http://www.muestra.com">BORRADO</del>.
Resultado:
Texto BORRADO.

Fecha-hora del borrado <del datetime = "x">

El valor "x" es del tipo %Datetime, para especificar fecha y hora en la que se realizó el borrado.

Ejemplo <del datetime>

Se usa la fecha aunque los navegadores no muestran ningún efecto, sólo en Firefox se observa que con el botón derecho del ratón puede accederse a una ventana con las propiedades cuando se sitúa sobre el elemento, mostrándonos la ruta indicada y la fecha.
Texto <del cite="http://www.muestra.com" datetime="20071221T19:25:00Z">
BORRADO</del>
Resultado:
Texto BORRADO.
Ver también <ins>

MARCAR TEXTO DEL TECLADO <kbd>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos del tipo %Inline. Fuente monoespaciada que presenta el texto según lo especificado en las opciones del navegador para la fuente del texto sin formato. El resultado es similar a usar <code>, <samp> o <tt> .

Ejemplo <kbd>

Se trata de un elemento en línea eliminando los espacios extras. Para conservarlos usar el elemento de texto preformetado <pre>.
<kbd>texto		marcado</kbd>
Resultado:
texto marcado
Ver también <pre>, <code>, <samp>, <tt>

MARCAR TEXTO INSERTADO <ins>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: URL (cite) Fecha-hora (datetime)
Elemento del tipo %misc que puede contener elementos del tipo %Flow. Marca el texto subrayándolo para significar que ha sido insertado. Puede prestarse a confusiones con los vínculos por el subrayado.

Ejemplo <ins>

Texto···<ins>este texto ha sido insertado</ins>...sigue el 
texto...
Resultado:
Texto...este texto ha sido insertado...sigue el texto...

URL que informa sobre la inserción <ins cite = "x">

Atributo del tipo %URI que nos da un vínculo a información sobre la causa de la inserción.

Ejemplo <ins cite>

Se usa este atributo, aunque no causa ningún efecto aparente en los navegadores consultados, sólo en Firefox se observa que con el botón derecho del ratón puede accederse a una ventana con las propiedades cuando se sitúa sobre el elemento, mostrándonos la ruta indicada.
Texto con <ins cite="http://www.muestra.com">TEXTO INSERTADO</ins> en su 
interior.
Resultado:
Texto con TEXTO INSERTADO en su interior.

Fecha-hora de la inserción <ins datetime = "x">

El valor "x" es del tipo %Datetime, para especificar fecha y hora en la que se realizó la inserción.

Ejemplo <ins datetime>

Se usa la fecha aunque los navegadores no muestran ningún efecto, sólo en Firefox se observa que con el botón derecho del ratón puede accederse a una ventana con las propiedades cuando se sitúa sobre el elemento, mostrándonos la ruta indicada y la fecha.
Texto con <ins cite="http://www.muestra.com" datetime="20071221T19:25:00Z">
TEXTO INSERTADO</ins> en su interior.
Resultado:
Texto con TEXTO INSERTADO en su interior.
Ver también <del>

TEXTO PREFORMATEADO COMO CÓDIGO <code>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos tipo %Inline. Fuente monoespaciada, aplicando el texto sin formato tal como se especifique en las opciones del navegador. Útil para mostrar código informático y direcciones URL.

Ejemplo <code>

Se trata de un elemento en línea, eliminando los espacios extras como se muestra. Para conservarlos usar el elemento de texto preformetado <pre>.
<code>muestra de		código</code>
Resultado:
muestra de código
Ver también <pre>, <kbd>, <samp>, <tt>

TEXTO PREFORMATEADO EN BLOQUE <pre>

HTML401 DTD-XHTML10T DTD-XHTML10S
Atributos: Preservar espacios (xml:space)
Elemento del tipo %blocktext que puede contener elementos tipo %Inline, pero limitando a algunos elementos lo que da lugar al tipo %pre.content, que puede incluir los tipos #PCDATA, %phrase, %inline-forms así como los elementos <a><br><span><bdo><map><tt><i><b> Muestra el texto tal como aparece en el documento original, con lo cual conseguimos que el navegador no elimine los espacios extras ni retornos de carro. Es adecuado para representar código informático, mostrándose normalmente con fuente monoespaciada como Courier, aunque podemos cambiarle la fuente si es necesario. Este elemento es de bloque, pudiendo usarse elementos similares de línea como <code>.

Ejemplo <pre>

Texto preformateado:
<pre>
            Mostramos como varias líneas se separan
    por retornos de carro, por espacios como los
    que vienen ahora         y también por tabuladores
    como los que están a la izquierda sin que el 
    navegador los altere.
</pre>
Resultado: 
            Mostramos como varias líneas se separan
    por retornos de carro, por espacios como los
    que vienen ahora         y también por tabuladores
    como los que están a la izquierda sin que el 
    navegador los altere.

Preservar espacios <pre xml:space = "x">

XML10 Este atributo, como todos los que empiezan por xml:, es específico de XML. Supone preservar los espacios en blanco. Viene definido en el DTD como un tipo enumerado con un único valor preserve. Además se declara #FIXED y, como sólo tiene un valor, se le dota de valor por defecto el mismo preserve. Por lo tanto no es necesario manejarlo pues dota al elemento <pre> con la función de preservar los espacios por defecto.
Ver también texto preformateado como código <code>, controlar espacios en estilos con {white-space}

TEXTO DE EJEMPLO MONOESPACIADO <samp>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos tipo %Inline. Fuente monoespaciada para presentar un texto de ejemplo según lo especificado en las opciones del navegador para la fuente del texto sin formato. El resultado es similar a usar <code>, <kbd> o <tt>.

Ejemplo <samp>

Se trata de un elemento en línea eliminando los espacios extras. Para conservarlos usar el elemento de texto preformetado <pre>.
<samp>texto		de ejemplo</samp>
Resultado:
texto de ejemplo
Ver también <pre>, <code>, <kbd>, <tt>

TEXTO MONOESPACIADO <tt>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %fontstyle que puede contener elementos tipo %Inline. Fuente monoespaciada para presentar texto según lo especificado en las opciones del navegador para la fuente del texto sin formato. El resultado es similar a usar <code>, <kbd> o <samp> .

Ejemplo <tt>

Se trata de un elemento en línea eliminando los espacios extras. Para conservarlos usar el elemento de texto preformetado <pre>.
<tt>texto		monoespaciado</tt>
Resultado:
texto monoespaciado
Ver también <pre>, <code>, <kbd>, <samp>

VARIABLE <var>

HTML401 DTD-XHTML10T DTD-XHTML10S
Elemento del tipo %phrase que puede contener elementos del tipo %Inline. Para indicar que el texto es una variable o dato de un programa.

Ejemplo <var>

Usamos este elemento en un ejemplo, pero los navegadores se limitan a ponerlo en cursiva.
Incluimos un elemento de este tipo con 
<var>datos de programa</var>
en su interior.
Resultado:
Incluimos un elemento de este tipo con datos de programa en su interior.
Histórico