Linux Professional Institute Learning Logo.
Pasar al contenido principal
  • Inicio
    • Todos los recursos
    • LPI Learning Materials
    • Conviértete en colaborador
    • Publishing Partners
    • Conviértase en un Publishing Partner
    • Acerca de nosotros
    • FAQ
    • Colaboradores
    • Roadmap
    • Contáctenos
  • LPI.org
032.2 Lección 1
Tema 031: Desarrollo de Software y Tecnologías Web
031.1 Conceptos básicos de desarrollo de software
  • 031.1 Lección 1
031.2 Arquitectura de aplicaciones web
  • 031.2 Lección 1
031.3 Conceptos básicos de HTTP
  • 031.3 Lección 1
Tema 032: Marcado de documentos HTML
032.1 Anatomía del documento HTML
  • 032.1 Lección 1
032.2 HTML Semántica HTML y jerarquía de documentos
  • 032.2 Lección 1
032.3 Referencias HTML y recursos incrustados
  • 032.3 Lección 1
032.4 Formularios HTML
  • 032.4 Lección 1
Tema 033: Estilo de contenido CSS
033.1 Conceptos básicos de CSS
  • 033.1 Lección 1
033.2 Selectores CSS y aplicación de estilo
  • 033.2 Lección 1
033.3 Estilo CSS
  • 033.3 Lección 1
033.4 Modelo y diseño CSS
  • 033.4 Lección 1
Tema 034: Programación JavaScript
034.1 Ejecución y sintaxis de JavaScript
  • 034.1 Lección 1
034.2 Estructuras de datos en JavaScript
  • 034.2 Lección 1
034.3 Funciones y estructuras de control de JavaScript
  • 034.3 Lección 1
  • 034.3 Lección 2
034.4 Manipulación JavaScript del contenido y estilo del sitio web
  • 034.4 Lección 1
Tema 035: Programación NodeJS server
035.1 Conceptos básicos de Node.js
  • 035.1 Lección 1
035.2 Conceptos básicos de NodeJS Express
  • 035.2 Lección 1
  • 035.2 Lección 2
035.3 Conceptos básicos de SQL
  • 035.3 Lección 1
How to get certified
  1. Tema 032: Marcado de documentos HTML
  2. 032.2 HTML Semántica HTML y jerarquía de documentos
  3. 032.2 Lección 1

032.2 Lección 1

Certificación:

Conceptos básicos de desarrollo web

Versión:

1.0

Tema:

032 Marcado de documentos HTML

Objetivo:

032.2 Semántica HTML y jerarquía de documentos

Lección:

1 de 1

Introducción

En la lección anterior, aprendimos que HTML es un lenguaje de marcado que puede describir semánticamente el contenido de un sitio web. Un documento HTML contiene un llamado esqueleto que consta de los elementos HTML <html>, <head> y <body>. Mientras que el elemento <head> describe un bloque de metainformación para el documento HTML que será invisible para el visitante del sitio web, el elemento <body> puede contener muchos otros elementos para definir la estructura y el contenido del HTML documento.

En esta lección, veremos el formato de texto, los elementos HTML semánticos fundamentales y su propósito, y cómo estructurar un documento HTML. Usaremos una lista de compras como nuestro ejemplo.

Note

Todos los ejemplos de código posteriores se encuentran dentro del elemento <body> de un documento HTML que contiene el esqueleto completo. Para facilitar la lectura, no mostraremos el esqueleto HTML en todos los ejemplos de esta lección.

Texto

En HTML, ningún bloque de texto debe estar descubierto, fuera de un elemento. Incluso un párrafo corto debe estar dentro de las etiquetas HTML <p>, que es el nombre corto de paragraph.

<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>

Abierto en un navegador web, este código HTML produce el resultado que se muestra en Figure 1.

Paragraphs
Figure 1. Representación del navegador web de código HTML que muestra dos párrafos de texto. El primer párrafo es muy breve. El segundo párrafo es un poco más largo y se ajusta a una segunda línea.

De forma predeterminada, los navegadores web agregan espacios antes y después de los elementos <p> para mejorar la legibilidad. Por esta razón, <p> se denomina elemento de bloque.

Encabezados

HTML define seis niveles de encabezados para describir y estructurar el contenido de un documento HTML. Estos encabezados están marcados por las etiquetas HTML <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Un navegador web muestra este código HTML como se muestra en Figure 2.

Headings
Figure 2. Representación del navegador web de código HTML que muestra diferentes niveles de encabezados en un documento HTML. La jerarquía de títulos se indica mediante el tamaño del texto.

Si está familiarizado con procesadores de texto como LibreOffice o Microsoft Word, es posible que observe algunas similitudes en la forma en que un documento HTML utiliza diferentes niveles de encabezados y cómo se representan en el navegador web. De forma predeterminada, HTML usa el tamaño para indicar la jerarquía y la importancia de los encabezados y agrega espacio antes y después de cada encabezado para separarlo visualmente del contenido.

Un encabezado que usa el elemento <h1> está en la parte superior de la jerarquía y, por lo tanto, se considera el encabezado más importante que identifica el contenido de la página. Es comparable al elemento <title> discutido en la lección anterior, pero dentro del contenido del documento HTML. Los elementos de encabezado posteriores se pueden utilizar para estructurar aún más el contenido. Asegúrese de no omitir los niveles de encabezado intermedios. La jerarquía del documento debe comenzar con <h1>, continuar con <h2>, luego con <h3> y así sucesivamente. No es necesario utilizar todos los elementos de encabezado hasta <h6> si su contenido no lo exige.

Note

