Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Un div nos sirve para organizar la información a nivel de diseño de la página. Podemos usar div’s indistintamente para cualquier parte de la página.
header, footer, main, nav, aside son los div con un valor semántico añadido. La propia etiqueta nos indica que tipo de información contiene, esto no ocurría con los div.
Ventajas:
- Facilitan a los motores de búsqueda la indexación de la página.
- Mejora la accesibilidad para personas con deficiencias visuales.
- Hace más fácil al programador entender la página.
Los siguientes elementos contienen información de la sección a la que pertenecen. Pueden usarse dentro de cualquier elemento flotante, exceptuando sí mismos, el otro elemento y el elemento address.
<header>
- Contiene una introducción a un contenido.
- Habitualmente contiene:
- Una o varias etiquetas de encabezado (<h1> – <h6>)
- Un logo o ícono.
- Información del autor.
- Puedes tener varios
<footer>
- Contiene información sobre el elemento que lo envuelve. Típicamente:
- Información de CopyRight
- Información del autor.
- Información de contacto.
- Sitemap.
- Enlace de regresar a la parte superior de la página.
- Documentos relacionados.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>a_paginaSencilla</title>
</head>
<body>
<header>
<h1>Título de la página</h1>
</header>
<p>Contenido de la página</p>
<footer>
<h5>Pie de la página</h5>
</footer>
</body>
</html><main> . Define secciones dentro de la web, como un encabezado, o un pie, etc.
- Especifica el contenido principal del documento.
- El contenido de la etiqueta main no debe estar repetido en ningún otro sitio como sidebars, footers, etc.
- Sólo puede haber una etiqueta main por página.
- Esta etiqueta no debe estar anidada dentro de ninguna etiqueta <article>, <aside>, <footer>, <header> y <nav>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>a_paginaSencilla</title>
</head>
<body>
<header>
<h1>Título de la página</h1>
</header>
<main>
<p>Contenido de la página</p>
</main>
<footer>
<h5>Pie de la página</h5>
</footer>
</body>
</html><article>
Un artículo contiene una unidad de información que tiene sentido por sí misma. Ejemplos:
- Una entrada de un blog.
- Una noticia.
- Un comentario.
- Un comentario en un foro.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>a_paginaSencilla</title>
</head>
<body>
<header>
<h1>Título de la página</h1>
</header>
<main>
<p>Contenido de la página fuera de los artículos</p>
<article>
<h2>Titulo del artículo</h2>
<p>Contenido del artículo</p>
</article>
</main>
<footer>
<h5>Pie de la página</h5>
</footer>
</body>
</html><section>
Define una sección dentro de nuestra web. Generalmente contendrá:
- Etiquetas de encabezados h1, h2, h3…
- Articulos.
<aside>
Contenido tangencial
Se usa para poner notas, trucos, una explicación, una leyenda, etc.relacionados con un contenido principal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>a_paginaSencilla</title>
</head>
<body>
<header>
<h1>Título de la página</h1>
</header>
<main>
<p>Contenido de la página</p>
<article>
<h2>Titulo del artículo</h2>
<p>Contenido del artículo</p>
</article>
<aside>
Contenido tangencial
</aside>
</main>
<footer>
<h5>Pie de la página</h5>
</footer>
</body>
</html><nav>
Almacena los menús de navegación. Habitualmente están en el header de la página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Página sencilla</title>
</head>
<body>
<header>
<h1>Título de la página</h1>
<nav>
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</nav>
</header>
<p>
Contenido de la página
</p>
<footer>
<h5>Pie de la página</h5>
</footer>
</body>
</html>