1. Elementos de bloque

Los elementos de contenido son los bloques fundamentales con los que construyes la estructura y presentas la información en tus páginas web. A continuación, exploramos los más comunes:

1. Encabezados (<h1>-<h6>): Organización Jerárquica

Los encabezados definen títulos y subtítulos, organizando tu contenido en secciones y subsecciones. es el nivel más alto (el título principal), mientras que es el más bajo.

<h1>Este es un título principal</h1>
<h2>Este es un subtítulo</h2>

Lo cual resultaría en algo como esto:

Este es un título principal

Este es un subtítulo

2. Párrafos (<p>): Bloques de Texto

Los párrafos contienen el grueso del texto en tu página, presentando ideas y explicaciones.

<p>Este es un párrafo de texto que explica algo importante.</p>

Lo cual resultaría en algo como esto:

Este es un párrafo de texto que explica algo importante.

3. Listas (<ul>, <ol>, <li>): Elementos Ordenados y Desordenados

• Listas desordenadas (<ul>): Representan elementos sin un orden específico. Cada elemento se marca con una viñeta.
• Listas ordenadas (<ol>): Presentan elementos en un orden secuencial, numerados automáticamente.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
  </ul>

  <ol>
    <li>Primer paso</li>
    <li>Segundo paso</li>
  </ol>

Lo cual resultaría en algo como esto:

• Elemento 1
• Elemento 2

1. Primer paso
2. Segundo paso

También pueden recibir el atributo type para cambiar la viñeta, en el caso de la lista desordenada, por un disco, cuadrado o circulo. Para la lista ordenada puede recibir números romanos y letras en mayúscula y minúscula.

Estos cambios en el atributo type se observan de la siguiente manera

<ol type="A">
    <li>punto uno</li>
    <li>punto dos</li>
    <li>punto tres</li>
   </ol>

   <ul type="square">
    <li>punto uno</li>
    <li>punto dos</li>
    <li>punto tres</li>
   </ul>

1. punto uno
2. punto dos
3. punto tres

• punto uno
• punto dos
• punto tres

4. Tablas (<table>, <tr>, <th>, <td>): Organización de Datos

Las tablas estructuran datos en filas y columnas, facilitando la comparación y lectura de información.

<table>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 3</th>
      <th>Encabezado 4</th>
      <th>Encabezado 5</th>
    </tr>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
      <td>Dato 3</td>
      <td>Dato 4</td>
      <td>Dato 5</td>
    </tr>
  </table>

Lo cual resultaría en algo como esto:

Encabezado 1	Encabezado 2	Encabezado 3	Encabezado 4	Encabezado 5
Dato 1	Dato 2	Dato 3	Dato 4	Dato 5