Animación que muestra el proceso correcto de maquetación de un sitio web

Explicación en inglés de esta animación.

El correcto desarrollo de un sitio web, debería comenzar por marcar semánticamente la información y estructurar el contenido, sin preocuparse en absoluto del aspecto final que vaya a tener. No deberías utilizar tablas para maquetar, salvo en datos tabulares que así lo requieran.

Marcar semánticamente, quiere decir marcar el significado real de cada elemento de información. Donde va un título, ha de utilizarse una marca de título <h1>...</h6>, donde va un párrafo debe utilizarse la marca de párrafo <p>, donde va algo importante debería marcarse con <strong>, etc.

A modo de guía, piensa que un sitio web es como un libro. Tiene su título, está divido en capítulos y subcapítulos, tiene su índice, y cada texto tiene sus párrafos. Deberías utilizar las siguientes marcas en los siguientes casos:

  • Debes siempre especificar el DOCTYPE que vas a utilizar en tu página web. Lo ideal sería utilizar XHTML Estricto, pero en la práctica se suele utilizar XHTML Transicional o HTML 4.01 Estricto o Transicional.
  • Debes siempre especificar el juego de caracteres que vas a utilizar en el documento. En español se utiliza el ISO-8859-1 (Latin1), pero deberías comenzar a utilizar el UTF-8 (universal), con un editor que almacene los caracteres en este formato. Recuerda que no debes utilizar caracteres de escape para acentos y eñes, ya que están includios en el juego de caracteres escogido.
  • Para el título del sitio web <h1>, para los títulos de cada capítulo, <h2>, para los títulos de cada subcapítulo <h3>, etc.
  • El menú de navegación es una lista en sí misma, consta de varios elementos que son los capítulos y subcapítulos de tu sitio web, debería marcarse con algún tipo de lista <ul> o <ol>. A su vez, todo el menú debería marcarse con <map>, ya que esta marca no solo se utiliza con áreas de imágenes, sino para marcar elementos de navegación. Más abajo verás un ejemplo
  • Todos los párrafos deberían marcarse con <p>, y ningún texto debería quedar sin marcar.
  • Todas las palabras que sea necesario destacar (con negritas o itálicas), deberían ser marcadas con <strong> o <em>. No debes utilizar jamás las antiguas marcas de presentación <b> o <i>.

Estructurar el contenido quiere decir, marcar o agrupar los elementos que forman parte de la estructura de la web: la cabecera, el menú principal, el menú secundario, el contenido, el pie de página, etc. Esto suele hacerse con elementos de bloque <div> e identificandolos.

Por ejemplo, la cabecera podría ir así:

<div id="cabecera">
<h1>El Quijote de la Mancha</h1>
<p>Las ingeniosas aventuras del hidalgo</p>
</div>

El menú principal, así:

<div id="menuprincipal">
<map id="navegacion">
<h2>Menú de navegación del sitio web</h2>
<ul>
<li><a href="primero.html">Primer Capítulo</a></li>
<li><a href="segundo.html">Segundo Capítulo</a></li>
<li><a href="tercero.html">Tercer Capítulo</a></li>
</ul>
</map>
</div>

De esta forma, luego, mediante CSS, podrás colocar cada bloque en su sitio, con el estilo que quieras tal y como se ve en la animación.