Estructuración de una Página Web con HTML Básico

Clase 4 de 32 • Curso de Responsive Design: Maquetación Mobile First

Clase anteriorSiguiente clase

Resumen

La arquitectura web se puede definir como la forma en que las páginas de un sitio web están estructuradas y enlazadas entre sí (de manera lógica y coherente). Una arquitectura web ideal ayuda a los usuarios y a los motores de búsqueda a encontrar fácilmente lo que están buscando en un sitio web.

¿Cuál es la estructura base en la arquitectura web?

  • Un header con un logo, título y un botón.
  • Una sección con un logotipo, texto y una tabla.
  • Una segunda sección con títulos, tarjetas, texto y unos íconos.
  • Una tercera sección con una imagen de fondo y un título.
  • Una última sección con tarjetas, título, texto y un carrusel de precios.
  • Un footer una imagen y texto.

De esta manera, podríamos definir la estructura base del body de nuestro index.html así:

<body>
    <header></header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>

Tips para estructurar tu arquitectura web

Recuerda:

  • Debes tener tu archivo index.html y .css dentro en carpetas organizadas.
  • index es el nombre de archivo que primero lee el navegador.
  • Para abreviar la escritura de código HTML puedes usar Emmet. En este caso para escribir la estructura base usamos: header^main>section*4^footer

Contribución creada por: José Miguel Veintimilla (Platzi Contributor) con aportes de Juan Jiménez.