En esta página

Textos

La organización de los textos en HTML es esencial para organizar la información dentro del sitio o aplicación web. Inicialmente a los textos los vamos a organizar en títulos y párrafos

Párrafos

Para estructurar los textos en HTML es necesario identificar los párrafos. Todos los textos deben estar contenidos en un elemento HTML, esto significa que no puede estar un texto suelto dentro del body de la HTML.

La estructura convencional para organizar textos son los párrafos. En HTML el párrafo se identifica con la etiqueta <p> esta etiqueta tiene cierre </p>. A modo de ejemplo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Párrafo</title>
</head>
<body>
    <p>
        Este es un solo párrafo.
    </p>

</body>

</html>

Este elemento es un elemento en bloque. Al cerrar la etiqueta de párrafo deja un salto de línea al finalizar.

👁‍🗨 Identifica bien los párrafos para que el resultado sea visualmente correcto.

Títulos

El estándar HTML define seis etiquetas que se asig-nan según el nivel de importancia conceptual que cada título tiene dentro del contexto en el que se encuentra. En orden jerárquico descendente, estas etiquetas son <h1><h1>, <h2><h2>, <h3><h3>, <h4><h4>, <h5><h5> y <h6><h6>

Es importante evaluar los tipos de títulos a utilizar. Si la elección es incorrecta, las organización de la información también lo será.

La etiqueta <h1><h1> nos define el título principal, mientras que la etiqueta <h6><h6> define un título de menor jerarquía.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Párrafo</title>
</head>

<body>
    <h1>El título define el contenido de una sección</h1>
    <h2>Los subtítulos suelen subdividir los contenidos de una sección.</h2> 
    <p>Este es el primer párrafo</p>
    <p>Este es el segundo párrafo</p>
</body>
</html>

💻 Escribe este código y visuliza su resultado. Ahora prueba todos los títulos disponibles. 😞 Un título no puede estar dentro de un párrafo y un párrafo no puede estar dentro de un título. Tampoco un título puede estar dentro de otro título.

Formato a los textos

Varias son las etiquetas que nos permiten dar cierto formato o características a los textos y/o caracteres. Veremos a continuación algunas de esas etiquetas:

Texto en Negrita

En HTML tenemos dos etiquetas que visualmente resaltan un texto en negrita

b: la etiqueta b proviene de la palabra bold que significa "negrita". Solamente coloca en negrita un texto particular y no tiene ninguna importancia semántica. Por ejemplo:

<p>Mi perro se llama <b>Ulises</b></p>

strong: la etiqueta strong, no solamente que visualmente hace que un texto se vea en negrita sino que semánticamente le da una importancia al contenido del elemento dentro del párrafo.

<p>Mi perro se llama <strong>Ulises</strong></p>

Semántica

🤔 ¿qué es la semántica en HTML?

Significa que las etiquetas HTML en la versión 5 tiene un significado particular y puede ser interpretado en la lectura del código HTML. Por ejemplo, los buscadores como Google, realizan un análisis semántico de las etiquetas HTML para encontrar títulos, párrafos, palabras claves, etc. Utilizar las etiquetas correctas para construir un sitio web o una aplicación web, hará que sea más accesible.

Itálica - cursiva

i: la etiqueta i, se utiliza para que un texto se visualize en itálica / cursiva. No es semántico.

<p>Mi perro se llama <i>Ulises</i></p>

em: la etiqueta em, utiliza para reforzar la importancia que tiene un determinado texto dentro de un párrafo. Como resultado, los navegadores muestran los textos encerrados por esta etiqueta de manera cursiva. Es semántico.

<p>Mi perro se llama <em>Ulises</em></p>

Subrayado

u: la etiqueta u, se utiliza para subrayar.

<p>Mi perro se llama <u>Ulises</u></p>

Span

span: la etique span no tiene ningún resultado visual desde HTML, pero por medio de CSS veremos como separar un texto dentro de un párrafo para lograr un resultado visual deseado.

<p>Mi perro se llama <span>Ulises</span></p>

Anchor

a: La etiqueta a se llama Anchor. Nos permite crear un enlace (hipervínculo) a otra página web y/o un recurso ubicado en el mismo proyecto u en otro servidor web. Este etiqueta es de mucha importancia ya que todos los enlaces se realizan con ella.

<p>
    Mi perro se llama <strong>Ulises</strong>. 
    Visitá tu página <a href="ulises.html">WEB</a>
</p>

En el apartado Enlace profundizaremos el tema.

Conociendo el HTML Imagen