Curso HTML #04 – Cómo Crear la Estructura de una Página HTML

Cuando creamos documentos HTML, lo primero que hacemos es definir su estructura común (la que tienen todos los documentos HTML), y acto seguido, empezamos a crear nuestra propia estructura dentro de la etiqueta “BODY”. Es decir, la que define la estructura propia de nuestra página web. Pues no todas tienen la misma.

Para definir una estructura, utilizamos etiquetas de bloque, las cuales, sirven como contenedoras de otras etiquetas, de texto, o de ambas cosas. Las etiquetas de bloque, suelen ser invisibles en el navegador, o al menos, la gran mayoría (a no ser que se definan propiedades CSS, como color de fondo, borde, etc.).

Para que os hagáis una idea, son etiquetas que se verían como rectángulos invisibles, y su propósito principal es agrupar nuestro código, y por lo tanto, crear esa estructura interna, la cual, en principio es invisible en el navegador, pero posteriormente, aplicando CSS, le damos forma, color y estilo.

En el ejemplo que utilizo durante este curso, es bastante sencillo, pues lo que hago es crear tes partes o tres divisiones, las cuales son las siguientes: encabezado, cuerpo y pie de página.

Encabezado:

<header>
   Aquí se colocan títulos (encabezado).
</header>
<nav>
   Aquí se colocan enlaces (barra de navegación).
</nav>

Cuerpo:

<main>
   Contenido principal de la página.
</main>
<aside>
   Contenido complementario.
</aside>

Pie:

<footer>
   Aquí va el pie del documento.
</footer>

Esta división la hago con las etiquetas de bloque (header, nav, main, aside, footer). Y lo que hago es agrupar mi código en encabezado, barra de navegación, contenido principal, contenido complementario y pie de página, con las respectivas etiquetas.

Etiqueta DIV

La etiqueta “DIV” es una etiqueta de bloque, y por lo tanto sirve para definir la estructura de la página o para agrupar o dividir le contenido de la misma. Con esta etiqueta, logro dividir mi documento en las tres partes mencionadas anteriormente. Esta etiqueta es invisible (en principio) pero si nos la imaginamos, se trataría de un rectángulo. Con CSS le podemos dar forma, cambiar sus dimensiones, aplicarle color, bordes, márgenes, etc.

Dentro de ella podemos colocar otras etiquetas, ya sean más “DIV” o imágenes, formularios, enlaces, texto, etc.

Hay otras etiquetas que son igual que “DIV”, es decir, su función y comportamiento es el mismo: “HEADER”, “MAIN”, “SECTION”, “ASIDE”, “FOOTER”, “ARTICLE”. Entre otras, pero estas son las más relevantes.

  • “HEADER”:
    – Se utiliza para el contenedor que hace de encabezado.
  • “MAIN”:
    – Se suele utilizar para definir el contenido principal de la página web, y sólo puede haber uno.
  • “SECTION”:
    – Sirve para definir una sección en el documento.
  • “ASIDE”:
    – Suele utilizarse para definir un contenido complementario a “MAIN”.
  • “FOOTER”:
    – Sirve para definir el pie del documento.
  • “ARTICLE”:
    – Sirve para definir un artículo, el cual, puede contener un “HEADER”, uno o varios párrafos (etiqueta “P”) y un pie de artículo “FOOTER”.
  • “DIV”:
    – Sirve para agrupar el código. En el navegador se muestra como un rectángulo invisible.

De todos modos, si en lugar de estas etiquetas, utilizas “DIV”, el resultado será el mismo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.