Etiqueta main en HTML

¿Qué es la etiqueta <main> en HTML?

La etiqueta <main> en HTML5 es un contenedor que se utiliza para marcar el contenido principal de una página web. La idea detrás de la etiqueta <main> es tener una sección en la página web que contenga el contenido principal y exclusivo de la misma, que no se repita en otras páginas de la web.

La etiqueta <main> solo puede aparecer una sola vez en una página web, y su contenido no debe incluir elementos como encabezados, pies de página, formularios de búsqueda, enlaces de navegación, etc.

Estos elementos deben estar fuera de la etiqueta <main> y se pueden incluir en otras partes de la página, como una barra lateral o un menú de navegación.

Ejemplo de uso

Aquí hay un ejemplo de uso de la etiqueta <main> en HTML5:


<!DOCTYPE html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Acerca de</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Bienvenido a mi página web</h1>
      <p>Este es el contenido principal de mi página web</p>
    </main>
    <footer>
      <p>Copyright © 2021 Mi Página Web</p>
    </footer>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <main> se utiliza para marcar el contenido principal de la página web, que consiste en un título y un párrafo.

Mientras que el encabezado y el pie de página se encuentran fuera de la etiqueta <main>, contienen elementos complementarios a la página web como un menú de navegación y una leyenda de copyright, respectivamente.

Atributos

La etiqueta <main> de HTML5 no tiene atributos específicos. Sin embargo, se pueden utilizar los atributos genéricos de HTML5, como id, class, style, etc., para aplicar estilos o identificar elementos específicos en una página web.

Aquí hay un ejemplo completo de cómo se pueden utilizar estos atributos en la etiqueta <main> de HTML5:


<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Estilos para la clase "container" */
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Acerca de</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </header>
    <main id="contenido-principal" class="container">
      <h1>Bienvenido a mi página web</h1>
      <p>Este es el contenido principal de mi página web</p>
    </main>
    <footer>
      <p>Copyright © 2021 Mi Página Web</p>
    </footer>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se ha utilizado el atributo id para asignar una identificación única a la etiqueta <main> y el atributo class para asignar una clase que se puede utilizar en un archivo de estilos para aplicar estilos a todos los elementos con esa clase.

En este caso, la clase “container” se utiliza para definir un contenedor con un ancho máximo y un margen centrado, y para agregar un margen interior en todas las direcciones.

Además, se ha utilizado una sección de estilo dentro de la etiqueta <head> para definir los estilos para la clase “container”. De esta manera, se pueden aplicar estilos a los elementos de la página sin tener que incluir el código de estilo en cada elemento.

Más ejemplos

Aquí hay tres ejemplos avanzados de la etiqueta <main> de HTML5:

  1. Ejemplo de uso de la etiqueta <main> en una estructura de página web básica:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Página Web</title>
    <style>
      /* Estilos para la clase "container" */
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Acerca de</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </header>

    <main class="container">
      <h1>Bienvenido a mi página web</h1>
      <p>Este es el contenido principal de mi página web</p>
    </main>

    <footer>
      <p>Copyright © 2021 Mi Página Web</p>
    </footer>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <main> se utiliza para contener el contenido principal de la página web, que se muestra dentro de un contenedor con un ancho máximo y un margen centrado.

  1. Ejemplo de uso de la etiqueta <main> para mostrar contenido dinámico en una aplicación web:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Aplicación Web</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      /* Estilos para la clase "container" */
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#" id="home">Inicio</a></li>
          <li><a href="#" id="about">Acerca de</a></li>
          <li><a href="#" id="contact">Contacto</a></li>
        </ul>
      </nav>
    </header>

    <main class="container">
      <div id="contenido-principal">
        <h1>Bienvenido a mi aplicación web</h1>
        <p>Este es el contenido principal de mi aplicación web</p>
      </div>
    </main>

    <footer>
      <p>Copyright © 2021 Mi Aplicación Web</p>
    </footer>
  <script>
    $(document).ready(function() {

      // Evento para cargar el contenido de "Inicio"
      $("#home").click(function(e) {
        e.preventDefault();
        $("#contenido-principal").html(
          "<h1>Bienvenido a mi aplicación web</h1><p>Este es el contenido principal de mi aplicación web</p>"
        );
      });

      // Evento para cargar el contenido de "Acerca de"
      $("#about").click(function(e) {
        e.preventDefault();
        $("#contenido-principal").html(
          "<h1>Acerca de mi aplicación web</h1><p>Este es el contenido acerca de mi aplicación web</p>"
        );
      });
    
      // Evento para cargar el contenido de "Contacto"
      $("#contact").click(function(e) {
        e.preventDefault();
        $("#contenido-principal").html(
          "<h1>Contacto con mi aplicación web</h1><p>Este es el contenido de contacto con mi aplicación web</p>"
        );
      });
    });
  </script>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <main> se utiliza para contener el contenido principal de la aplicación web, que se puede actualizar dinámicamente mediante eventos JavaScript asociados a los enlaces en la barra de navegación.

  1. Ejemplo de uso de la etiqueta <main> en una estructura de página web con múltiples secciones:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Página Web Avanzada</title>
    <style>
      /* Estilos para la clase "container" */
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Acerca de</a></li>
          <li><a href="#">Servicios</a></li>
          <li><a href="#">Portafolio</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </header>

    <main class="container">
      <section id="inicio">
        <h2>Bienvenido a mi página web avanzada</h2>
        <p>Este es el contenido de la sección "Inicio".</p>
      </section>
      <section id="acerca-de">
        <h2>Acerca de mi página web avanzada</h2>
        <p>Este es el contenido de la sección "Acerca de".</p>
      </section>
      <section id="servicios">
        <h2>Servicios ofrecidos por mi página web avanzada</h2>
        <p>Este es el contenido de la sección "Servicios".</p>
      </section>
      <section id="portafolio">
        <h2>Portafolio de mi página web avanzada</h2>
        <p>Este es el contenido de la sección "Portafolio".</p>
      </section>
      <section id="contacto">
        <h2>Contacto con mi página web avanzada</h2>
        <p>Este es el contenido de la sección "Contacto".</p>
      </section>
    </main>

    <footer>
      <p>Copyright © 2021 Mi Página Web Avanzada</p>
    </footer>

  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <main> se utiliza para contener varias secciones con contenido diferente en la página web.

Cada sección se identifica con un identificador único y puede ser accedida directamente desde la barra de navegación.

Curso de HTML Desde Cero

Inscríbete Ahora