Los encabezados son herramientas importantes para estructurar un documento HTML, tanto semántica como visualmente. Sin embargo, los encabezados nunca deben usarse para aumentar el tamaño de texto que de otro modo no tendría importancia estructural. Por el mismo principio, no se debe poner un párrafo corto en negrita o cursiva para que parezca un encabezado; use etiquetas de encabezado para marcar los encabezados.

Comencemos a crear el documento HTML de la lista de compras definiendo su esquema. Crearemos un elemento <h1> para contener el título de la página, en este caso Garden Party, seguido de información breve dentro de un elemento <p>. Además, usamos dos elementos <h2> para presentar las dos secciones de contenido Agenda y Please bring.

<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>

Abierto en un navegador web, este código HTML produce el resultado que se muestra en Figure 3.

HTML PAGE 1
Figure 3. Representación del navegador web de código HTML que muestra un documento de ejemplo simple que describe una invitación a una fiesta en el jardín, con dos títulos para la agenda y una lista de cosas para llevar.

Saltos de línea

A veces puede ser necesario provocar un salto de línea sin insertar otro elemento <p> o cualquier elemento de bloque similar. En tales casos, puede utilizar el elemento de cierre automático <br>. Tenga en cuenta que debe usarse solo para insertar saltos de línea que pertenezcan al contenido, como es el caso de poemas, letras de canciones o direcciones. Si el contenido está separado por significado, es mejor usar un elemento <p> en su lugar.

Por ejemplo, podríamos dividir el texto en el párrafo de información de nuestro ejemplo anterior de la siguiente manera:

<p>
  Invitation to John's garden party.<br>
  Saturday, next week.
</p>

En un navegador web, este código HTML produce el resultado que se muestra en Figure 4.

br
Figure 4. Representación del navegador web de código HTML que muestra un documento de ejemplo simple con un salto de línea forzado.

Líneas horizontales

El elemento <hr> define una línea horizontal, también llamada regla horizontal. De forma predeterminada, abarca todo el ancho de su elemento padre. El elemento <hr> puede ayudarlo a definir un cambio temático en el contenido o separar las secciones del documento. El elemento es de cierre automático y, por lo tanto, no tiene etiqueta de cierre.

Para nuestro ejemplo, podríamos separar los dos encabezados:

<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>

Figure 5 muestra el resultado de este código.

HTML PAGE 2
Figure 5. Representación del navegador web un documento de ejemplo simple que describe una lista de compras con dos secciones separadas por una línea horizontal.

Listas HTML

En HTML, puede definir tres tipos de listas:

Listas ordenadas

donde importa el orden de los elementos

Listas desordenadas

donde el orden de los elementos no es particularmente importante

Listas de descripción

para describir más de cerca algunos términos

Cada uno contiene cualquier número de elementos de la lista. A continuación, describiremos cada tipo de lista.

Listas ordenadas

Una lista ordenada en HTML, indica mediante el elemento HTML <ol> una colección de cualquier número de elementos. Lo que hace que este elemento sea especial es que el orden de los elementos de su lista es relevante. Para enfatizar esto, los navegadores web muestran números antes de los elementos de la lista secundaria de forma predeterminada.

Note

Los elementos <li> son los únicos elementos secundarios válidos dentro de un elemento <ol>.

Para nuestro ejemplo, podemos completar la agenda de la fiesta en el jardín usando un elemento <ol> con el siguiente código:

<h2>Agenda</h2>
<ol>
  <li>Welcome</li>
  <li>Barbecue</li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

En un navegador web, este código HTML produce el resultado que se muestra en Figure 6.

ol
Figure 6. Representación del navegador web de un documento de ejemplo simple que contiene un título de segundo nivel seguido de una lista ordenada con cuatro elementos que describen la agenda de una fiesta en el jardín.
Opciones

Como puede ver en este ejemplo, los elementos de la lista están numerados con números decimales que comienzan en 1 de forma predeterminada. Sin embargo, puede cambiar este comportamiento especificando el atributo type de la etiqueta <ol>. Los valores válidos para este atributo son 1 para números decimales, A para letras mayúsculas, a para letras minúsculas, I para números romanos en mayúsculas e i para números romanos en minúsculas.

Si lo desea, también puede definir el valor inicial utilizando el atributo start de la etiqueta <ol>. El atributo start siempre toma un valor numérico decimal, incluso si el atributo type establece un tipo diferente de numeración.

Por ejemplo, podríamos ajustar la lista ordenada del ejemplo anterior para que los elementos tengan como prefijo letras mayúsculas, comenzando con la letra C, como se muestra en el siguiente ejemplo:

<h2>Agenda</h2>
<ol type="A" start="3">
  <li>Welcome</li>
  <li>Barbecue</li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

Dentro de un navegador web, este código HTML se representa como Figure 7.

ol reordered
Figure 7. Representación del navegador web un documento de ejemplo simple que contiene un encabezado de segundo nivel seguido de una lista ordenada con elementos precedidos por letras mayúsculas que comienzan con la letra C.

El orden de los elementos de la lista también se puede invertir utilizando el atributo reversed sin un valor.

Note

En una lista ordenada, también puede establecer el valor inicial de un elemento de lista específico utilizando el atributo value de la etiqueta <li>. Los elementos de la lista que siguen se incrementarán a partir de ese número. El atributo value siempre toma un valor numérico decimal.

Listas desordenadas

Una lista desordenada contiene una serie de elementos que, a diferencia de los de una lista ordenada, no tienen un orden o secuencia especial. El elemento HTML de esta lista es <ul>. Una vez más, <li> es el elemento HTML para marcar sus elementos de lista.

Note

Los elementos <li> son los únicos elementos secundarios válidos dentro de un elemento <ul>.

