Texto: Etiquetas de Bloque

Texto. HTML. Páginas web HTML / XHTML y hojas de estilo CSS.
Bartolomé Sintes Marco Página 1 de 8
Texto
En XHTML, todo el texto de un documento debe estar contenido por alguna de las etiquetas que se comentan en esta página. En
principio se puede utilizar cualquier etiqueta para cualquier fin, pero la costumbre es utilizar cada etiqueta para un tipo
determinado de texto. Algunos programas que analizan páginas web, por ejemplo los buscadores, utilizan las etiquetas para
interpretar el contenido de la página.
Nota: El texto de una página web puede encontrarse también en una estructura especial (una lista, una tabla o un formulario),
pero estas estructuras no se tratan aquí.
Existen tres tipos de etiquetas aplicables a texto sin ninguna estructura predeterminada, las etiquetas de bloque, las etiquetas
en-línea y las etiquetas de contenedores de texto:
• Las etiquetas de bloque son las que no necesitan estar contenidas dentro de ninguna etiqueta (salvo <body> y <html>).
• Las etiquetas en-línea necesitan estar contenidas dentro de otras etiquetas de bloque, ya que están pensadas para afectar
a sólo una parte del texto.
• Las etiquetas de contenedores de texto son etiquetas que pueden contener en su interior etiquetas de bloque
Etiquetas de bloque
Título: <title>
La etiqueta <title> identifica el título de la página, que se muestra en la barra de título de la ventana del navegador. La etiqueta
<title> es obligatoria y sólo puede aparecer una vez en el documento, en la sección <head>. No se le puede aplicar
prácticamente ningún estilo (y el único que se le podría aplicar, la dirección de escritura, no funciona actualmente (diciembre de
2011) en los navegadores, como se puede comprobar con esta página de ejemplo.
Párrafo: <p>
La etiqueta de texto más común es la etiqueta <p>, pensada para contener párrafos, es decir todo lo que no tenga un significado
especial (títulos, etc).
<p>Tabla de los capítulos que contiene

esta famosa historia del valeroso caballero Tabla de los capítulos que contiene esta famosa
don Quijote de la Mancha.</p> historia del valeroso caballero don Quijote de la
Mancha.
<p>CAPÍTULO PRIMERO Que trata de la condición
y ejercicio del famoso y valiente hidalgo CAPÍTULO PRIMERO Que trata de la condición y
don Quijote de la Mancha.</p>
ejercicio del famoso y valiente hidalgo don Quijote de
<p>CAPÍTULO SEGUNDO Que trata de la primera la Mancha.
salida que de su tierra hizo el ingenioso
don Quijote.</p> CAPÍTULO SEGUNDO Que trata de la primera salida
que de su tierra hizo el ingenioso don Quijote.
<p>...</p>
CAPÍTULO TERCERO Donde se cuenta la graciosa
manera que tuvo don Quijote en armarse caballero.
...
En general, los navegadores no muestran los espacios en blanco ni los saltos de línea del código fuente (salvo en la etiqueta
<pre>).
<p>Un Dos Tres</p>

Un Dos Tres
<p>Un
Dos Un Dos Tres
Tres</p>
Un Dos Tres
<p>Un Dos Tres</p>
A diferencia de los procesadores de textos, en los que se pueden separar dos párrafos mediante párrafos vacíos, si un párrafo
<p> no contiene nada, los navegadores no lo muestran (salvo que la hoja de estilo incluya bordes o márgenes)
<p>Tabla de los capítulos que contiene

esta famosa historia del valeroso caballero Tabla de los capítulos que contiene esta famosa
don Quijote de la Mancha.</p> historia del valeroso caballero don Quijote de la
Mancha.
<p></p>
CAPÍTULO PRIMERO Que trata de la condición y
<p></p>
ejercicio del famoso y valiente hidalgo don Quijote de
<p>CAPÍTULO PRIMERO Que trata de la condición la Mancha.
y ejercicio del famoso y valiente hidalgo
don Quijote de la Mancha.</p>
http://www.mclibre.org/consultar/amaya/xhtml/xhtml_texto.html 03/10/2013
Texto. HTML. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé Sintes Marco Página 2 de 8
Cabeceras: <h1> <h2> <h3> <h4> <h5> <h6>
Para los títulos y subtítulos de los apartados de un documento debes utilizar las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Debes utilizar la etiqueta <h1> para el título principal del documento (a no confundir con la etiqueta <title>, que corresponde al
texto de la barra de título de la ventana del navegador). Debes utilizar la etiqueta <h2> en los títulos de los apartados del
documento, <h3> para los subapartados de cada apartado, y así sucesivamente.
<h1>Cabecera 1</h1>
<h2>Cabecera 2</h2> Cabecera 1

<h3>Cabecera 3</h3>
<h4>Cabecera 4</h4> Cabecera 2

<h5>Cabecera 5</h5>
Cabecera 3
<h6>Cabecera 6</h6>
Cabecera 4
Cabecera 5
Cabecera 6
La hoja de estilo por omisión de los navegadores suele mostrar las cabeceras en tamaño cada vez más pequeño (incluso más
pequeño que el tamaño de los párrafos <p>), en negrita y con márgenes mayores que los los párrafos <p>.
Preformateado <pre>
La etiqueta <pre> se utiliza cuando se quiere conservar los espacios en blanco y los saltos de línea del texto original. En el resto
de etiquetas, los navegadores no muestran ni las líneas en blanco ni varios espacios en blanco seguidos.
<pre>body {
text-align: justify;
body {
}</pre> text-align: justify;
}
<p>body {
body { text-align: justify;}
text-align: justify;
}</p>
La hoja de estilo por omisión de los navegadores suele mostrar el bloque preformateado <pre> en tipo de letra monospace
(normalmente Courier).
Dirección <address>
La etiqueta <address> está pensada para contener información de contacto del autor de la página.
<address>Autor: Bartolomé Sintes Marco<br />
Última modificación: 22 de diciembre de 2011</address> Autor: Bartolomé Sintes Marco

Última modificación: 22 de diciembre de 2011
La hoja de estilo por omisión de los navegadores suele mostrar el bloque de dirección <address> en cursiva.
Volver al principio de la página
Etiquetas en-línea
Las etiquetas en-línea son las que abarcan porciones de texto (una o varias palabras) que están contenidas en alguna etiqueta
de bloque.
Salto de línea <br />
La etiqueta <br /> (del inglés break) permite insertar saltos de línea en un párrafo (o cualquier etiqueta de bloque). Por ejemplo,
para mostrar varios versos de un poema o canción:
<p>Tristes guerras<br />
si no es amor la empresa.<br />
Tristes. Tristes.</p> Tristes guerras
<p>Tristes armas<br />
si no es amor la empresa.
Tristes. Tristes.
si no son las palabras.<br />
Tristes armas
Tristes. Tristes.</p>
si no son las palabras.
<p>Tristes hombres<br /> Tristes. Tristes.
si no mueren de amores.<br /> Tristes hombres
Tristes. Tristes.</p>
si no mueren de amores.
Tristes. Tristes.
Tipo de información
<abbr>
Pensada para etiquetar abreviaturas. El significado de la abreviatura debe escribirse mediante el atributo title.
Nota: Internet Explorer 7 muestra correctamente esta etiqueta. Las versiones anteriores lo hacían incorrectamente, como
se comenta en la página de diferencias entre IE7 e IE6.
<p>Sitúa el cursor del ratón sobre la abreviatura

<abbr title="cónfer (compárese, véase)">cf</abbr>
para ver su significado.</p> Sitúa el cursor del ratón sobre la abreviatura cf
para ver su significado.
<acronym>
Pensada para etiquetar acrónimos (siglas que se pronuncian como palabras). El significado del acrónimo debe escribirse
mediante el atributo title.
<p>Sitúa el cursor del ratón sobre el acrónimo

<acronym title="Rogamos Empujen Nuestros Ferrocarriles
Estropeados (es broma)">RENFE</acronym> para ver su Sitúa el cursor del ratón sobre el acrónimo
significado.</p> RENFE para ver su significado.
<cite>
Pensada para identificar una cita o referencia a otras fuentes.
Los navegadores suelen mostrar la etiqueta <cite> en cursiva.
<p>Como escribió Robert Browning, <cite>The best

is yet to be</cite>.</p>
Como escribió Robert Browning, The best is yet to
be.
<code>
Pensada para etiquetar fragmento de código de ordenador.
Los navegadores suelen mostrar la etiqueta <code> en tipo de letra monospace (normalmente Courier).
<p>El primer programa que se enseña en un lenguaje

de programación suele ser algo así como El primer programa que se enseña en un
<code>main() { printf ("Hola, mundo"); }</code></p> lenguaje de programación suele ser algo así
como main() { printf ("Hola, mundo"); }
<del>
Pensada, junto con la etiqueta <ins>, para etiquetar modificaciones en un texto. Esta etiqueta debería etiquetar el texto que
se ha eliminado de una página al revisarlo (si se quiere que se sepa que se ha eliminado, claro).
Los navegadores suelen mostrar la etiqueta <del> tachada.
<p>Internet Explorer 6 era un navegador bastante

<del>malo</del> mejorable. Internet Explorer 7 Internet Explorer 6 era un navegador bastante malo
cumplía mejor las recomendaciones del W3C.</p> mejorable. Internet Explorer 7 cumplía mejor las
recomendaciones del W3C.
<dfn>
Pensada para identificar la primera aparición de un término en un texto.
Los navegadores suelen mostrar la etiqueta <dfn> en cursiva.
<p>En 2005 se empezaron a comercializar discos duros que empleaban la En 2005 se empezaron a
<dfn>grabación magnética perpendicular</dfn> comercializar discos duros
para aumentar la densidad de información.</p>
que empleaban la grabación
magnética perpendicular para
aumentar la densidad de
información.
<em>
Pensada para resaltar una porción de texto dándole énfasis, aunque no tanto como con la etiqueta <strong>.
Los navegadores suelen mostrar la etiqueta <em> en cursiva.
<p>Es la <em>última</em> vez que te lo digo.</p>
Es la última vez que te lo digo.
<ins>
Pensada, junto con la etiqueta <del>, para etiquetar modificaciones en un texto. Esta etiqueta debería etiquetar el texto que
se ha añadido a una página al revisarlo (si se quiere que se sepa que se ha añadido, claro).
Los navegadores suelen mostrar la etiqueta <ins> subrayada.
<p>La verdad es que Microsoft podría mejorar su

navegador<ins>, respetando las recomendaciones La verdad es que Microsoft podría mejorar su
del W3C</ins>.</p> navegador, respetando las recomendaciones del
W3C.
<kbd>
Pensada para identificar el texto que debe teclear el usuario.
Los navegadores suelen destacar la etiqueta <kbd> cambiando el tipo de letra.
<p>En Amaya, para seleccionar un elemento, debes

pulsar la tecla <kbd>F2</kbd>.</p>
En Amaya, para seleccionar un elemento, debes
pulsar la tecla F2.
<samp>
Pensada para identificar un ejemplo de la salida de un programa o de un script.
Los navegadores suelen destacar la etiqueta <samp> cambiando el tipo de letra.
<p>Al ejecutar tu primer programa, en la pantalla

podrás leer <samp>Hola, mundo</samp>.</p>
Al ejecutar tu primer programa, en la pantalla
podrás leer Hola, mundo.
<strong>
Pensada para resaltar una porción de texto dándole énfasis, aún más que con la etiqueta <em>.
Los navegadores suelen mostrar la etiqueta <strong> en negrita.
<p>Es la <strong>última</strong> vez que te lo digo.</p>
Es la última vez que te lo digo.
<var>
Pensada para identificar una instancia de una variable o de un argumento de programa.
Los navegadores suelen mostrar la etiqueta <var> en cursiva.
<p><var>$saludo</var> = "Hola, mundo";</p>
$saludo = "Hola, mundo";
Elemento carácter
Estas etiquetas están en su mayoría desaconsejadas, ya que pueden conseguirse sus efectos utilizando las propiedades
correspondientes de las hojas de estilo.
<b>
Desaconsejada. Originalmente pensada para etiquetar texto en negrita.
Los navegadores suelen mostrar la etiqueta <b> en negrita.
<p>Esta palabra está <b>resaltada</b>.</p>
Esta palabra está resaltada.

resaltada
<bdo>
Pensada para elegir la dirección del texto (de izquierda a derecha o de derecha a izquierda). Es obligatorio especificar el
atributo dir, con el valor rtl (de derecha a izquierda) o ltr (de izquierda a derecha).
<p><bdo dir="rtl">Esta frase está escrita al derecho,

pero debería leerse al revés</bdo>.</p>
orep ,ohcered la atircse átse esarf atsE
séver la esreel aírebed.
<big>
Desaconsejada. Originalmente pensada para etiquetar texto de mayor tamaño.
Los navegadores suelen mostrar la etiqueta <big> con la propiedad font-size: larger.
<p>Esta palabra está <big>aumentada</big>.</p>
Esta palabra está aumentada.
<i>
Desaconsejada. Originalmente pensada para etiquetar texto en itálica.
Los navegadores suelen mostrar la etiqueta <i> con la propiedad font-style: italic.
<p>Esta palabra está en <i>itálica</i>.</p>
Esta palabra está en itálica.
<q>
Pensada para identificar una cita o referencia a otras fuentes. La recomendación HTML 4.0 especifica que los navegadores
deben añadir automáticamente comillas al texto marcado.
<p>Como escribió Robert Browning, <q>The best

is yet to be</q>.</p>
Como escribió Robert Browning, «The best is yet to
be».
<small>
Desaconsejada. Originalmente pensada para etiquetar texto de menor tamaño.
Los navegadores suelen mostrar la etiqueta <small> con la propiedad font-size: smaller.
<p>Esta palabra está <small>reducida</small>.</p>
Esta palabra está reducida.
<sub>
Pensada para identificar texto en subíndice.
<p>2 H<sub>2</sub> + O<sub>2</sub> →

2 H<sub>2</sub>O</p>
2 H2 + O2 → 2 H2O
<sup>
Pensada para identificar texto en superíndice.
<p>El último teorema de Fermat dice que la ecuación

x<sup>n</sup> + y<sup>n</sup> = z<sup>n</sup> no tiene El último teorema de Fermat dice que la
soluciones enteras para <var>x</var>, <var>y</var> y ecuación xn + yn = zn no tiene soluciones
<var>z</var> cuando <var>n</var> > 2.</p>
enteras para x, y y z cuando n > 2.
<tt>
Desaconsejada. Originalmente pensada para etiquetar texto de fuente de espaciado fijo.
Los navegadores suelen mostrar la etiqueta <tt> en tipo de letra monospace (normalmente Courier).
<p>Estas palabras tienen un <tt>espaciado fijo</tt>.</p>
Estas palabras tienen un espaciado fijo.
Etiquetas de contenedores de texto

Bloque de cita: <blockquote>
La etiqueta <blockquote> está pensada para identificar una cita larga, que puede contener varios párrafos u otras etiquetas.
Los navegadores suelen mostrar la etiqueta <blockquote> con márgenes a izquierda y derecha.
<p>Plan de Instrucción Pública de J. Pidal, año 1845. Exposición

de motivos</p> Plan de Instrucción
<blockquote><p>Antiguamente eran las universidades independientes Pública de J. Pidal, año
entre sí, y hasta del Gobierno mismo: cada cual tenía su régimen, sus estudios, 1845. Exposición de
sus métodos y aun sus pretensiones distintas: no sólo disponian arbitrariamente motivos
de sus fondos, sino que hasta era también arbitraria en ellas la enseñanza. Ya
desde fines del siglo pasado trató el Gobierno de poner diques a semejante
anarquía, que, tras del desconcierto general de todas las ciencias, mantenia a
Antiguamente
éstas en atraso lastimoso, perpetuando rancias ideas, doctrinas desacreditadas eran las
y perjudiciales preocupaciones.</p> universidades
<p>La enseñanza de la juventud no es una mercancía que puede dejarse independientes
entregada a la codicia de los especuladores, ni debe equipararse a las demás entre sí, y hasta
industrias en que domina sólo el interés privado. Hay en la educación un interés
social, de que es guarda el Gobierno, obligado a velar por él cuando puede ser del Gobierno
gravemente comprometido. No existe entre nosotros ley alguna que prescriba la mismo: cada
libertad de enseñanza; y aun cuando existiera, debería, como en todas partes, cual tenía su
sujetarse esta libertad a las condiciones que el bien público reclama, siendo régimen, sus
preciso dar a los padres aquellas garantías que han menester cuando tratan de
confiar a manos ajenas lo mas precioso que tienen, y precaverlos contra las
estudios, sus
brillantes promesas de la charlatanería, de que por desgracia se deja harto métodos y aun
fácilmente seducir su credulidad y mal aconsejado cariño. </p></blockquote> sus
pretensiones
distintas: no
sólo disponian
arbitrariamente
de sus fondos,
sino que hasta
era también
arbitraria en
ellas la
enseñanza. Ya
desde fines del
siglo pasado
trató el
Gobierno de
poner diques a
semejante
anarquía, que,
tras del
desconcierto
general de
todas las
ciencias,
mantenia a
éstas en atraso
lastimoso,
perpetuando
rancias ideas,
doctrinas
desacreditadas
y perjudiciales
preocupaciones.
La enseñanza
de la juventud
no es una
mercancía que
puede dejarse
entregada a la
codicia de los
especuladores,
ni debe
equipararse a
las demás
industrias en
que domina sólo
el interés
privado. Hay en
la educación un
interés social,
de que es
guarda el
Gobierno,
obligado a velar
por él cuando
puede ser
gravemente
comprometido.
No existe entre
nosotros ley
alguna que
prescriba la
libertad de
enseñanza; y
aun cuando
existiera,
debería, como
en todas partes,
sujetarse esta
libertad a las
condiciones que
el bien público
reclama, siendo
preciso dar a
los padres
aquellas
garantías que
han menester
cuando tratan
de confiar a
manos ajenas lo
mas precioso
que tienen, y
precaverlos
contra las
brillantes
promesas de la
charlatanería,
de que por
desgracia se
deja harto
fácilmente
seducir su
credulidad y
mal aconsejado
cariño.
División <div>
Las divisiones son el mecanismo más importante para agrupar diversos elementos. Se tratan en otra página de este curso.
Los navegadores no suelen mostrar la etiqueta <div> de ninguna manera en especial.
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 22 de diciembre de 2011
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.

Texto: Etiquetas de Bloque

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Texto: Etiquetas de Bloque

Cargado por

Copyright:

Formatos disponibles

Texto. HTML. Páginas web HTML / XHTML y hojas de estilo CSS.

Bartolomé Sintes Marco Página 1 de 8

<p>Tabla de los capítulos que contiene

<p>Un Dos Tres</p>

<p>Tabla de los capítulos que contiene

Cabeceras: <h1> <h2> <h3> <h4> <h5> <h6>

<h2>Cabecera 2</h2> Cabecera 1

<h4>Cabecera 4</h4> Cabecera 2

<address>Autor: Bartolomé Sintes Marco<br />

Última modificación: 22 de diciembre de 2011</address> Autor: Bartolomé Sintes Marco

Salto de línea <br />

<p>Tristes guerras<br />

si no es amor la empresa.<br />

<p>Sitúa el cursor del ratón sobre la abreviatura

<p>Sitúa el cursor del ratón sobre el acrónimo

<p>Como escribió Robert Browning, <cite>The best

<p>El primer programa que se enseña en un lenguaje

<p>Internet Explorer 6 era un navegador bastante

<p>Es la <em>última</em> vez que te lo digo.</p>

Es la última vez que te lo digo.

<p>La verdad es que Microsoft podría mejorar su

<p>En Amaya, para seleccionar un elemento, debes

<p>Al ejecutar tu primer programa, en la pantalla

<p>Es la <strong>última</strong> vez que te lo digo.</p>

Es la última vez que te lo digo.

<p><var>$saludo</var> = "Hola, mundo";</p>

$saludo = "Hola, mundo";

<p>Esta palabra está <b>resaltada</b>.</p>

Esta palabra está resaltada.

<p><bdo dir="rtl">Esta frase está escrita al derecho,

<p>Esta palabra está <big>aumentada</big>.</p>

Esta palabra está aumentada.

<p>Esta palabra está en <i>itálica</i>.</p>

Esta palabra está en itálica.

<p>Como escribió Robert Browning, <q>The best

<p>Esta palabra está <small>reducida</small>.</p>

Esta palabra está reducida.

<p>2 H<sub>2</sub> + O<sub>2</sub> &rarr;

<p>El último teorema de Fermat dice que la ecuación

<p>Estas palabras tienen un <tt>espaciado fijo</tt>.</p>

Estas palabras tienen un espaciado fijo.

Volver al principio de la página

Etiquetas de contenedores de texto

<p>Plan de Instrucción Pública de J. Pidal, año 1845. Exposición

También podría gustarte

<p>2 H<sub>2</sub> + O<sub>2</sub> →