5. Textos y elementos de texto

En HTML podemos encontrar diferentes tipos de etiquetas para incluir nuestro contenido, dentro de estas etiquetas disponemos de varias que delimitan nuestro contenido en secciones, como serían los párrafos o títulos. Estas secciones ocupan el ancho total de la página y se conocen como «elementos en bloque«.

Dentro de cada bloque (elemento de bloque) junto a nuestro contenido, existen los «elementos en línea«, que son los referentes a una parte del bloque, como por ejemplo las negritas, subrayados, enlaces, imágenes …

En la siguiente imagen se puede apreciar en azul los elementos en bloque, y dentro de ellos algunos elementos en línea.

Un ejemplo práctico de esto sería lo siguiente:

<html>
    <head>
        <title>Mi primera página HTML</title>
    </head>
    <body>
        <p align="center">Hola <b>Mundo</b>!</p>
    </body>
</html>

En el ejemplo podemos ver, como dentro del párrafo «p«, que esta en el cuerpo de nuestra página «body«, la palabra Mundo esta dentro del elemento en línea «b» que la convierte en negrita.

Párrafos y títulos

Ahora podemos deducir que cuando hablamos de párrafo, sabemos que se trata de un elemento en bloque, y que para escribir un párrafo en el código fuente empleamos lo siguiente:

<p>Esto es un párrafo y ocupa todo el ancho de la página web.</p>

Lo normal en todo texto es la necesidad de emplear títulos para delimitar secciones del contenido. HTML dispone de unas etiquetas concretas para definir títulos con hasta seis niveles de importancia, estas se utilizan para definir titulos y subtítulos dependiendo de la necesidad.

Las etiquetas de los títulos las definimos empleando la letra «h» seguido del nivel de importancia desde 1 al 6.

<h1>Titular de mayor importancia</h1>
<h2>Titular de nivel 2</h2>
<h3>Titular de nivel 3</h3>
<h4>Titular de nivel 4</h4>
<h5>Titular de nivel 5</h5>
<h6>Titular de nivel 6</h6>

Un ejemplo de uso de títulos y párrafos sería el siguiente:

<html>
    <head>
        <title>Mi primera página HTML</title>
    </head>
    <body>
        <h1>Mi pagina web personal</h1>
            <p>Hola <b>Mundo</b>!, gracias por visitar mi página web.</p>
            <h2>El tipo de cine que me gusta.</h2>
                <p>Me encantan las películas de autor.</p>
            <h2>Libros que te pueden interesar.</h2>
                <p>El señor de los anillos, indiscutiblemente algo que leer.</p>
    </body>
</html>

Estilos CSS

Hoy en día no se usa HTML para aplicar estilo a elementos de texto ya que, además de no prestar suficientes opciones de personalización, puede resultar menos eficiente ya que cargamos nuestro código HTML innecesariamente. Por esto es que es recomendable conocer el lenguaje CSS para aplicar estilos personalizados a nuestros elementos.