comparte el articulo 

Formato de textos en HTML

Actualizado el 05/12/2011 < > 0 Comentarios

Resumen: Estudiamos las etiquetas más importantes para dar un formato adecuado a los textos pertenecientes a nuestro documento HTML.

A pesar de que con el paso de los años las imágenes, los videos y las animaciones han tomado gran relevancia como medios de contenido por Internet, el texto sigue representando la principal fuente de información y la de uso más común. Debido a que su aplicación es sencilla, muchos consideran al texto algo fácil de implementar en una estructura HTML sin embargo se omiten muchos aspectos relativos a su formato.

La importancia de manejar correctamente un texto va desde la codificación hasta la interfaz, sin texto no tendríamos hipervínculos y no podríamos compartir y vincular sitios, no tendríamos una manera tangible de presentar información en páginas, ni siquiera tendríamos XHTML o CSS.

En este artículo estudiaremos la manera en que se debe estructurar un texto, como aplicar de manera correcta las etiquetas HTML que se relacionan con él y cómo lograr su manipulación para generar una buena semántica en el código y una presentación adecuada en la interfaz.

Estructuración del texto con HTML

El lenguaje de marcado especializado en el texto es un campo aún no muy explorado por los diseñadores web, nos concentramos tanto en aspectos de la estructura del sitio, capas, links, secciones, que nos olvidamos que existen toda una gama de etiquetas desarrolladas exclusivamente para dar un formato correcto al texto.

Con la llegada de CSS muchas de estas etiquetas fueron quedando enterradas y en el olvido, ya que los estilos podían replicar lo que se hacía con ellas, pero esto no significó que se declararan obsoletas; por lo contrario, su uso sigue siendo considerado lo correcto, pues agregan una correcta semántica al código y delimitan correctamente la función de cada parte del texto.

Desgraciadamente, actualmente siguen siendo muchas las malas costumbres que se tienen en relación al texto, una de las más comunes es el manejo del salto de línea “br” para dar la presentación que deseamos, usamos saltos de línea en todos lados, para separar trozos de texto, para separar títulos e incluso para imitar funciones de padding.

Debemos recordar que existen etiquetas como “p” párrafo que cumplen mejor con una función de segmentación y que los títulos deben ser definidos mediante cabeceras de “h1” hasta “h6”. El hecho de que algunos navegadores muestren las etiquetas de manera similar, no significa que cumplan la misma función, debemos aprender a marcar los elementos de texto como citas, abreviaturas o códigos, ya que no todos serán párrafos comunes y corrientes.

Elementos básicos del texto

Quizás el elemento más importante que se relaciona con un texto es el párrafo, generalmente su etiqueta es utilizada para definir y englobar la mayor parte del texto y su contenido puede variar mucho, lo cual la convierte en la etiqueta con texto más rico dentro de una página web.

Su declaración es tan sencilla como usar la etiqueta de apertura, el texto deseado y finalmente la clausura, como esto:

<p>Este es un párrafo sencillo</p>
<p>Este es otro párrafo sencillo</p>

Una distancia será agregara entre los dos párrafos, pues las reglas de escritura nos indican que así debe de ser. Las ventajas que conlleva el agrupar el texto de esta manera en vez de utilizar un “br” enmedio de los 2 textos, es que ahora cada texto es una unidad y como tal puedo aplicarle estilos e incluso efectos con JavaScript.

Esto no significa que este incorrecto usar etiquetas “br” en ocasiones, si por ejemplo queremos definir un párrafo y dentro de él establecer una distancia podemos hacer algo como esto:

<p>Este es un párrafo sencillo.<br/>Aquí continuamos el texto del párrafo</p>

Si lo que queremos es dar énfasis a alguna parte de nuestro texto entonces tenemos dos alternativas, podemos utilizar la etiqueta “em” para dar un énfasis con letra de tipo itálica o “strong” si queremos dar un mayor énfasis y poner el texto en negrita.

<p>Este es un párrafo con <em>énfasis</em>. Como ya dije, con <strong>¡énfasis!</strong></p>

Cabeceras y títulos

En la gran mayoría de los textos, los párrafos constituyen la parte más grande e importante del contenido, pero en ocasiones dichos párrafos necesitan separarse con títulos y subtítulos para darle una mejor estructura al documento. Para esas ocasiones fueron creadas las etiquetas de tipo cabecera las cuales están definidas por los nombres “h1”, “h2”, “h3”, “h4”, “h5” y “h6”.

