Elementos para estruturar o contido do texto

Este apartado trata de como estruturar o contido do texto do documento, que é do que se encarga, basicamente, XHTML. Isto fai que aquí se atopen máis da metade dos elementos da recomendación XHTML.

Organización dos elementos

Os elementos para estruturar o contido do texto organízanse deste xeito:

Elementos de bloque

<h1> a <h6>	Cabeceira
<p>	Parágrafo
<pre>	Texto preformatado
<address>	Información de contacto
<blockquote>	Cita longa

Elementos en liña

<abbr>	Abreviatura
<acronym>	Acrónimo
<cite>	Cita ou referencia
<code>	Fragmento de código
<dfn>	Término definitorio
<em>	Texto resaltado (cursiva)
<q>	Cita en liña breve
<strong>	Moi resaltado (negriña)
<samp>	Saída de mostra
<kbd>	Texto introducido por un usuario
<var>	Variable ou argumento de programa
<sub>	Subscript (Subíndice)
<sup>	Superscript (Superíndice)

Elementos xenéricos

<div>	División de bloque
<span>	Span ou contido en liña

Elementos identificadores - Atributos

id	Dar a un elemento un nome específico e único
class	Agrupa elementos similares

Listas

<ul>	Lista sen numerar
<ol>	Lista numerada
<li>	Elemento de lista
<dl>	Lista de definición
<dt>	Término
<dd>	Definición
<menu>	Lista de menú (obsoleta)
<dir>	Directorio (obsoleta)

Elementos de presentación

<b>	Negriña
<big>	Texto grande
<i>	Cursiva
<s>	Tachado (obsoleta)
<strike>	Tachado (obsoleta)
<tt>	Teletipo
<u>	Subliñado (obsoleta)
<font>	Fonte, cor e tamaño (obsoleta)
<basefont>	Establece unha fonte predeterminada (obsoleta)
<nobr>	Non salto
<wbr>	División de palabra
<hr>	Liña horizontal

Saltos de liña

<br>	Inserir salto de liña

Notación de edición

<ins>	Texto inserido
<del>	Texto eliminado

Elementos en bloque

Os elementos de texto divídense en elementos en liña e elementos en bloque. Os elementos en liña están no fluxo do texto e, en xeral, non causan saltos de liña. Os elementos en bloque, por defecto, teñen unha presentación que comeza nunha nova liña. Os elementos en bloque son os compoñentes principais da estrutura do documento.

Cabeceiras

As cabeceiras empréganse para introducir seccións de texto. XHTML define seis niveis de cabeceiras, de h1 a h6, de maior a menor importancia.

<h1 align="center">Ista é a cabeceira de maior importancia</h1>

Parágrafos

Os parágrafos son os elementos mais rudimentarios dun documento de texto. Indícanse có elemento p. Os parágrafos poden conter texto pero non poden conter outros parágrafos. Un exemplo deste tipo de elementos é o seguinte:

 <p align="right">Este é un parágrafo aliñado á dereita</p>

Citas (blockquote)

Utilizada para citas longas que ocupan varios parágrafos e teñen saltos de liña.

<blockquote cite="http://www.mancomun.org">
  <p>Esta será unha cita moi moi longa... </p>
  <p>E aquí vai outro parágrafo da mesma cita </p>
 </blockquote>

Texto preformatado

Emprégase para conservar o espazo en branco da fonte entre caracteres ou para simular a saída dun computador (código fonte, un comando por consola, etc.). Para isto último tamén se pode empregar a etiqueta %lt;code>

<pre>Este é un texto      con      espazos   </pre>

Direccións

O elemento addres emprégase para proporcionar información de contacto do autor ou do encargado de mantemento do documento.

Elementos en liña

A maioría dos elementos de texto son elementos en liña. Estes elementos, por defecto, non engaden saltos de liña nin espazos extra. Non teñen que ver co tipo de letra, nin coa cor ou o tamaño, iso déixano ás follas de estilo.

Elementos de frase

Engaden estrutura e significado ó texto en liña.

• em: Indica texto enfatizado. Os elementos em case sempre aparecen en cursiva.
• strong: Indica texto moi enfatizado. Os elementos strong case sempre aparecen en negriña.
• abbr: Indica unha forma abreviada.
• acronym: Indica un acrónimo.
• cite: Indica unha cita. Normalmente aparecen en cursiva.
• dfn: Definición dun termo. Normalmente aparecen en cursiva.
• code: Exemplo de código. Normalmente móstrase coa fonte Courier.
• kbd: Indica texto introducido polo usuario. Pode ser útil para documentos técnicos. Aparecerá en Courier.
• samp: Indica mostras de saída de scripts. Pode ser útil para documentos técnicos. Aparecerá en Courier.
• var: Indica unha variable ou argumento de programa. Aparecerán en cursiva.

Citas breves

Utilízase o elemento ... para citas curtas.

Elementos xenéricos

Os elementos xenéricos div e span permiten aos autores crear elementos personalizados.

• O elemento div emprégase para indicar elementos a nivel de bloque, e span indica elementos de liña.
• Estes dous elementos teñen atributos id e class para darlles nome, significado e contexto.
• Outro elemento xenérico é span, a diferenza de div, span emprégase para elementos en liña e non introduce un salto de liña.

Elementos identificadores

Os atributos class e id poden utilizarse con case todos os elementos XHTML, non só con div e span.

Identificador id

O atributo id utilízase para dar a un elemento un nome específico e único no documento. Os valores id deben ser únicos. Os usos para o atributo id son os seguintes:

• Como un selector de follas de estilo.
• Como ancla para vínculos (coa mesma función que <a name=" ">).
• Como un medio para acceder a un elemento dende un script.
• Para o procesado por parte de axentes de usuario, esencialmente tratando os elementos como datos.

