Maquetación semantica en HTML5

Ing Carmine
Mind Map by Ing Carmine, updated more than 1 year ago
Ing Carmine
Created by Ing Carmine almost 4 years ago
46
0

Description

Mapa conceptual para identificar los principales puntos de la maquetación semántica con HTML 5
Tags

Resource summary

Maquetación semantica en HTML5
1 La etiqueta <BODY>
1.1 Nuevas etiquetas con modelo semantico
1.2 En HTML4 solo se usaba el contenedor genérico <div>
1.3 Gracias al modelo semántico los buscadores son mas eficientes
1.3.1 Esto aumenta lo llamado "Dimensión social de internet"
2 Wireframing
2.1 El maquetamiento básico contesta de "Estructura HTML" y "Diseño y colocación de CSS"
2.2 ¿Que es?
2.2.1 Básicamente un boceto o esquema de nuestra pagina web
2.2.1.1 Que en un principio puede o no tener todos los elementos que pensamos
2.2.1.2 El objetivo de esto es identificar los principales elementos de nuestra página
2.2.1.2.1 Identificamos una estructura jerarquica implícita
2.2.1.2.1.1 En base a esto sabremos que etiquetas usar y donde
3 La etiqueta <HEADER>
3.1 Su función semantica es delimitar el encabezado de la pagina
3.1.1 Normalmente se suele incluir el titulo, una imagen destacada o algo importante
4 Titulos <H1>, <H2>, etc.
4.1 Generalmente usado para poner el titulo de la página junto con el encebzado
4.1.1 De <H1> a <H6> se va reduciendo el impacto e importancia de estos.
4.1.1.1 No es necesario ocupar todos los <H...>, aunque por lo regular con el <H1> es suficiente
5 Etiqueta <NAV>
5.1 Delimita los menús de navegación
5.1.1 Esta etiqueta no nos limita a solo usar listas como menú, pero es lo recomendable
6 Etiqueta <MAIN>
6.1 Aumenta la accesibilidad de la página
7 Etiqueta < ARTICLE>
7.1 Delimita una unidad independiente de contenido
8 Etiqueta <SECTION>
8.1 Hace referencia a una parte del <ARTICLE>
8.1.1 En resumen, son los apartados y subapartados de un artículo
9 Etiqueta <ASIDE>
9.1 Se podrian considerar como contenidos "Relacionados" a nuestra pagina principal
10 Etiqueta <FOOTER>
10.1 Permite incluir información adicional depediendo del lugar donde este
11 Etiqueta <DIV<
11.1 Como ya se habia dicho, hace referencia a un contenedor Genérico
11.1.1 Cuando nuestro contenido no caiga sobre algúna otra etiqueta semántica
11.2 Se puede usar para aplicar un estilo CSS en particular
11.3 Tambien usado para englobar varios elementos
12 Errores comunes
12.1 Utilizar mas de un <HEADER> o uso excesivo de la etiqueta
12.2 Usar el contenedor <DIV> cuando hay una etiqueta semántica destinada
Show full summary Hide full summary

Similar

Alemán Básico
Diego Santos
Alemán Básico
Nani Molina
Alemán Básico
koleth jaramillo
Alemán Básico
koleth jaramillo
Alemán Básico
Maria Sánchez Rodríguez
Alemán Básico
Maria Sánchez Rodríguez
Ley 39/2015 1 Octubre 1ª PARTE
david borras
Anatomia de la piel
barby.simental
Componentes del Balance General
Gabriela López Guadarrama
Componentes del Balance General
jose mora