Formato básico de texto en un documento HTML

Logo de html 5

Hoy en día se pueden descargar  decenas de imágenes por segundo, así como ver videos en super alta calidad. Sin embargo , el elemento primordial sigue siendo el texto. Más allá de si lo vamos a leer o no, sigue siendo la forma principal en que se puede catalogar los billones de datos que hay en internet. Es por ello que debemos de crearlo de la mejor manera, pensando siempre en la doble función que tiene. Así que antes de pensar siquiera en cosas como tipo de fuente o color de texto, debemos revisar las etiquetas de html para texto.

De manera general, la información se divide en dos categorías: el contenido general y los encabezados. La primera es la información más grande. Son los bloques y bloques de texto que tendrá el documento. Los párrafos, vaya. Es por ello que la etiqueta para describir esta información es p.

Si colocamos la información simplemente separada por uno o varios saltos de línea, sin ninguna etiqueta de html, aunque en nuestro código haya separación en el navegador se verá en la misma línea. Por ejemplo, las siguientes líneas:

Este es un parrafo
Este es otro parrafo

Viéndolas en el navegador, el resultado es:

Dos texto sin etiqueta de párrafo

En cambio, colocando cada una en su etiqueta p:

<p>Este es un parrafo</p>
<p>Este es otro parrafo</p>

El resultado sería:

textos separados con etiquetas de párrafo

Podemos tener cuantas etiquetas p como queramos. Y tal como pudiéramos esperarlo, cada etiqueta p separa la información en un párrafo diferente, teniendo un doble salto de línea.

Los encabezados por su parte, aunque dentro de la página sean menos, tienen una importancia mayor, ya que definen los títulos de acuerdo a su importancia. Por ejemplo, el título de la página debería de envolverse en la etiqueta <h1>

<h1>Título principal</h1>

Si utilizamos únicamente html en este documento, este texto será el más grande. Siguiendo en tamaño, sería el envuelto en la etiqueta <h2> y después en <h3>. Se cuentan con 6 tamaños de readers o encabezados. (h1, h2, h3, h4, h5, h6).




Vale la pena mencionar desde ahora que el uso de estas etiquetas no tenga que ver tanto por el aspecto visual de estas sino por la importancia de la información. Por ejemplo, supongamos que tengo un título principal. Por lo tanto, debería estar dentro de <h1>. Sin embargo, al verlo en el navegador nos parece muy grande, por lo que podríamos pensar que conviene cambiarlo a otra etiqueta, a lo mejor a <h3>. Esto no es recomendable, ya que las etiquetas de encabezado (principalmente h1), tienen usos especiales, como para el posicionamiento web. Lo ideal sería mantener la info dentro de h1 y más adelante, a través de css, asignarle el tamaño adecuado.

Normalmente, en un documento es raro que se utilicen todos los encabezados. Lo más común es que se utilicen de h1 a h3 o h4.

Etiqueta pre

Dentro de las étiquetas de formato más básico, ademas de p y los encabezados también existe la etiqueta pre. Su nombre viene de “preformatted”, y los navegadores la representan comúnmente con una fuente monospace (que todas las letras tienen el mismo ancho que alto), como Courier. Se puede utilizar donde haga falta, pero por su aspecto simple, comúnmente se usa para representar código. En todos los documentos de este blog, cada vez que mostramos código de ejemplo lo ponemos dentro de la etiqueta <pre> .

Be the first to comment

Leave a Reply

Your email address will not be published.


*