Para nuestro sitio web de ejemplo, podemos usar la lista desordenada para enumerar los elementos que los invitados pueden traer a la fiesta. Podemos lograr esto con el siguiente código HTML:

<h2>Please bring</h2>
<ul>
  <li>Salad</li>
  <li>Drinks</li>
  <li>Bread</li>
  <li>Snacks</li>
  <li>Desserts</li>
</ul>

Dentro de un navegador web, este código HTML produce la pantalla que se muestra en Figure 8.

ul
Figure 8. Representación del navegador web de un documento simple que contiene un título de segundo nivel seguido de una lista desordenada con elementos relacionados con los alimentos que se les pide a los invitados que traigan a la fiesta en el jardín.

De forma predeterminada, cada elemento de la lista se representa mediante una viñeta de disco. Puede cambiar su apariencia usando CSS, que se discutirá en lecciones posteriores.

Listas anidadas

Las listas se pueden anidar dentro de otras listas, como listas ordenadas dentro de listas desordenadas y viceversa. Para lograr esto, la lista anidada debe ser parte de un elemento de lista <li>, porque <li> es el único elemento hijo válido de listas ordenadas y desordenadas. Al anidar, tenga cuidado de no superponer las etiquetas HTML.

Para nuestro ejemplo, podríamos agregar alguna información de la agenda que creamos antes, como se muestra en el siguiente ejemplo:

<h2>Agenda</h2>
<ol type="A" start="3">
  <li>Welcome</li>
  <li>
    Barbecue
    <ul>
      <li>Vegetables</li>
      <li>Meat</li>
      <li>Burgers, including vegetarian options</li>
    </ul>
  </li>
  <li>Dessert</li>
  <li>Fireworks</li>
</ol>

Un navegador web muestra el código como se muestra en Figure 9.

ul nested
Figure 9. Representación del navegador web de código HTML que muestra listas desordenadas anidadas dentro de una lista ordenada, para representar la agenda de una fiesta en el jardín.

Podría ir aún más lejos y anidar varios niveles de profundidad. En teoría, no hay límite para la cantidad de listas que puede anidar. Sin embargo, al hacer esto, considere la legibilidad para sus visitantes.

Listas de descripción

Una lista de descripción se define mediante el elemento <dl> y representa un diccionario de claves y valores. La clave es un término o nombre que desea describir y el valor es la descripción. Las listas de descripción pueden variar desde simples pares clave-valor hasta definiciones extensas.

Una clave (o término) se define usando el elemento <dt>, mientras que su descripción se define usando el elemento <dd>.

Un ejemplo de una lista de descripción de este tipo podría ser una lista de frutas exóticas cómo muestra el ejemplo.

<h3>Exotic Fruits</h3>
<dl>
  <dt>Banana</dt>
  <dd>
    A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
    may also have a soft green color when underripe and get brown spots when
    overripe.
  </dd>

  <dt>Kiwi</dt>
  <dd>
    A small, oval fruit with green flesh, black seeds, and a brown, hairy
    skin.
  </dd>

  <dt>Mango</dt>
  <dd>
    A fruit larger than a fist, with a green skin, orange flesh, and one big
    seed. The skin may have spots ranging from green to yellow or red.
  </dd>
</dl>

En un navegador web, esto produce el resultado que se muestra en Figure 10.

description list
Figure 10. Un ejemplo de una lista de descripción HTML que utiliza frutas exóticas. La lista describe la aparición de tres frutas exóticas diferentes.
Note

A diferencia de las listas ordenadas y las listas desordenadas, en una lista de descripción, cualquier elemento HTML es válido como hijo directo. Esto le permite agrupar elementos y aplicarles estilo en otro lugar utilizando CSS.

Formato de texto en línea

En HTML, puede utilizar elementos de formato para cambiar la apariencia del texto. Estos elementos se pueden categorizar como elementos de presentación o elementos de frase.

Elementos de presentación

Los elementos de presentación básicos cambian la fuente o el aspecto del texto; estos son <b>, <i>, <u> y <tt>. Estos elementos se definieron originalmente antes de que CSS permitiera convertir el texto en negrita, cursiva, etc. Ahora, por lo general, existen mejores formas de alterar el aspecto del texto, pero a veces aún se ven estos elementos.

Texto en negrita

Para colocar el texto en negrita, puede insertarlo dentro del elemento <b> como se ilustra en el siguiente ejemplo. El resultado aparece en Figure 11.

This <b>word</b> is bold.
b tag
Figure 11. La etiqueta <b> se usa para poner el texto en negrita.

De acuerdo con la especificación HTML5, el elemento <b> debe usarse solo cuando no haya más etiquetas apropiadas. El elemento que produce el mismo resultado visual, pero además agrega importancia semántica al texto marcado, es <strong>.

Texto en cursiva

Para colocar el texto en cursiva, puede insertarlo dentro del elemento <i> como se ilustra en el siguiente ejemplo. El resultado aparece en Figure 12.

This <i>word</i> is in italics.
i tag
Figure 12. La etiqueta <i> se usa para poner el texto en cursiva.

De acuerdo con la especificación HTML 5, el elemento <i> debe usarse solo cuando no haya etiquetas más apropiadas.

Texto subrayado

Para subrayar el texto, puede insertarlo dentro del elemento <u> como se ilustra en el siguiente ejemplo. El resultado aparece en Figure 13.

This <u>word</u> is underlined.
u tag
Figure 13. La etiqueta <u> se utiliza para subrayar el texto.

De acuerdo con la especificación HTML 5, el elemento <u> debe usarse solo cuando no haya mejores formas de subrayar el texto. CSS proporciona una alternativa moderna.

Fuente de ancho fijo o monoespaciada

