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:
- 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.
- 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.
- 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.