Lenguaje HTML/Formateo de texto

Los documentos suelen tener un título, el texto esta dividido en párrafos, pueden tener partes resaltadas. incluir citas...
En esta sección veremos los elementos HTML que nos permiten darle forma a un documento.

Encabezados

Una buena forma de estructurar un documento es dividirlo en secciones. El HTML permite hacerlo mediante encabezados, que son los títulos de cada sección. El elemento de encabezado es el carácter h seguido de un número del 1 al 6. Así tenemos que los encabezados son:

h1, h2, h3, h4, h5 y h6.

El h1 es el encabezado de mayor tamaño y el h6 es el encabezado de menor tamaño. Se pueden utilizar los encabezados para anidar secciones, creando una estructura jerárquica. De este modo, el encabezado h1 será la primera sección sin anidar, y el sexto será el máximo nivel de anidamiento.

El siguiente grupo de encabezados...

<h1>Encabezado 1 - Sección 1</h1> <h2>Encabezado 2 - Sección 1.1</h2> <h2>Encabezado 2 - Sección 1.2</h2> <h2>Encabezado 2 - Sección 1.3</h2> <h3>Encabezado 3 - Sección 1.3.1</h3> <h3>Encabezado 3 - Sección 1.3.2</h3> <h2>Encabezado 2 - Sección 1.4</h2> <h1>Encabezado 1 - Sección 2</h1> <h1>Encabezado 1 - Sección 3</h1> <h1>Encabezado 1 - Sección 4</h1>

...se vería en el navegador, de la siguiente manera:

Encabezado 1 - Sección 1 Encabezado 2 - Sección 1.1 Encabezado 2 - Sección 1.2 Encabezado 2 - Sección 1.3 Encabezado 3 - Sección 1.3.1 Encabezado 3 - Sección 1.3.2 Encabezado 2 - Sección 1.4 Encabezado 1 - Sección 2 Encabezado 1 - Sección 3 Encabezado 1 - Sección 4

Párrafos

• El elemento: p

Es el componente básico de edición de textos. Es un elemento en bloque que no puede contener elementos en bloque.
Sus etiquetas son: <p> y </p> (la de cierre es opcional, pero ¡úsala de todos modos!)

Sus principales atributos genéricos son:

identificadores: id; class; style; title;

i18n: lang; dir;

Sus atributos de transición:

align - (alineación)

• El elemento: br

La etiqueta <br> introduce un "retorno de carro", es decir que el texto a continuación de la etiqueta pasa al renglón siguiente.

Citas

Para incluir citas en nuestro texto tenemos tres elementos:

• Elemento blockquote

(blockquote = cita-bloque) Es apropiado para citas extensas.
Sus etiquetas son: <blockquote> y </blockquote>
El efecto de blockquote es que el texto encerrado entre las etiquetas se muestre con sangría a ambos lados.

• Elemento q

(quote = cita) Es apropiado para citas cortas.
Sus etiquetas son: <q> y </q> (ambas obligatorias)

• Elemento cite

(cite = cita) Es el elemento indicado para señalar la fuente o el autor de la cita.
Sus etiquetas son: <cite> y </cite> (ambas obligatorias)

Ejemplo de cita corta

El gran filósofo <cite>Sócrates</cite> dijo: <q>sólo sé que nada sé.</q>

Ejemplo de cita larga

La <cite> especificación del HTML 4.01 </cite> dice: <blockquote> Nota. Recomendamos que las implementaciones de hojas de estilo porporcionen un mecanismo para insertar signos de puntuación de citas antes y después de una cita delimitada por un BLOCKQUOTE de un modo apropiado según el contexto del idioma actual y el grado de anidamiento de las citas. </blockquote>

Dándole énfasis a lo importante

• Elemento em

Sirve para darle énfasis al texto.
Sus etiquetas son <em> y </em> (ambas obligatorias)

• Elemento strong

Sirve para darle mucho énfasis al texto.
Sus etiquetas son <strong> y </strong> (ambas obligatorias)

Ejemplo de énfasis em

Codificado así	Se muestra así*
Sirve para darle <em>énfasis</em> al texto	Sirve para darle énfasis al texto

Ejemplo de énfasis strong

Codificado así	Se muestra así*
Sirve para darle <strong> mucho énfasis </strong>al texto	Sirve para darle mucho énfasis al texto

* El ejemplo muestra como se representan los elementos por defecto, la forma de ser representados varia entre navegadores y puede ser modificada mediante CSS.

No confundir las etiquetas <strong> y <em> con las etiquetas <b> e <i> Aunque puedan visualmente representarse de igual forma (con el texto en negrita o en cursiva) los primeros tienen valor semántico, por lo que ayudarán al área de accesibilidad dando a entender que una etiqueta tiene más peso no solamente visual sino en contexto.

Definiendo que es gerundio

• Elemento dfn

(definition = definición) Indica que el texto marcado es una definición.
Sus etiquetas son <dfn> y </dfn> (ambas obligatorias)

• Elemento abbr

(abbreviation = abreviatura) Indica que el texto marcado es una abreviatura.
Sus etiquetas son <abbr> y </abbr> (ambas obligatorias)

• Elemento acronym

(acronym = acrónimo) Indica que el texto marcado es un acrónimo.
Sus etiquetas son <acronym> y </acronym> (ambas obligatorias)

Centrar textos o imágenes

• Elemento center

Las etiquetas <center> y </center> sirven para centrar todo lo que se encuentre entre dichas etiquetas, ya sean textos o imágenes.