Para mostrar texto en una fuente monoespaciada (ancho fijo), que a menudo se usa para mostrar código de computadora, puede usar el elemento <tt> como se ilustra en el siguiente ejemplo. El resultado aparece en Figure 14.

This <tt>word</tt> is in fixed-width font.
tt tag
Figure 14. La etiqueta <tt> se usa para mostrar texto en una fuente de ancho fijo.

La etiqueta <tt> no es compatible con HTML5. Los navegadores web aún lo procesan como se esperaba. Sin embargo, debería utilizar etiquetas más apropiadas, que incluyen <code>, <kbd>, <var> y <samp>.

Elementos frase

Los elementos de frase no solo cambian la apariencia del texto, sino que también agregan importancia semántica a una palabra o frase. Utilizándolos, puede enfatizar una palabra o marcarla como importante. Estos elementos, a diferencia de los elementos de presentación, son reconocidos por los lectores de pantalla, lo que hace que el texto sea más accesible para los visitantes con discapacidad visual y permite que los motores de búsqueda lean y evalúen mejor el contenido de la página. Los elementos de frase que usaremos a lo largo de esta lección son <em>, <strong> y <code>.

Texto enfatizado

Para enfatizar el texto, puede insertarlo dentro del elemento <em> como se ilustra en el siguiente ejemplo:

This <em>word</em> is emphasized.
em tag
Figure 15. La etiqueta <em> se usa para enfatizar el texto.

Como puede ver, los navegadores web muestran <em> de la misma manera que <i>, pero <em> agrega importancia semántica como un elemento de frase, lo que mejora la accesibilidad para los visitantes con discapacidad visual.

Texto importante

Para marcar el texto como importante, puede insertarlo dentro del elemento <strong> como se ilustra en el siguiente ejemplo. El resultado se muestra en Figure 16.

This <strong>word</strong> is important.
strong tag
Figure 16. La etiqueta <strong> se utiliza para marcar el texto como importante.

Como se visualiza, los navegadores web muestran <strong> de la misma manera que <b>, pero <strong> agrega importancia semántica como un elemento de frase, lo que mejora la accesibilidad para los visitantes con discapacidad visual.

Código de computadora

Para insertar un fragmento de código de computadora, puede insertarlo dentro del elemento <code> como se ilustra en el siguiente ejemplo. El resultado se muestra en Figure 17.

The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.
code tag
Figure 17. La etiqueta <code> se usa para insertar un fragmento de código de computadora.
Texto resaltado

Para resaltar texto con un fondo amarillo, similar al estilo de un resaltador, puede usar el elemento <mark> como se ilustra en el siguiente ejemplo. El resultado se muestra en Figure 18.

This <mark>word</mark> is highlighted.
mark tag
Figure 18. La etiqueta <mark> se utiliza para resaltar el texto con un fondo amarillo.

Dar formato al texto de nuestra lista de compras HTML

Basándonos en nuestros ejemplos anteriores, insertemos algunos elementos de frase para cambiar la apariencia del texto y al mismo tiempo agregar importancia semántica. El resultado aparece en Figure 19.

<h1>Garden Party</h1>
<p>
  Invitation to <strong>John's garden party</strong>.<br>
  <strong>Saturday, next week.</strong>
</p>

<h2>Agenda</h2>
<ol>
  <li>Welcome</li>
  <li>
    Barbecue
    <ul>
      <li><em>Vegetables</em></li>
      <li><em>Meat</em></li>
      <li><em>Burgers</em>, including vegetarian options</li>
    </ul>
  </li>
  <li>Dessert</li>
  <li><mark>Fireworks</mark></li>
</ol>

<hr>

<h2>Please bring</h2>
<ul>
  <li>Salad</li>
  <li>Drinks</li>
  <li>Bread</li>
  <li>Snacks</li>
  <li>Desserts</li>
</ul>
HTML PAGE 3
Figure 19. La página HTML con algunos elementos de formato.

En este documento HTML de muestra, la información más importante sobre la fiesta en el jardín en sí se marca como importante mediante el elemento <strong>. Los alimentos que están disponibles para la barbacoa se enfatizan mediante el elemento <em>. Los fuegos artificiales simplemente se resaltan usando el elemento <mark>.

Como ejercicio, puede intentar formatear otros fragmentos de texto utilizando también los otros elementos de formato.

Texto preformateado

En la mayoría de los elementos HTML, los espacios en blanco generalmente se reducen a un solo espacio o incluso se ignoran por completo. Sin embargo, hay un elemento HTML llamado <pre> que le permite definir el llamado texto preformateado. El espacio en blanco en el contenido de este elemento, incluidos los espacios y los saltos de línea, se conservan y representan en el navegador web. Además, el texto se muestra en una fuente de ancho fijo, similar al elemento <code>.

<pre>
field() {
  shift $1 ; echo $1
}
</pre>
pre tag
Figure 20. Representación del código HTML del navegador web que ilustra cómo el elemento HTML <pre> conserva los espacios en blanco.

Agrupar elementos

Por convención, los elementos HTML se dividen en dos categorías:

Elementos en bloque

Aparecen en una nueva línea y ocupan todo el ancho disponible. Ejemplos de elementos de bloque que ya discutimos son <p>, <ol> y <h2>.

Elementos en línea

Estos aparecen en la misma línea que otros elementos y texto, ocupando solo el espacio que requiera su contenido. Ejemplos de elementos de línea son <strong>, <em> y <i>.

Note

HTML5 ha introducido categorías de elementos más precisas y precisas, tratando de evitar confusiones con el bloque CSS y los cuadros en línea. Para simplificar, nos enfocaremos aquí a la subdivisión convencional de elementos en bloque y en línea.

Los elementos fundamentales para agrupar varios son los elementos <div> y <span>.

