HTML 5
HTML5 introduce varias etiquetas nuevas que son importantes para estructurar y semántica web.
Algunas de las etiquetas más importantes en HTML5 son:
1. <header>: Define la cabecera de un documento o una sección.
2. <nav>: Define una sección de navegación en la página.
3. <main>: Define el contenido principal del documento o la sección.
4. <section>: Define una sección en un documento.
5. <article>: Define un artículo independiente en un documento, como una publicación de
blog o un comentario.
6. <aside>: Define contenido relacionado, como barras laterales o anuncios, que están aparte del
contenido principal.
7. <footer>: Define el pie de página de un documento o una sección.
8. <figure>: Define contenido multimedia, como imágenes, gráficos o videos, con una
descripción opcional usando <figcaption>.
9. <figcaption>: Define una leyenda para un elemento <figure>.
10. <time>: Representa una fecha y/u hora en un formato legible por máquina para ayudar
a los motores de búsqueda y a la accesibilidad.
Estas etiquetas ofrecen una estructura semántica más clara y significativa, lo que facilita la
comprensión del contenido por parte de los motores de búsqueda y los lectores de pantalla, además de
mejorar la organización y la legibilidad del código HTML.
EJEMPLO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de sitio web</title>
<style>
/* Estilos CSS para dar formato al menú y al contenido */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
nav ul li a:hover {
background-color: #555;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Mi Sitio Web</h1>
</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="#">Contacto</a></li>
</ul>
</nav>
<main>
<section>
<h2>¡Bienvenido!</h2>
<p>¡Gracias por visitar nuestro sitio web! Aquí encontrarás información sobre nuestros productos y
servicios.</p>
</section>
<section>
<h2>Acerca de Nosotros</h2>
<figure>
<img src="[Link]" alt="Imagen representativa">
<figcaption>Descripción de la imagen.</figcaption>
</figure>
<p>Somos una empresa dedicada a ofrecer soluciones innovadoras para tus necesidades.</p>
</section>
<section>
<h2>Nuestros Servicios</h2>
<p>Ofrecemos una amplia gama de servicios, incluyendo:</p>
<ul>
<li>Servicio 1</li>
<li>Servicio 2</li>
<li>Servicio 3</li>
</ul>
</section>
</main>
<footer>
<p>Derechos de autor © 2024 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Este código HTML incluye un encabezado con el título del sitio, un menú de navegación con enlaces a
diferentes secciones del sitio, y varias secciones de contenido, cada una con un título y, en el caso de la
sección "Acerca de Nosotros", una imagen con su descripción. Al final, hay un pie de página con
información de derechos de autor. Los estilos CSS se utilizan para dar formato y estilo al contenido y al
diseño del sitio web.