Párrafos

Dentro de las etiquetas básicas de páginas web el elemento <p> marca todo el texto dentro de él como un párrafo distinto. Intente agregar el siguiente elemento <p> al cuerpo de nuestra página web:

<!DOCTYPE html>
<html lang="es-MX">
  <head>
    <title>Etiquetas básicas de HTML5</title>
  </head>
  <body>
    <p>Esto es un ejemplo de un párrafo.</p>
  </body>
</html>

Ahora debería poder ver algo de contenido en la página. Nuevamente, dado que este es el contenido que queremos mostrar, debe ir en el elemento <body>, no en <head>.

Ventana del navegador web con un párrafo

Encabezados

Dentro de las etiquetas básicas de páginas web los encabezados son como títulos, pero en realidad se muestran en la página. HTML proporciona seis niveles de encabezados, y los elementos correspondientes son: <h1>, <h2>, <h3>, …, <h6>. Cuanto mayor sea el número, menos destacado será el encabezado.

El primer encabezado de una página normalmente debe ser un <h1>, así que insertemos uno encima de nuestro elemento <p> existente. Es muy común que el primer elemento <h1> coincida con el <título> del documento, como lo hace aquí:

<body>
  <h1>Planetario web</h1>
  <p>Primero se necesita aprender algo de HTML básico.</p>
</body>

Por defecto, los navegadores representan encabezados menos importantes en fuentes más pequeñas. Por ejemplo, incluyamos un encabezado de segundo nivel y veamos qué sucede:

<!DOCTYPE html>
<html lang="es-MX">
  <head>
    <title>Planetario Web</title>
  </head>
  <body>
    <h1>PLANETARIO WEB | ENCABEZADO 1</h1>
    <p>Este es un párrafo de ejemplo, es una etiqueta básica.</p>

    <h2>PLANETARIO WEB | ENCABEZADO 2</h2>
    <p>Los encabezados definen el esquema de su sitio. 
           Hay seis niveles de encabezados</p>
  </body>
</html>

Esto debería dar como resultado una página web que se vea así:

Ventana del navegador web con un encabezados y párrafos

Los encabezados son la forma principal en la que marca diferentes secciones de su contenido. Definen el esquema de su página web como lo ven los humanos y los motores de búsqueda, lo que hace que la selección de títulos relevantes sea esencial para una página web de alta calidad.

Listas. Etiquetas básicas de páginas web

Listas desordenadas.

Cada vez que rodea un texto con etiquetas HTML, agrega un nuevo significado a ese texto. Ajustar el contenido en etiquetas le dice a un navegador que todo lo que esté dentro debe representarse como una “lista desordenada”. Para denotar elementos individuales en esa lista, los envuelve en etiquetas , así:

<h2>Listas</h2>
<p>Así es como haces una lista desordenada:</p>
<ul>
  <li>Agregue un elemento "ul" (significa lista desordenada)</li>
  <li>Agregue cada elemento en su propio elemento "li"</li>
  <li>No necesitan estar en ningún orden en particular</li>
</ul>

Después de agregar este marcado al elemento (debajo del contenido existente), debería ver una lista con viñetas con una viñeta dedicada para cada elemento:

Ventana del navegador web con listas desordenadas

La especificación HTML define reglas estrictas sobre qué elementos pueden ir dentro de otros elementos. En este caso, los elementos
solo deben contener elementos , lo que significa que nunca debe escribir algo como esto:

<!-- (¡Esto esta mal!) -->
<ul>
  <p>Agregue un elemento "ul" (significa lista desordenada)</p>
</ul>

En su lugar, debe envolver ese párrafo con etiquetas:

<!-- (Haz esto en su lugar) -->
<ul>
  <li><p>Agregue un elemento "ul" (significa lista desordenada)</p></li>
</ul>

¿Cómo sabemos que solo acepta elementos y que permite párrafos anidados? Porque la red de desarrolladores de Mozilla (MDN) lo dice. MDN es una excelente referencia de elementos HTML. Intentaremos cubrir todo lo que podamos sobre cómo usar elementos HTML básicos en este tutorial, pero cuando no esté seguro de un elemento en particular, haga una búsqueda rápida en Google de “MDN “.

Listas ordenadas. Etiquetas básicas de páginas web

Con una lista desordenada, reorganizar los elementos no debería cambiar el significado de la lista. Si la secuencia de elementos de la lista es importante, debe utilizar una “lista ordenada” en su lugar. Para crear una lista ordenada, simplemente cambie el elemento padre a <ol> . Agregue el siguiente contenido:

<p>Así es como se ve una lista ordenada:</p>
<ol>
  <li>Observe el nuevo elemento "ol" que envuelve todo</li>
  <li>Pero, los elementos del elemento de la lista son los mismos</li>
  <li>Los números aumentan por sí mismos</li>
  <li>Esta es una lista ordenada</li>
</ol>
Ventana del navegador web con listas ordenadas

La diferencia entre una lista desordenada y una lista ordenada puede parecer tonta, pero realmente tiene importancia para los navegadores web, los motores de búsqueda y, por supuesto, los lectores humanos. También es más fácil que numerar manualmente cada elemento de la lista.

Los procedimientos paso a paso, como recetas, instrucciones e incluso tablas de contenido, son buenos candidatos para las listas ordenadas, mientras que las listas son mejores para representar inventarios de artículos, características de productos, comparaciones pro / con y menús de navegación.

¿Necesitas un sitio web? Cotízalo con nosotros