HTML
SEMANTICO (ETIQUETAS SEMANTICAS)
Beneficios
del HTML semántico:
• Mejor
accesibilidad: Los lectores de pantalla y otros usuarios con discapacidad pueden comprender mejor la
estructura de la página.
• Mejor SEO:
Los motores de búsqueda pueden identificar la relevancia y el significado del
contenido, mejorando el posicionamiento del sitio web.
• Código más
legible: La estructura del código se vuelve más clara y fácil de entender,
facilitando el mantenimiento y las actualizaciones.
• Estándar
moderno: El HTML semántico es la mejor práctica para el desarrollo web moderno.
INVESTIGAR Y UN EJEMPLO CORTO (nombres sugeridos de los archivos)
• <header> para el encabezado del sitio. header.html
• <nav> para la navegación del sitio. nav.html
• <main> para el contenido principal de la
página. main.html
• <article> para un artículo específico. article.html
• <aside> para información adicional. aside.html
• <footer> para el pie de página. Footer.html
Prompt para CHT GPT:
GENERAME 6 PAGINAS WEB DONDE UTILICES EN CADA PAGINA 1 DE
LAS SIGUIENTES ETIQUETAS SEMANTICAS, ES DECIR, EN CADA PAGINA UNA SOLA
ETIQUETA, LAS ETIQUETAS SON: <header>, <nav>, <main>,
<article>, <aside> Y <footer>, DAME PAGINAS CORTAS
Un
ejemplo práctico (HAGA COPY Y PEGUE):
<html lang="es">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ejemplo de HTML Semántico</title>
</head>
<body>
<header>
<h1>Mi
sitio web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artículo principal</h2>
<p>Aquí
va el contenido del artículo principal.</p>
</article>
<aside>
<h3>Información adicional</h3>
<p>Aquí
va información adicional relevante para el artículo principal.</p>
</aside>
</main>
<footer>
<p>© 2024
Mi Sitio Web</p>
</footer>
</body>
</html>
No hay comentarios:
Publicar un comentario