El elemento <div> es un contenedor en bloque para otros elementos HTML y no agrega valor semántico por sí mismo. Puede utilizar este elemento para dividir un documento HTML en secciones y estructurar su contenido, tanto para la legibilidad del código como para aplicar estilos CSS a un grupo de elementos, como aprenderá en una lección posterior.

De forma predeterminada, los navegadores web siempre insertan un salto de línea antes y después de cada elemento <div> para que cada uno se muestre en su propia línea.

Por el contrario, el elemento <span> se usa como contenedor para texto HTML y generalmente se usa para agrupar otros elementos en línea con el fin de aplicar estilos usando CSS a una porción más pequeña de texto.

El elemento <span> se comporta como un texto normal y no comienza en una nueva línea. Por tanto, es un elemento en línea.

El siguiente ejemplo compara la representación visual del elemento semántico <p> y los elementos de agrupación <div> y <span>:

<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>

Un navegador web muestra este código como en Figure 21.

grouping elements
Figure 21. Representación del navegador web de un documento de prueba que ilustra las diferencias entre los elementos de párrafo, div y span en HTML.

Ya vimos que, de forma predeterminada, el navegador web agrega espacios antes y después de los elementos <p>. Este espaciado no se aplica a ninguno de los elementos de agrupación <div> y <span>. Sin embargo, los elementos <div> se formatean como sus propios bloques, mientras que el texto de los elementos <span> se muestra en la misma línea.

Estructura de la página HTML

Hemos discutido cómo usar elementos HTML para describir semánticamente el contenido de una página web, en otras palabras, para transmitir significado y contexto. Otro grupo de elementos está diseñado con el propósito de describir la estructura semántica de una página web, una expresión o su estructura. Estos elementos son elementos en bloque, es decir, visualmente se comportan de manera similar a un elemento <div>. Su propósito es definir la estructura semántica de una página web especificando áreas bien definidas como encabezados, pies de página y el contenido principal de la página. Estos elementos permiten la agrupación semántica de contenidos para que también puedan ser entendidos por un ordenador, incluidos los motores de búsqueda y los lectores de pantalla.

El elemento <header>

El elemento <header> contiene información introductoria al elemento semántico circundante dentro de un documento HTML. (<h1>, …​, <h6>) tienen diferentes usos, sin embargo un <header> a menudo incluye un elemento de encabezado (<h1>, …​, <h6>).

En la práctica, este elemento se utiliza con mayor frecuencia para representar el encabezado de la página, como un banner con un logotipo. También se puede utilizar para introducir el contenido de cualquiera de los siguientes elementos: <body>, <section>, <article>, <nav>, o <aside>.

Un documento puede tener varios elementos <header>, pero un elemento <header> no se puede anidar dentro de otro elemento <header>. Tampoco se puede utilizar un elemento <footer> dentro de un <header>.

Por ejemplo, para agregar un encabezado de página a nuestro documento de ejemplo, podemos hacer lo siguiente:

<header>
  <h1>Garden Party</h1>
</header>

No habrá cambios visibles en el documento HTML, ya que <h1> (como todos los demás elementos de encabezado) es un elemento a nivel de bloque sin más propiedades visuales.

El elemento de contenido <main>

El elemento <main> es un contenedor para el contenido central de una página web. No debe haber más de un elemento <main> en un documento HTML.

En nuestro documento de ejemplo, todo el código HTML que hemos escrito hasta ahora se colocaría dentro del elemento <main>.

<main>
  <header>
    <h1>Garden Party</h1>
  </header>
  <p>
    Invitation to <strong>John's garden party</strong>.<br>
    <strong>Saturday, next week.</strong>
  </p>

  <h2>Agenda</h2>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>

  <hr>

  <h2>Please bring</h2>
  <ul>
    <li>Salad</li>
    <li>Drinks</li>
    <li>Bread</li>
    <li>Snacks</li>
    <li>Desserts</li>
  </ul>
</main>

Como el elemento <header>, el elemento <main> no causa ningún cambio visual en nuestro ejemplo.

El elemento <footer>

El elemento <footer> contiene notas a pie de página, por ejemplo, información de autoría, información de contacto o documentos relacionados, para el elemento semántico que lo rodea, p. Ej. <section>, <nav>, o <aside>. Un documento puede tener varios elementos <footer> que le permiten describir mejor los elementos semánticos. Sin embargo, un elemento <footer> no se puede anidar dentro de otro elemento <footer>, ni se puede usar un elemento <header> dentro de un <footer>.

Para nuestro ejemplo, podemos agregar información de contacto para el anfitrión (John) como se muestra en el siguiente ejemplo:

<footer>
  <p>John Doe</p>
  <p>john.doe@example.com</p>
</footer>

El elemento <nav>

El elemento <nav> describe una unidad de navegación principal, como un menú, que contiene una serie de hipervínculos.

Note

No todos los hipervínculos deben incluirse dentro de un elemento <nav>. Es útil cuando se listan un grupo de enlaces.

Debido a que los hipervínculos aún no se han cubierto, el elemento de navegación no se incluirá en el ejemplo de esta lección.

El elemento <aside>

El elemento <aside> es un contenedor que no es necesario dentro del orden del contenido de la página principal, pero que generalmente está relacionado indirectamente o es complementario. Este elemento se utiliza a menudo para las barras laterales que muestran información secundaria, como un glosario.

Para nuestro ejemplo, podemos agregar información de dirección y viaje, que solo están indirectamente relacionados con el contenido restante, usando el elemento <aside>.

<aside>
  <p>
    10, Main Street<br>
    Newville
  </p>
  <p>Parking spaces available.</p>
</aside>

El elemento <section>

