Encabezados, Párrafos y Tipografía en HTML

Encabezados

Los encabezados los encontraremos en la parte superior del cuerpo de la página web y se representan por las etiquetas <h1> a <h6>, siendo H1 el más grande y H6 el más chico.

<h1>Encabezado más grande</h1>

<h2>Encabezado grande</h2>

<h3>Encabezado mediano</h3>

<h4>Encabezado mediano pequeño</h4>

<h5>Encabezado pequeño</h5>

<h6>Encabezado muy pequeño</h6>

Aunque se puede cambiar el tamaño de los encabezados por CSS, usualmente H1 es el encabezado más grande hasta llegar a H6 como el encabezado más pequeño.

A continuación se muestra la etiqueta de encabezado dentro de un archivo HTML y cómo se muestra visualmente en una página web.

<h1>Encabezado 1</h1>

Generalmente como mejor práctica se recomienda tener sólo un H1 por página.

<h2>Encabezado 2</h2>

Los encabezados del H2 al H6 se pueden usar varios en una sola página.

Párrafos y Tipografías

Los párrafos en HTML se representan por la etiqueta <p></p> y todo el contenido que se escriba dentro de estas etiquetas estará contenido dentro de las características de un párrafo.

Cuando estamos construyendo un sitio web, muchas veces aún no tenemos el contenido exacto que se pondrá, por lo que acudimos al uso de texto demo para representar los espacios donde posteriormente se llenarán con información real de la marca del sitio web que se esté creando.

Cómo crear texto demo en VS Code:

1. Creo un archivo html con su estructura básica y dentro del cuerpo <body> escribo únicamente la letra p

2. A continuación doy enter y me aparecerá la etiqueta p entre corchetes de etiqueta, esto gracias a Emmet Abbreviation de VS Code

3. Ahora dentro de la etiqueta de párrafo escribo lorem40 lo cual indicará escribir texto demo de 40 palabras

4. A continuación doy enter, y podremos ver el texto demo creado. Nota, esto es posible gracias a las opciones Emmet que Visual Studio Code ofrece


A continuación, se presentan etiquetas que juegan con la modificación de la tipografía del texto dentro de un párrafo.

Texto en negrita

<strong></strong>

Aunque se puede modificar en CSS, la etiqueta strong representa texto en negrita dentro de nuestro párrafo.

Texto itálico

<em></em>

Aunque se puede modificar en CSS, la etiqueta em representa texto en itálica dentro de nuestro párrafo.

A continuación se observa el código con estas etiquetas que se mencionan y su representación visual en la página web.

Texto eliminado

<del></del>

Etiqueta semántica que pone una línea sobre el texto, representado como “deleted”.

Los elemento semánticos en HTML son los que se describen así mismos en un lenguaje claro para el humano y para la máquina. Es así como entendemos cual es el propósito de las etiquetas con el nombre asignado.

Salto de Línea

<br>
< br/>

El salto de línea representado por <br> para HTML5 o <br /> para XHTML. Es una etiqueta bastante peculiar, si nosotros damos saltos de línea en nuestro código, visualmente en nuestra página web no se verá reflejado y es por eso que necesitamos usar esta etiqueta.

A continuación verás visualmente como dentro del código doy “enter” en mi teclado o “salto de línea” para dar espacio de manera vertical. Pero podrás ver que en nuestra página web no se hace ningún cambio y no se ven ningún salto de línea.

Es aquí entonces donde usamos la etiqueta de salto de línea <br>, y podrás observar como en la página se ve visualmente el salto de línea.

Regla Horizontal

<hr>

Esta etiqueta representa una línea horizontal la cual puede ser muy útil algunas veces para separar contenido en nuestra página web.

Recuerda que todas etiquetas pueden ser modificadas y moldeadas al diseño que se requiera desde el CSS. Estas son sólo algunas de las etiquetas de html dentro del párrafo más comunes.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado