Maquetación semantica en HTML5

Descrição

Mapa conceptual para identificar los principales puntos de la maquetación semántica con HTML 5
Ing Carmine
Mapa Mental por Ing Carmine, atualizado more than 1 year ago
Ing Carmine
Criado por Ing Carmine aproximadamente 8 anos atrás
165
0

Resumo de Recurso

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

                                        Semelhante

                                        Alemán Básico
                                        Diego Santos
                                        Anatomia de la piel
                                        barby.simental
                                        Ley 39/2015 1 Octubre 1ª PARTE
                                        david borras
                                        Propiedad de los numeros reales
                                        COBACH 19
                                        Componentes del Balance General
                                        Gabriela López Guadarrama
                                        Taekwondo - Vocabulario Básico 1
                                        msanchez.anaya
                                        PRUEBA DIAGNOSTICA AUTOCAD DIANA CAROLINA COY
                                        DIANA CAROLINA COY CASTIBLANCO
                                        COMO PRONUNCIAR AS PALAVRAS
                                        Victória Pereira
                                        Validación de formularios con Javascript
                                        Alejandro Villamizar
                                        Mapa mental Dibujo de Ingeniería
                                        Alexa Ortiz Castaño