Identificador class

O atributo class utilízanse para agrupar elementos similares. Poden asignarse varios elementos ó mesmo nome class e deste xeito pódense tratar igual. O atributo class pode utilizarse para:

• Como un selector de follas de estilo.
• Para o procesado por parte de axentes de usuario.

Notas sobre o uso de class

A capacidade de crear os nosos propios elementos personalizados empregando id e class é moi útil. Pero sobre todo, class é un atributo moi propenso a ser mal utilizado. Unhas pautas básicas da súa utilización son:

• Lograr que os nomes class teñan significado: O valor do atributo class debería proporcionar unha descripción do contido dun div ou dun span. Por exemplo, se nunha web o texto das cabeceiras vai en azul, unha boa definición do atributo sería class="texto-cabeceira" e nunca class="texto-azul" pois, seguramente, có tempo ese color cambie a verde ou a vermello.
• Non se debe abusar das clases: É fácil excederse asignando nomes class a elementos. Moitas veces poderanse empregar selectores contextuales ou de atributo. Por exemplo, en lugar de etiquetar todos os elementos h1 dunha barra lateral como class="barralateral" podería utilizarse o selector contextual do seguinte xeito:

div#sidebar h1 {font: Verdana 1.2em bold #444;}

Elementos de presentación

Existen varios elementos (X)HTML dedicados á presentación, é dicir, proporcionan instrucións sobre o tamaño, peso ou estilo da fonte empregada para mostrar un elemento.

Xa se comentou que as follas de estilo en cascada (CSS) son o método mais empregado para especificar a presentación dun documento, polo que na seguinte lista se indica o elemento (X)HTML e a alternativa recomendada empregando as follas de estilo:

• b - Negriña: Como alternativa existe o elemento strong ou a propiedade font-weight: bold.
• big - Grande: Como alternativa existe a propiedade font-size: bigger.
• i - Cursiva: Como alternativa existe o elemento em ou a propiedade font-style: italic.
• s - Tachado: Este elemento está obsoleto. Como alternativa existe a propiedade text-decoration: line-through para que o texto apareza tachado cunha liña.
• small - Pequeno: Como alternativa existe a palabra clave font-size: smaller.
• strike - Tachado: Este elemento está obsoleto. Como alternativa existe a propiedade text-decoration: line-through.
• tt - Teletipo: Como alternativa existe a propiedade font-family: "Andale Mono", monoespace que son fontes monoespaciais.
• u - Subliñado: Este elemento está obsoleto. Como alternativa existe a propiedade text-decoration: underline.

Elementos de fonte

font e basefont

O elemento font é un elemento en liña empregado para especificar o tamaño, color e fonte do texto. Para iso emprega os atributos size, color e face respectivamente.

Este elemento é o mellor exemplo do que foi mal no HTML, polo que se trata dun elemento que está totalmente obsoleto. Non debe utilizarse.

Outro elemento obsoleto é basefont, utilízase para establecer o tipo de fonte, o color e o tamaño de todo o documento se está na cabeceira do documento ou para o texto que lle segue se está situado no corpo.

Un exemplo có elemento font sería o seguinte:

  <p class="nova"><font face ="sans-serif" size ="+1" color="white">Texto...</font></p>

O mesmo exemplo anterior pero substituídas por propiedades CSS sería así:

p.nova { font-family: sans-serif;
              font-size: 120%;
              color: white; }

Subíndice e superíndice

Os elementos subíndice (sub) e superíndice (sup)fan que o texto seleccionado se mostre a menor tamaño e lixeiramente por debaixo (sub) ou por riba (sup) da liña base.

Exemplos:

<p>H<sub>2</sub>O</p>
<p>E = M·C<sup>2</sup></p>

Que darían como resultado:

Saltos de liña

Poden engadirse saltos de liña no fluxo do texto empregando o elemento br. Trátase dun dos poucos elementos de presentación conservados nas DTD XHTML 1.0 estrito e XHTML 1.1.

  <br />

Axuste de liñas

Outro característica do texto a ter en conta é o corte das liñas onde sexa necesario á hora de encher os renglóns, segundo o ancho dispoñible (ou word wrapping). En CSS pódese evitar que as liñas se corten axustando a propiedade white-space a nowrap. As recomendacións HTML e XHTML non definen ningún elemento para evitar que as liñas se corten.

Liñas horizontais

(X)HTML inclúe o elemento hr para engadir unha liña divisoria visual entre seccións dun documento.

 <hr />

Trátase dun elemento de bloque polo que sempre aparece na súa propia liña e, normalmente, sempre cun pouco espazo por riba e por debaixo.

Este elemento ten os seguintes atributos obsoletos:

• align = "center | left | right"
• noshade = "noshade"
• size = "número"
• width = "número" ou "%número"

Pódese controlar a presentación dunha liña horizontal con follas de estilo, o seguinte exemplo mostraría unha liña de azul sólido e dun só píxel.

hr { height: 10px; 
     width: 100%; 
     color: blue; 
     background-color: blue; }

Referencias de entidades de caracteres

Os caracteres que non se atopan no conxunto de caracteres alfanuméricos normal, como < ou &, deben especificarse nos documentos HTML e XHTML empregando referencias de caracteres ("caracteres escapados").

Nos documentos (X)HTML, os caracteres escapados indícanse cunhas referencias que comezan con & e rematan con punto e coma (;).

Pódese ver unha lista completa das entidades de caracteres definidas en XHTML 1.0/1.1 no seguinte enlace.

--Vieites e --Arribi 12:18 21 oct 2010 (BST)