El elemento <section> define una sección lógica en un documento que es parte del elemento semántico circundante, pero que no funcionaría como contenido independiente, como un capítulo.

En nuestro documento de ejemplo, podemos ajustar las secciones de contenido para la agenda y traer secciones de lista como se muestra en el siguiente ejemplo:

<section>
  <header>
    <h2>Agenda</h2>
  </header>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>
</section>

<hr>

<section>
  <header>
    <h2>Please bring</h2>
  </header>
  <ul>
    <li>Salad</li>
    <li>Drinks</li>
    <li>Bread</li>
    <li>Snacks</li>
    <li>Desserts</li>
  </ul>
</section>

Este ejemplo también agrega más elementos <header> dentro de las secciones, de modo que cada sección está dentro de su propio elemento <header>.

El elemento <article>

El elemento <article> define contenido independiente y autónomo que tiene sentido por sí solo sin el resto de la página. Su contenido es potencialmente redistribuible o reutilizable en otro contexto. Los ejemplos típicos o el material apropiado para un elemento <article> son una publicación en un blog, una lista de productos para una tienda y un anuncio de un producto. El anuncio podría existir tanto por sí solo como dentro de una página más grande.

En nuestro ejemplo, podemos reemplazar la primera <section> que envuelve la agenda con un elemento <article>.

<article>
  <header>
    <h2>Agenda</h2>
  </header>
  <ol>
    <li>Welcome</li>
    <li>
      Barbecue
      <ul>
        <li><em>Vegetables</em></li>
        <li><em>Meat</em></li>
        <li><em>Burgers</em>, including vegetarian options</li>
      </ul>
    </li>
    <li>Dessert</li>
    <li><mark>Fireworks</mark></li>
  </ol>
</article>

El elemento <header> que agregamos en el ejemplo anterior también puede persistir aquí, porque los elementos <article> pueden tener sus propios elementos <header>.

El ejemplo final

Combinando todos los ejemplos anteriores, el documento HTML final de nuestra invitación tiene el siguiente aspecto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Garden Party</title>
  </head>

  <body>
    <main>
      <h1>Garden Party</h1>
      <p>
        Invitation to <strong>John's garden party</strong>.<br>
        <strong>Saturday, next week.</strong>
      </p>

      <article>
        <h2>Agenda</h2>
        <ol>
          <li>Welcome</li>
          <li>
            Barbecue
            <ul>
              <li><em>Vegetables</em></li>
              <li><em>Meat</em></li>
              <li><em>Burgers</em>, including vegetarian options</li>
            </ul>
          </li>
          <li>Dessert</li>
          <li><mark>Fireworks</mark></li>
        </ol>
      </article>

      <hr>

      <section>
        <h2>Please bring</h2>
        <ul>
          <li>Salad</li>
          <li>Drinks</li>
          <li>Bread</li>
          <li>Snacks</li>
          <li>Desserts</li>
        </ul>
      </section>
    </main>

    <aside>
      <p>
        10, Main Street<br>
        Newville
      </p>
      <p>Parking spaces available.</p>
    </aside>

    <footer>
      <p>John Doe</p>
      <p>john.doe@example.com</p>
    </footer>
  </body>
</html>

En un navegador web, toda la página se representa como se muestra en Figure 22.

HTML PAGE 4
Figure 22. Representación del navegador web del documento HTML resultante que combina los ejemplos anteriores. La página representa una invitación a una fiesta en el jardín y describe la agenda de la noche y una lista de comida para que los invitados lleven.

Ejercicios guiados

  1. Para cada una de las siguientes etiquetas, indique la etiqueta de cierre correspondiente:

    <h5>

    <br>

    <ol>

    <dd>

    <hr>

    <strong>

    <tt>

    <main>

  2. Para cada una de las siguientes etiquetas, indique si marca el comienzo de un bloque o elemento en línea:

    <h3>

    <span>

    <b>

    <div>

    <em>

    <dl>

    <li>

    <nav>

    <code>

    <pre>

  3. ¿Qué tipo de listas se pueden crear en HTML? ¿Qué etiquetas debería utilizar para cada una de ellas?

  4. ¿Qué etiquetas encierran los elementos en bloque que puede utilizar para estructurar una página HTML?

Ejercicios de exploración

  1. Cree una página HTML básica con el título “Form Rules”. Utilizará esta página HTML para todos los ejercicios de exploración, cada uno de los cuales se basa en los anteriores. Luego agregue un encabezado de nivel 1 con el texto “How to fill in the request form”, un párrafo con el texto “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” y una lista desordenada con los siguientes elementos: “Name”, “Surname”, “Email Address”, “Nation”, “Country”, y “Zip/Postal Code”.

  2. Ponga los primeros tres campos (“Name”, “Surname”, y “Email Address”) en negrita, a la vez que agrega importancia semántica. Luego agregue un encabezado de nivel 2 con el texto “Required fields” y un párrafo con el texto “Bold fields are mandatory.”

  3. Agregue otro encabezado de nivel 2 con el texto “Steps to follow”, un párrafo con el texto “There are four steps to follow:”, y una lista ordenada con los siguientes elementos: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive” y “Check your e-mail - You will receive the full HTML course in minutes”.

  4. Usando <div>, cree un bloque para cada sección que comience con un encabezado de nivel 2.

  5. Usando <div>, cree otro bloque para la sección comenzando con el título de nivel 1. Luego divida esta sección de las otras dos con una línea horizontal.

  6. Agregue el elemento de encabezado con el texto “Form Rules - 2021” y el elemento de pie de página con el texto “Copyright Note - 2021”. Finalmente, agregue el elemento principal que debe contener los tres bloques <div>.

Resumen