El efecto que se produce al utilizar estas etiquetas es dar un formato que distinga a la línea donde se aplica, resaltándola sobre el resto del texto. Por defecto agrega un espacio en la parte superior y otro en la parte inferior, aumenta el tamaño de la letra y las pone en negritas.

La etiqueta “h1” representa el nivel más alto y por consecuente “h6” el más bajo, así que debemos respetar esta jerarquía al momento de estar escribiendo, ya que si usamos la etiqueta “h2” para definir el título del artículo no podemos usar “h1” para un subtítulo.

Si el estilo por defecto de una cabecera no te agrada, o sientes que no se adapta a lo que tienes en la página, no te preocupes recuerda que siempre puedes editar esto con CSS.

<h1>Título del escrito</h1>
<p>Introducción al escrito.</p>
<h2>Subtítulo del escrito</h2>
<p>Texto sobre el subtítulo</p>
<h3>Tercer nivel del escrito</h3>
<p>División del tema manejado en el subtítulo</p>
<h2>Otro subtítulo del escrito</h2>
<p>Más texto</p>

Citas

Conforme vamos avanzando nos encontremos con etiquetas menos utilizadas cuya función es marcar tipos muy específicos de texto, dentro de esta clase encontramos a las citas. El hecho de que sean utilizadas con menos frecuencia que los párrafos o los saltos de línea, no significa que no sean importantes, su función esta en aplicar un significado a una parte específica del texto y con ello aumentar el valor del código.

La principal etiqueta para agregar una cita es “blockquote”, y se usa para señalar un bloque de texto grande, que por lo general se busca presentar de manera individual. Entre los aspectos relevantes de esta etiqueta, encontramos que su contenido se presenta mediante párrafos y podemos agregar un link hacia una página, en caso de que el contenido pueda ser observado por Internet.

<blockquote cite=”http://www.lawebera.es/xhtml-css/sintaxis-xhtml.php“>
<p>HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos</p>
</blockquote>

Otra etiqueta que también puede ser utilizada, en este caso para citas pequeñas, es “q”. A diferencia de “blockquote”, esta etiqueta se utiliza más para desplegar citas “inline” es decir en una sóla línea sin desplegar un bloque individual.

También existe la etiqueta “cite” que da un estilo diferente a la cita, ya que convierte la fuente en tipo itálica.

<p>Como se menciona en el artículo de <cite>La Webera</cite> sobre el HTML: <q>HTML tiene una sintaxis muy sencilla y fácil de comprender, el contenido está estructurado en elementos, los cuales son declarados mediante el uso de etiquetas que proporcionan información adicional através de atributos</q></p> 

Abreviaturas y acrónimos

Otro caso muy específico que podemos encontrar son las abreviaturas y acrónimos, son pocas veces las que llegamos a utilizar estas etiquetas, pero ya dijimos siguen siendo importantes. Si te encuentras con una abreviatura debes marcarla como tal y para ello tenemos la etiqueta “abbr”, por otro lado si lo que tienes es un acrónimo, es decir una abreviatura que se puede leer y pronunciar como una sola palabra entonces puedes usar “acronym”.

Ambas etiquetas puedes contener el atributo “title” lo que permitirá añadir su significado, así cada vez que el usuario pase el cursor sobre la palabra un tooltip se encargará de presentarle el nombre o significado completo.

<p>La <acronym title="Fédération Internationale de Football Association">FIFA</acronym>, es el órgano que rige el fútbol</p>

Código en el texto

Si eres diseñador o desarrollador y te has encontrado con la necesidad de escribir algún artículo para tu página web que explique el trabajo que realizaste, es muy probable que hayas tenido la necesidad de plasmar una parte de tu código, si lo hiciste de forma correcta utilizaste la etiqueta “code” para envolver dicho texto.

La etiqueta “code” nos permite introducir marcado HTML en un párrafo para identificarlo y manejarlo como tal.

<code>
&lt;p&gt;Este es el código de un &lt;strong&gt;párrafo HTML&lt;/strong&gt;.&lt;/p&gt;
</code>

Si queremos que la indentación de dicho código se respete tenemos que introducirlo en un elemento de tipo “pre”, ya que por default HTML no toma como referencia los espacios en blanco o los tabs que agreguemos.

Y así como estás existen muchas otras clases de etiquetas muy específicas como “address” que nos sirve para especificar la dirección de un establecimiento, generalmente utilizado en la sección de contacto o “kbd” que sugiere la parte donde un usuario debería introducir texto.

Publicado el 07/12/2011, última actualización 05/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras