Etiquetas de sección

Etiquetas de secciones

Para el diseño de una página web HTML de forma organizada por bloques, se utilizan las siguientes etiquetas para definir la estructura:
  • Header: Título de la página

  • Nav: Navegador de la página

  • Contenido o content: Conjunto de etiquetas section y dentro tenemos etiquetas articles e incluso el footer

  • Footer: Pie de página. Copyright, categorias, contacto...


Incluyendo dichas etiquetas en nuestra página, obtenemos una buena impresión y ayuda al posicionamiento SEO. Estas etiquetas sirven para decirle lo que es cada cosa. Si no etiquetas bien quizás muestre la página pero sin saber qué muestra.



A continuación, vamos a explicar con más profundidad, las etiquetas de secciones y contenidos.

En el anterior punto, se ha comentado la importancia del formato HTML. Encontramos una de las etiquetas importantes que es <body>.
Body es una etiqueta que abarca todo el contenido web que vamos a visualizar en el navegador. Cabe destacar que solo se puede utilizar una vez en toda una página web.

Dentro de la etiqueta body, encontraremos las secciones que hemos visto anteriormente en las imagenes.
<nav> --> Etiqueta para agrupar enlaces a otras páginas, creando un menú. Tenemos diferentes usos para nav:

  • Nav dentro de header: Enlaces a otras páginas dentro del mismo sitio web.

  • Nav dentro de body o main: Contiene enlaces a las secciones de página.

  • Nav dentro de header: Enlaces a otros sitios webs relacionados con el mismos contenido de la página



<section> --> Utilizado para crear una sección de contenido. Podemos utilizar dentro etiquetas como header, article o aside.
Con esta etiqueta, daremos los puntos necesarios como si fuera un índice de un libro. Por ello, es una etiqueta basado en organizar el contenido web.

<article> --> Etiqueta destacado para mostrar las entradas recientes, noticias de última hora mensajes del foro.

<aside> --> Etiqueta usado mayormente para crear un menu lateral dirigido a la información. Normalmente introducimos enlaces a categorías, entradas destacadas e incluso un panel login de acceso. Otras de las utilidades fundamentales es para incluir anuncios webs o información de perfil.

<footer> --> Indica que su contenido pertenece al pie de página. Etiqueta que cierra todo el contenido de la página. Normalmente se incluye información del autor, datos de derechos de autor o los enlaces del menu nav.
En tiendas online, se utiliza para indicas las formas de pago o enlaces a categorías de productos.

Cabe destacar que todas estas etiquetas utilizan los siguientes atributos
  • title: Marca el nombre solo consultivo del elemento.

  • id y class: Identificador y clase para enlazar con propiedades CSS o Javascript.

  • lang: Idioma de la sección.


En el siguiente apartado, entraremos a conocer sobre el modelo de caja en HTML y a etiquetas de agrupación de contenido.

Modelo de cajas

Cada elemento que utilizamos en HTML, ocupa un espacio rectangular en HTML. Denominamos modelo de caja porque una etiqueta es un rectángulo.
En la caja, podemos modificar los siguientes elementos:

<margin> --> Espacio desde el elementor anterior de todas las direcciones hasta el borde.
<border> --> Determina el espacio ocupado por el borde.
<padding> --> Espacio desde el contenido hasta el borde. Muy util para dar espacios a textos o elementos de una forma más legible.
<content> --> Ancho y alto del contenido ocupado por elementos.




CSS nos permite dar mas flexibilidad y adaptar los elementos a dos tipos de modelos:
  • Modelo bloque: Es el modelo que hemos visto anteriormente pero añadimos que por defecto, HTML utiliza el 100% del espacio de la pantalla de visualización web (recogida por meta name="viewport").
    Introducirá un nuevo bloque si el anterior ha terminado.

  • Modelo caja flexible: Adaptamos la forma de visualización del contenido, organizando mejor los elementos.

    Si introducimos un nuevo elemento, se introducirá a conti nuación del siguiente si la fila no ha ocupado el 100% del ancho del espacio.




Para trabajar con los modelos de cajas, incorporaremos en CSS la regla display.
#navprincipal
{

 display: block;
 display: inline;  
 display: flex;  

}