En esta lección aprendió:

  • Cómo crear el marcado para contenidos en un documento HTML

  • La estructura jerárquica de texto HTML

  • La diferencia entre elementos HTML en bloque y en línea

  • Cómo crear documentos HTML con estructura semántica

En esta lección se discutieron los siguientes términos:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Las etiquetas de encabezado.

<p>

La etiqueta de párrafo.

<ol>

La etiqueta de lista ordenada.

<ul>

La etiqueta de lista desordenada.

<li>

La etiqueta del elemento de la lista.

<dl>

La etiqueta de la lista de descripción.

<dt>, <dd>

Las etiquetas de cada término y descripción para una lista de descripción.

<pre>

La etiqueta de conservación de formato.

<b>, <i>, <u>, <tt>, <em>, <strong>, <code>, <mark>

Las etiquetas de formato.

<div>, <span>

Las etiquetas de agrupación.

<header>, <main>, <nav>, <aside>, <footer>

Las etiquetas utilizadas para proporcionar una estructura y un diseño simples a una página HTML.

Respuestas a los ejercicios guiados

  1. Para cada una de las siguientes etiquetas, indique la etiqueta de cierre correspondiente:

    <h5>

    </h5>

    <br>

    Does not exist

    <ol>

    </ol>

    <dd>

    </dd>

    <hr>

    Does not exist

    <strong>

    </strong>

    <tt>

    </tt>

    <main>

    </main>

  2. Para cada una de las siguientes etiquetas, indique si marca el comienzo de un bloque o elemento en línea:

    <h3>

    Block Element

    <span>

    Inline Element

    <b>

    Inline Element

    <div>

    Block Element

    <em>

    Inline Element

    <dl>

    Block Element

    <li>

    Block Element

    <nav>

    Block Element

    <code>

    Inline Element

    <pre>

    Block Element

  3. ¿Qué tipo de listas se pueden crear en HTML? ¿Qué etiquetas debería utilizar para cada una de ellas?

    En HTML, puede crear tres tipos de listas: listas ordenadas que consisten en una serie de elementos de lista numerados, listas desordenadas que consisten en una serie de elementos de lista que no tienen un orden o secuencia especial y listas de descripción que representan entradas como en un diccionario o enciclopedia. Una lista ordenada se encierra entre las etiquetas <ol> y </ol>, una lista desordenada se encierra entre las etiquetas <ul> y </ul>, y una lista de descripción se encierra entre las etiquetas <dl> y </dl>. Cada elemento de una lista ordenada o desordenada se incluye entre las etiquetas <li> y </li>, mientras que cada término de una lista de descripción se incluye entre las etiquetas <dt> y </dt> y su descripción se incluye entre las etiquetas <dd> y </dd>.

  4. ¿Qué etiquetas encierran los elementos de bloque que puede usar para estructurar una página HTML?

    Las etiquetas <header> y </header> encierran el encabezado de la página, las etiquetas <main> y </main> encierran el contenido principal de la página HTML, las etiquetas <nav> y </nav> encierran la llamada barra de navegación, las etiquetas <aside> y </aside> encierran la barra lateral, y las etiquetas <footer> y </footer> encierran la página pie de página.

