Crear un contenedor de contenido principal en HTML

Introducción

En HTML, la etiqueta <main> se utiliza para representar el contenido principal o preponderante del documento. Es una etiqueta recientemente introducida en HTML5 y generalmente se escribe dentro de la etiqueta <body>. El contenido de la etiqueta <main> debe ser único y directamente relacionado con el tema central del documento. Es un concepto similar a un punto de referencia, que permite identificar rápidamente y facilita la navegación en un documento largo.

En este laboratorio, aprenderemos cómo utilizar la etiqueta <main> para crear un contenedor de contenido principal en HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 95%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Configurar el archivo HTML

Crea un nuevo archivo y denomínalo index.html. Abrílo en tu editor de código preferido.

En la sección <head> del archivo HTML, agrega el siguiente código:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body></body>
</html>

Agregar un encabezado y un pie de página

Para que nuestra página web se vea completa, agregaremos un encabezado y un pie de página.

Agrega el siguiente código entre las etiquetas <body> de tu archivo HTML:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Welcome to my website. This is the main content area.</p>
</main>

<footer>
  <p>&copy;2021 My Website. All rights reserved.</p>
</footer>

El código anterior define un encabezado con un menú de navegación, una etiqueta <main> y un pie de página.

Agregar contenido a la etiqueta

Ahora que hemos configurado nuestro encabezado y pie de página, podemos agregar contenido a la etiqueta main.

Agrega el siguiente código entre las etiquetas <main>:

<main>
  <h2>About Us</h2>
  <p>
    We are a company that specializes in web development services. Our team
    consists of experienced web developers who can help you create a website
    that will help your business grow.
  </p>
  <h2>Our Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Web Development</li>
    <li>Search Engine Optimization</li>
    <li>Social Media Marketing</li>
  </ul>
  <h2>Our Portfolio</h2>
  <p>Here are some of the websites we have created:</p>
  <ul>
    <li><a href="#">Website 1</a></li>
    <li><a href="#">Website 2</a></li>
    <li><a href="#">Website 3</a></li>
  </ul>
</main>

Revisando el código HTML final

Después de agregar el área principal de contenido, tu código HTML debería verse así:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>About Us</h2>
      <p>
        We are a company that specializes in web development services. Our team
        consists of experienced web developers who can help you create a website
        that will help your business grow.
      </p>
      <h2>Our Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>Search Engine Optimization</li>
        <li>Social Media Marketing</li>
      </ul>
      <h2>Our Portfolio</h2>
      <p>Here are some of the websites we have created:</p>
      <ul>
        <li><a href="#">Website 1</a></li>
        <li><a href="#">Website 2</a></li>
        <li><a href="#">Website 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Resumen

En este laboratorio, aprendimos cómo usar la etiqueta <main> para crear un contenedor principal de contenido en un documento HTML. Creamos un encabezado, un área principal de contenido y un pie de página con contenidos de muestra. Recuerda que el contenido de la etiqueta <main> debe ser único y estar directamente relacionado con el tema central del documento. Al usar la etiqueta <main>, podemos crear una sección fácilmente identifiable del sitio web que ayudará a los usuarios a navegar con facilidad.

Contenido principal de HTML