<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente encontraremos el menú, logotipo, y encabezados del sitio.
<nav>: Dentro de nav pondremos siempre las ligas más importantes del sitio.
<aside> Representa una sección de una página que consiste en contenido que está tangencialmente relacionado con el contenido que le rodea, que podría ser considerado independiente de ese contenido.
<section> se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno.
Un aspecto importante de la etiqueta section es que debe tener un título. La etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle.
Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado.
<article> representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.
- Cuando los elementos <article> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que representa la entrada del blog.
- Los datos del autor de un elemento <article> pueden ser proporcionados a través del elemento <address>, pero no se aplica a los elementos <article> anidados.
- La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el atributo pubdate atributo de un elemento <time>.
| atributo | descripción | valor | |||||
|---|---|---|---|---|---|---|---|
| title | Texto informativo o título del elemento. Suele mostrarse a modo de 'tool tip'. | Texto legible. Sensible a M/m.. | |||||
| id | Le da un nombre al elemento que lo diferencia de todos los demás del documento. | Un nombre único. Sensible a M/m. | |||||
| class | Asigna nombres de clases al elemento. Por defecto, clases CSS. | Lista de clases separadas por espacio en blanco. Sensible a M/m. cdata | |||||
| style | Permite especificar información de estilo1. Por defecto, estilos CSS. | Declaraciones de estilo. | |||||
| lang | Información sobre el idioma del contenido del elemento y del valor de sus atributos. | Un código de idioma. | |||||
| dir | Indica la dirección de texto y tablas. | Uno de los siguientes: 'ltr' o 'rtl'. | |||||
| Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. | |||||||
<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el 'pie' de la pagina.
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8' />
<title>Estructura básica de una página web en HTML5</title>
</head>
<body>
<header>
<nav>
<a href='inicio.html'>Inicio</a>
<a href='contacto.html'>Nosotros</a>
<a href='opcion1.html'>Opcion</a>
<a href='opcion2.html'>Opcion</a>
</nav>
</header>
<aside>
<p>Estas secciones son a menudo representadas como barras laterales o como
inserciones y contienen una explicación al margen como una definición de
glosario, publicidad, la biografía del autor,o en aplicaciones web, la
información de perfil o enlaces a blogs relacionados</p>
</aside>
<section>
<p>Un section es una manera de dividir la página por 'secciones' de tal
modo que podemos dividir el contenido de esta por temas</p>
<article>
<h1>El article es la parte mas importante del sitio</h1>
<p>Basicamente en el article pondremos lo más importante de la
página, en orden jerárquico, un article puede tener header y
footer, sin estropear el diseño.</p>
</article>
</section>
<footer>
<p> © Derechos reservados</p>
<p>Contacteme en evaristopacheco@hotmail.com</p>
</footer>
</body>
</html>
No hay comentarios:
Publicar un comentario