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.