img
HTML5 desde Cero: Estructura y Etiquetas Semánticas
¿Qué es HTML5?
HTML5 es el lenguaje estándar para crear y estructurar contenido web. Introduce etiquetas semánticas, nuevas APIs y soporte multimedia sin necesidad de complementos externos.
Estructura Básica de un Documento HTML5
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
<style>
body {font-family: Arial, sans-serif; text-align: left; margin-top: 50px;}
h1 {color: blue;}
.principal {background-color: #ffffff; padding: 30px;}
#inicio {background-color: black; padding: 30px; color: rgb(133, 202, 202);}
</style>
</head>
<body>
<header>
<h1>Bienvenidos a Mi Sitio Web</h1>
</header>
<h1>Bienvenidos a Mi Sitio Web</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca de</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<main class="pricipal">
<section id="inicio">
<h2>Inicio</h2>
<p>Contenido principal de la página.</p>
</section>
<section id="acerca">
<h2>Acerca de</h2>
<p>Información sobre nosotros.</p>
</section>
</main>
<footer>
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
<p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Principales Etiquetas Semánticas
- <header>: Encabezado de una sección o de la página.
- <nav>: Menú de navegación.
- <main>: Contenido principal.
- <section>: Sección temática.
- <article>: Contenido independiente.
- <aside>: Contenido relacionado o complementario.
- <footer>: Pie de página.
Buenas Prácticas de HTML5
- Utilizar etiquetas semánticas para mejorar la Accesibilidad y SEO.
- Incluir el atributo lang en la etiqueta <html> para el idioma.
- Optimizar el rendimiento utilizando correctamente las etiquetas <meta>.
- Mantener una estructura clara y comentarios para el mantenimiento del código.
📚 Siguiente Paso El próximo artículo tratará sobre
Exploraremos CSS3: Diseño y Estilización para una Web Moderna
No hay comentarios.:
Publicar un comentario
✅ En nuestro blog moderamos los mensajes, no usar palabras ni frases que puedan afectar a los demás. 🤝🏻
Chat.JGuiza.com