Respuestas a los ejercicios de exploración

  1. Cree una página HTML básica con el título “Form Rules”. Utilizará esta página HTML para todos los ejercicios de exploración, cada uno de los cuales se basa en los anteriores. Luego agregue un encabezado de nivel 1 con el texto “How to fill in the request form”, un párrafo con el texto “To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields:” y una lista desordenada con los siguientes elementos de la lista: “Name”, “Surname”, “Email Address”, “Nation”, “Country”, y “Zip/Postal Code”.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Form Rules</title>
      </head>
    
      <body>
        <h1>How to fill in the request form</h1>
        <p>
          To receive the PDF document with the complete HTML course, it is necessary
          to fill in the following fields:
        </p>
        <ul>
          <li>Name</li>
          <li>Surname</li>
          <li>Email Address</li>
          <li>Nation</li>
          <li>Country</li>
          <li>Zip/Postal Code</li>
        </ul>
      </body>
    </html>
  2. Ponga los primeros tres campos (“Name”, “Surname”, y “Email Address”) en negrita, al mismo tiempo que agrega importancia semántica. Luego agregue un encabezado de nivel 2 con el texto “Required fields” y un párrafo con el texto “Bold fields are mandatory.”.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Form Rules</title>
      </head>
    
      <body>
        <h1>How to fill in the request form</h1>
        <p>
          To receive the PDF document with the complete HTML course, it is necessary
          to fill in the following fields:
        </p>
        <ul>
          <li><strong> Name </strong></li>
          <li><strong> Surname </strong></li>
          <li><strong> Email Address </strong></li>
          <li>Nation</li>
          <li>Country</li>
          <li>Zip/Postal Code</li>
        </ul>
    
        <h2>Required fields</h2>
        <p>Bold fields are mandatory.</p>
      </body>
    </html>
  3. Agregue otro encabezado de nivel 2 con el texto “Steps to follow”, un párrafo con el texto “There are four steps to follow:”, y una lista ordenada con los siguientes elementos de la lista: “Fill in the fields”, “Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link you receive”, y “Check your e-mail - You will receive the full HTML course in minutes”.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Form Rules</title>
      </head>
    
      <body>
        <h1>How to fill in the request form</h1>
        <p>
          To receive the PDF document with the complete HTML course, it is necessary
          to fill in the following fields:
        </p>
        <ul>
          <li><strong> Name </strong></li>
          <li><strong> Surname </strong></li>
          <li><strong> Email Address </strong></li>
          <li>Nation</li>
          <li>Country</li>
          <li>Zip/Postal Code</li>
        </ul>
    
        <h2>Required fields</h2>
        <p>Bold fields are mandatory.</p>
    
        <h2>Steps to follow</h2>
        <p>There are four steps to follow:</p>
        <ol>
          <li>Fill in the fields</li>
          <li>Click the Submit button</li>
          <li>
            Check your e-mail and confirm your request by clicking on the link you
            receive
          </li>
          <li>
            Check your e-mail - You will receive the full HTML course in minutes
          </li>
        </ol>
      </body>
    </html>
  4. Usando <div>, cree un bloque para cada sección que comience con un encabezado de nivel 2.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Form Rules</title>
      </head>
    
      <body>
        <h1>How to fill in the request form</h1>
        <p>
          To receive the PDF document with the complete HTML course, it is necessary
          to fill in the following fields:
        </p>
        <ul>
          <li><strong> Name </strong></li>
          <li><strong> Surname </strong></li>
          <li><strong> Email Address </strong></li>
          <li>Nation</li>
          <li>Country</li>
          <li>Zip/Postal Code</li>
        </ul>
    
        <div>
          <h2>Required fields</h2>
          <p>Bold fields are mandatory.</p>
        </div>
    
        <div>
          <h2>Steps to follow</h2>
          <p>There are four steps to follow:</p>
          <ol>
            <li>Fill in the fields</li>
            <li>Click the Submit button</li>
            <li>
              Check your e-mail and confirm your request by clicking on the link you
              receive
            </li>
            <li>
              Check your e-mail - You will receive the full HTML course in minutes
            </li>
          </ol>
        </div>
      </body>
    </html>
  5. Usando <div>, cree otro bloque para la sección que comienza con el encabezado de nivel 1. Luego divide esta sección de las otras dos con una línea horizontal.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Form Rules</title>
      </head>
    
      <body>
        <div>
          <h1>How to fill in the request form</h1>
          <p>
            To receive the PDF document with the complete HTML course, it is
            necessary to fill in the following fields:
          </p>
          <ul>
            <li><strong> Name </strong></li>
            <li><strong> Surname </strong></li>
            <li><strong> Email Address </strong></li>
            <li>Nation</li>
            <li>Country</li>
            <li>Zip/Postal Code</li>
          </ul>
        </div>
    
        <hr>
    
        <div>
          <h2>Required fields</h2>
          <p>Bold fields are mandatory.</p>
        </div>
    
        <div>
          <h2>Steps to follow</h2>
          <p>There are four steps to follow:</p>
          <ol>
            <li>Fill in the fields</li>
            <li>Click the Submit button</li>
            <li>
              Check your e-mail and confirm your request by clicking on the link you
              receive
            </li>
            <li>
              Check your e-mail - You will receive the full HTML course in minutes
            </li>
          </ol>
        </div>
      </body>
    </html>
  6. Agregue el elemento de encabezado con el texto “Form Rules - 2021” y el elemento de pie de página con el texto “Copyright Note - 2021”. Finalmente, agregue el elemento principal que debe contener los tres bloques <div>.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Form Rules</title>
      </head>
    
      <body>
        <header>
          <h1>Form Rules - 2021</h1>
        </header>
    
        <main>
          <div>
            <h1>How to fill in the request form</h1>
            <p>
              To receive the PDF document with the complete HTML course, it is
              necessary to fill in the following fields:
            </p>
            <ul>
              <li><strong> Name </strong></li>
              <li><strong> Surname </strong></li>
              <li><strong> Email Address </strong></li>
              <li>Nation</li>
              <li>Country</li>
              <li>Zip/Postal Code</li>
            </ul>
          </div>
    
          <hr>
    
          <div>
            <h2>Required fields</h2>
            <p>Bold fields are mandatory.</p>
          </div>
    
          <div>
            <h2>Steps to follow</h2>
            <p>There are four steps to follow:</p>
            <ol>
              <li>Fill in the fields</li>
              <li>Click the Submit button</li>
              <li>
                Check your e-mail and confirm your request by clicking on the link
                you receive
              </li>
              <li>
                Check your e-mail - You will receive the full HTML course in minutes
              </li>
            </ol>
          </div>
        </main>
    
        <footer>
          <p>Copyright Note - 2021</p>
        </footer>
      </body>
    </html>

Linux Professional Insitute Inc. Todos los derechos reservados. Visite el sitio web de Learning Materials: https://learning.lpi.org
Este trabajo está registrado bajo la Licencia Internacional Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

Siguiente lección

032.3 Referencias HTML y recursos incrustados (032.3 Lección 1)

Leer la próxima lección

Linux Professional Insitute Inc. Todos los derechos reservados. Visite el sitio web de Learning Materials: https://learning.lpi.org
Este trabajo está registrado bajo la Licencia Internacional Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

LPI es una organización sin fines de lucro.

© 2022 Linux Professional Institute (LPI) es la organización global de certificación y apoyo académico para profesionales de código abierto. Con más de 200,000 titulares de certificación, es el primer y más grande organismo de certificación no comercial del mundo para Linux y Open Source. LPI cuenta con profesionales certificados en más de 180 países, realiza exámenes en varios idiomas y tiene cientos de socios de capacitación.

Nuestro propósito es hacer que las oportunidades económicas y creativas estén disponibles para todos, haciendo que el conocimiento de código abierto y la certificación sea universalmente accesible.

  • LinkedIn
  • flogo-RGB-HEX-Blk-58 Facebook
  • Twitter
  • Contáctenos
  • Política de privacidad y cookies

¿Detecta un error o desea ayudar a mejorar esta página? Por favor háznoslo saber.

© 1999–2022 The Linux Professional Institute Inc. Todos los derechos reservados.