Diseña una página con código semántico

Escrito por Kemie Guaida en 21.10.04

El diseño semántico puede parecer difícil o innecesario. En este tutorial aprenderás como construir una página con código semántico con html y css de una forma sencilla, en 3 pasos.

¿No sabes lo que es el código semántico? Lee este artículo primero.

Paso 1: El contenido

Empezemos por una página muy sencilla, con los elementos más comunes:

Un encabezado, un menu de navegación, contenido y un pie de pagina. He aqui el contenido puro:

Mi Pagina

Inicio Seccion 1 Seccion 2 Seccion 3 Seccion 4 Seccion 5

El titulo de este contenido Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec augue lacus, aliquam in, luctus in, gravida vel, mi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Nunc aliquet ultrices ante.
Mauris nunc dolor, egestas vel, auctor sed, dignissim vitae,
enim. Phasellus tincidunt. Phasellus vel wisi id neque cursus
rhoncus. Morbi cursus tristique est.
Nulla pulvinar dui sed augue. Praesent laoreet arcu in justo.
Donec velit. Nam malesuada bibendum metus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Curabitur et tortor quis justo faucibus rutrum.
Duis aliquam, diam eu tempor rutrum, mauris leo lacinia neque,
et consectetuer elit nisl eget arcu.
Nam tellus libero, fringilla eu, elementum quis,
sodales suscipit, turpis.
Copyright © 2004 Todos los derechos reservados

Paso 2: la estructura

Empezamos por poner a los elementos etiquetas que les quedan semanticamente, encabezados, párrafos, etc:

<h1>Mi Pagina</h1>
<ul>
  <li> Inicio </li>
  <li>Seccion 1 </li>
  <li>Seccion 2 </li>
  <li>Seccion 3 </li>
  <li>Seccion 4 </li>
  <li>Seccion 5 </li>
</ul>
<h2>El titulo de este contenido</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

  Donec augue lacus, aliquam in, luctus in, gravida vel, mi. 

  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices

  posuere cubilia Curae; Nunc aliquet ultrices ante. 

  Mauris nunc dolor, egestas vel, auctor sed, dignissim vitae,

  enim. Phasellus tincidunt. Phasellus vel wisi id neque cursus 

  rhoncus. Morbi cursus tristique est. </p>

<p> Nulla pulvinar dui sed augue. Praesent laoreet arcu in justo.

  Donec velit. Nam malesuada bibendum metus. Class aptent taciti 

  sociosqu ad litora torquent per conubia nostra, per inceptos 

  hymenaeos. Curabitur et tortor quis justo faucibus rutrum. 

  Duis aliquam, diam eu tempor rutrum, mauris leo lacinia neque, 

  et consectetuer elit nisl eget arcu. 

  Nam tellus libero, fringilla eu, elementum quis, 

  sodales suscipit, turpis. </p>

<p> Copyright &copy; 2004 Todos los derechos reservados</p>

El menú lo definimos como una lista sin orden, ya que es el elemento que mejor lo describe: una lista de enlaces que forman la navegación.

A continuación agrupamos algunos elementos usando la etiqueta <div>:

<div id="principal">
  <div id="header">
    <h1>Mi Pagina</h1>
  </div>
  <div id="navegacion">
  <ul>    
      <li>Inicio </li>
      <li>Seccion 1 </li>
      <li>Seccion 2 </li>
      <li>Seccion 3 </li>
      <li>Seccion 4 </li>
      <li>Seccion 5 </li>
  </ul>
  </div>
  <div id="contenido">
    <h2>El titulo de este contenido</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Donec augue lacus, aliquam in, luctus in, gravida vel, mi. 
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
      posuere cubilia Curae; Nunc aliquet ultrices ante. 
      Mauris nunc dolor, egestas vel, auctor sed, dignissim vitae,
      enim. Phasellus tincidunt. Phasellus vel wisi id neque cursus 
    rhoncus. Morbi cursus tristique est. </p>
    <p> Nulla pulvinar dui sed augue. Praesent laoreet arcu in justo.
      Donec velit. Nam malesuada bibendum metus. Class aptent taciti 
      sociosqu ad litora torquent per conubia nostra, per inceptos 
      hymenaeos. Curabitur et tortor quis justo faucibus rutrum. 
      Duis aliquam, diam eu tempor rutrum, mauris leo lacinia neque, 
      et consectetuer elit nisl eget arcu. 
      Nam tellus libero, fringilla eu, elementum quis, 
    sodales suscipit, turpis. </p> </div>
  <div id="pie"><p>  Copyright &copy; 2004 Todos los derechos reservados</p></div>
</div>

Ver los avances hasta ahora

Paso 3: Estilo

Se ve un poco aburrido, no? Pero ahora le daremos forma con la magia de CSS. Empezamos por unos estilos generales. Primero establecemos color de fondo, color de texto, fonts, etc:

body{
 background-color:#efefef;
 color:#666666;
 font:11px/16px Arial, Helvetica,sans-serif;
 }
#principal{  background-color:white;  }

Ver los avances hasta ahora.

Luego damos dimensiones a algunos de los <div>s:

#principal{
 width:600px;
 background-color:white; 
 }

#contenido{
width:400px;
}

#navegacion{
width:150px; 
}

#header{
height:60px;
}

Ver los avances hasta ahora

Posicionamos el contenido y la navegación

#contenido{
  width:400px;
  margin-left:180px;

}

#navegacion{
  width:150px;
  float:left; 
  }

Ver avances (con bordes)

Ya tenemos la estructura básica, ahora solo es cuestión de adornarlo. Empecemos por el menu. Quitaremos los bullets y márgenes de la lista, y pondremos un borde debajo y al lado de cada uno de los elementos:

  #navegacion ul{
   padding:0;
   margin:4px;}

   #navegacion li{
   list-style-type:none;
   border-bottom: 1px solid #DDDDDD;
   color:#1E90FF;
   margin:2px;
   padding:4px;
   }

Ver los avances hasta ahora

Lugo damos estilo al encabezado:

 #header{
 height:60px;
 background-color:#1E90FF; 
 }

 h1{
 font-size:16px;
 text-transform:uppercase;
 letter-spacing:2px;
 color:white;
 padding:22px;
 }

También damos estilo al contenido:

#contenido{
width:400px;
margin-left:180px;
border-left:1px solid #DDDDDD;
padding-left:12px;
}


h2{
color:#1E90FF;
font-size:14px;
text-transform:uppercase;
}

y el pie

  #pie{
 border-top:1px solid  #1E90FF;
 font-size:10px;
 color:#AAAAAA;
 padding:4px;
 }

¡Ve el resultado final!

Activando y desactivando los estilos podemos ver que aun quitando toda la presentación, el documento sigue teniendo una estructura clara y comprensible.

No dolió tanto, ¿verdad? Podríamos seguir diseñando la página, con más estilos, imágenes de fondo, etc. , pero para efectos de este tutorial, tenemos ya nuestro ejemplo de un diseño sencillo pero atractivo, usando código semántico, xhtml y css.

Baja el archivo .zip con los archivos.

Comentarios

22 octubre 2004, 02:48Silencio3k
El ejemplo 3 no se puede ver (http://www.disenorama.com/tutoriales/css/ejemplos/semantica/semantica3.htm)
23 octubre 2004, 21:52Zeta
Espero al fin, haber entendido bien como definir los css para su buen uso, (me está costando)
24 octubre 2004, 14:22Scour
Muy bueno el tutorial, muy claro y bien definido!!

Un Saludo.
25 octubre 2004, 11:50adrmx
Solo una cosa cuando das el ejemplo del menu de quitarle los margenes y bullets te falto poner el border-left 4px solid #color
Muy buena explicacion del codigo semantico y tambien buena explicación de por que usar css.
28 octubre 2004, 02:09Juwe
Sin duda un muy buen tuto Kemie, oye sólo un comentario o más bien pregunta, ¿qué sabes de que la etiqueta div esta por volverse obsoleta para el w3c? ¿a tal caso estamos en problemas no?
Saludos.
31 octubre 2004, 06:15Manoloweb
Con respecto a si el elemento DIV esté por desaparecer. No se donde lo oiste, pero seguro que no fue en el W3c, soy miembro del QA-IG del w3c, y te aseguro que ni siquiera se ha sugerido tal idea. Y de hecho no tendría por que, ya que el elemento DIV cumple con una función específica dentro de un documento web: Seccional el contenido en “Divisiones”.
2 noviembre 2004, 04:16Juwe
Es bueno saberlo de una fuente confiable, en realidad un compañero de trabajo me lo comentó y me mostró un sitio (del que no recuerdo su url) donde aparecia como obsoleta. Pero que bueno que sigue en pie.

Gracias.
25 noviembre 2004, 05:43gabriela
megustaria saber como hacen los titulares sin que sean imagenes y que se mantengan asi
27 noviembre 2004, 03:56Javier
Que tal, tengo una pregunta no se si este bien en este lugar, dentro de un div he colocado un form, y quiero delimitar el div a 120 px de ancho para colocarlo en la orilla izq de mi pag, ahora al colocarle un color de fondo al div, no respeta la anchura y el ancho abarca toda la pag, como puedo hacer para q solo me quede el color de fondo en los 120 px de ancho q defino?? ya he estado viendo muchas reglas de CSS pero no encuentro como, por cierto q chida esta tu pag felicidades. Gracias. Nos vemos.
27 noviembre 2004, 09:49punio
llevo dos días leyendo tutoriales de css y te aseguro que éste es el mejor que he encontrado, con mucha diferencia. conciso, limpio, bonito y además no da ningún conocimiento por supuesto, error de geeks y cruz de los subnormales como el que suscribe.
1 diciembre 2004, 23:36visdelou
Muy bueno este mini-tutorial…me recuerda mucho a este
6 diciembre 2004, 06:37vann
muchísimas gracias por dedicar tiempo para este tutorial, genial, perfecto, de muchísima ayuda. Gracias. Gracias. Y la página enterita. Muy buena. Sigan así. Son un respiro, de verdad.
13 diciembre 2004, 21:04Javier
Interesante a la vez que útil tutorial… Ahora una pregunta de algo que me tiene mosqueadisimo:

si en #principal pongo
#principal{
border: dotted; border-width: 1px 1px 1px 1px; border-color:#000000;
background-color:white;
width:600px;
}

El primer 1px me desplaza en Firefox y Netscape la parte superior… no en Explorer, y tan solo añadiendo 1px o lo que sea en el borde superior (no ocurre lo mismo con los otros).

¿A que se puede deber esto? Gracias mil de antemano.
16 diciembre 2004, 11:21Alex Bedoya
Esto es sencillamente genial, muy facil de entender.
Ahora un comentario y una pregunta:
Al ser diseñador más que desarrollador , diagramar (por decirlo de alguna manera) una página desde código sin ver inmediata y permanentemente el resultado es algo complejo (maña heredada de la mesa de dibujo y posteriormente de la autoedición).
Herramientas como dreamweaver y Golive (este último el que uso) tienen hoy dia posibilidad de manejar css pero al ver la sencilles descrita en este artículo veo una complejidad en crearlas desde estos programas.
Recondais meterse al codigo de lleno y olvidar este tipo de soft o cual de estos 2 esta mas cerca de facilitar su uso?
y gracias por estos articulos que da una gran luz
19 diciembre 2004, 03:50javi
Muy Agradecido

Me parece un estupendo manual de iniciación, de gran ayuda por su concisa aclaración de como se debe usar CSS.

Gracias y espero que siguan con tan buena labor.
28 diciembre 2004, 05:33Entremedios
Hola. Muchas gracias por la información.
Una pregunta… para el menu valdría la pena usar los tags o mejor usar siempre listas
27 enero 2005, 17:06ray
muy muy muy bueno… ya voy aprendiendo…
super chido!

muchos de estos y felicidades.
25 febrero 2005, 16:56isabella
genial. fresco. vivo…
no hay como hablar claro para hacer las cosas sencillas.
alguien sabe de algun libro bueno sobre el tema de los CSS??

gracias!!!!
6 abril 2005, 19:44Bitebit
Sencillez genial la de tu artículo. Nada tan bueno para expresar las ventajas que supone separar contenido de diseño, ni siquiera algunos libros de cientos de páginas. Gracias
25 julio 2005, 14:18Diego
excelente tutorial, muy claro.. gracias por dedicar un tiempo a escribir algo tan claro y compartirlo
26 agosto 2005, 09:21Luxa
Muchas gracias. Muy claro el tutorial. Me sumo a la pregunta que aquí ya pusieron sobre la comprensión diferente del código en los distintos navegadores. Ojalá pronto hagan una nota y tutorial sobre eso.
saludos.
28 septiembre 2005, 01:40Mario
Después de haber urgado por todo el internet al fin encontré esta excelente explicación sobre CSS y DIV, más claro que este tut no hay. Además, mis agradecimientos al creador de este tutorial, y muy lindo sitio web, me inspira mucho, Adelante!!
17 noviembre 2005, 15:49Ángelrl
Excelente site y mejores recursos dentros de el. Felicidades por la labor realizada y sigue adelante.

:)
17 noviembre 2005, 15:52Ángelrl
Excelente site y mejores recursos dentros de el. Felicidades por la labor realizada y sigue adelante.

:)
18 noviembre 2005, 03:57Fr@N
Parece mentira lo fácil que llega a parecer visto de esa manera, eh!
Excelente tutorial para inciarse, me sirve de mucho ^^
21 diciembre 2005, 03:39Alfredo Reyes
Demasido claro! los felicito!
22 diciembre 2005, 01:40Seo2
Realmente te agradezco el tutorial, está claro y preciso.
Paz
26 diciembre 2005, 00:10paopao
Excelente tutorial, realmente sirve para aclarar muchos conceptos…sería de agradecer una continuación del mismo

gracias
2 enero 2006, 23:22danielSAN
Excelente Kemie! Estoy por meterme en CSS y este tuto es lo más claro que encontré.
5 marzo 2006, 07:31liquidmedia
muy bueno este tutorial, son etapas en las que uno como disenador debe ir involucrandose para no quedarse “estancado” en una forma de hacer sus proyectos, hay que innovarse
felicidades
23 marzo 2006, 18:29ender
Hola, me he quedado pensando en lo siguiente: En lugar de usar los divs con el id “header” y “navegacion” no podríamos usar directamente el el h1 y el ul? Es decir, quitar los divs de los que hablo y atacar por css directamente a los elementos h1 y ul. Semánticamente te parecería incorrecto?

Mi Pagina
- Inicio
....
14 abril 2006, 03:23Mariano Galan
Al fin puedo entender que son los div y como usarlos con css. La verdad es que te pasaste con este tutorial. FELICITACIONES
1 julio 2006, 19:02sara

Muy bien explicado. Pero ya no van los links con el resultado y tampoco el .zip descargable. :**(
3 julio 2006, 09:46Rafael Eslava

Acabo de descubrir tu blog, me parece muy bueno y el diseño y estructira me han gustado mucho, FELICITACIONES!!!

Una cosita, los enlaces de este tutorial no funcionan.

SALUDOS
10 julio 2006, 07:39Juan Antonio Jacinto

Hola, es un manual exelente, solo tengo algunas dudas, si yo le doy click en seccion 3 como hago para que se actualize el cuerpo y me ponga lo que tengo en seccion 3 o si tengo 300 paginas que quiero que se muestren en la parte del cuerpo como hago para no estar modificando cada pagina. Saldudos espero alguien me pueda ayudar.
16 julio 2006, 23:15Vicente Canales

Hola
Excelente manual, el unico detalle a recalcar seria que, a la fecha, ya ninguna de las paginas de ejemplo existe (o estan rotos los links). Seria bueno que lo revisaras.

Muchas gracias por el aporte :)
18 julio 2006, 11:53kemie

Una disculpa, los enlaces ya deben de estar funcionando!
17 agosto 2006, 22:41Patricia Galvis

Muchas gracias, me sirvio de mucho. Estuve por mas de 3 horas aliendo un bloque de texto ,,,,
14 septiembre 2006, 17:21Jorge Alberto R.

Me fué de mucha ayuda este tutorial ya que me gusta escribir el código para diseñar webs pero lo hacía de forma muy, pero muy desordenada (—’)
14 septiembre 2006, 23:06Matt

muy bueno :) congrats
15 septiembre 2006, 04:02Celcius

Bueno,
Me averüenzo de seguir usando tablas.. Pero quiero felicitar a la persona que ha hecho este tutorial, sé que es una chica, y se nota por el hermoso estilo de este buen sitio web. Gracias, y bueno, a salir de la pre-historia!!!..

Pd. De que país es usted Kemie?
22 octubre 2006, 18:30Pepe

Gracias por compartir este artículo, muy interesante y fácil de entender.

Felicitaciones.
24 octubre 2006, 19:13Luis Varela

exelente tutorial te agrdesco le tenia mis reservas respecto al css pero ahora ya no
gracias bravo por diseñorama
28 noviembre 2006, 05:15Marco_Balam

Hasta este momento no sabía absolutamente nada de css, y menos de programación HTML. Sin embargo me ha resultado tan claro este tutorial que me parece increible lo que se puede lograr mediante esta tecnología. Le agradezco a Kemie por sacarme de la Edad de la máquina de escribir y mostrarme el camino para superar mis bodrios web.
Saludos.
2 febrero 2007, 23:06Néstor Lozano

Bueno y qué decir ? Llevaba más de 1 año sacándole el cuerpo a CSS. No había un solo artículo que me motivara para cambiar mi paginación con tablas, todos salían con fórmulas para lanzar un cohete al espacio. ES GENIALMENTE SENCILLO ! Muchas gracias
6 junio 2007, 18:04mauricio cabrera

hola me gustaria saber como puedo hacer una pagina con puro css sin utilizar la etiqueta DIV
gracias
19 septiembre 2007, 03:14panchowakins

Muchas gracias por la informacion esta muy buena…mis webs no usaban un H1 o algo asi…nunca me habia tomado el tiempo de leer estas etiketas … yo diseñaba todo en base a etiketas independientes una de otra, bye!
1 octubre 2007, 18:48David K

muchas gracias!! estoy a full!! esta demasiado bien explicado esto!! excelente!!
16 enero 2008, 21:21Yusuf Malik

Hola, esta muy bueno el tutorial, pero no se si estoy haciendo algo mal, pero mi página no se visualiza igual en el Mozilla y en NEtscape que en el Explorer, ¿Tienes alguna idea de porque?
16 enero 2008, 22:26Yusuf Malik

HOla, de nuevo tu sitio me ha ayudado, leí el tutorial para resolver los problemas en css y ya resolví mi duda, muchas gracias.
6 febrero 2008, 15:52Lancelot

Muy bien hay que empezar a trabajar!!
12 febrero 2008, 01:23Gabriel

Excelente tutorial! ahi voy aprendiendo poco a poco, era exactamente lo que buscaba para iniciar con el CSS, muy bueno!!
26 marzo 2008, 14:04David

Hola, hasta donde voy leyendo he detectado algunas explicaciones que no concuerdan con el código que de ejemplo que se presenta, por ejemplo en el archivo semantica5.htm veo que los estilos

#navegacion ul{
padding:0; margin:0;} #navegacion li{ list-style-type:none; border-bottom: 1px solid #DDDDDD; border-left:4px solid #1E90FF; color:#1E90FF; margin:1px; padding:4px;
difieren de lo que se dice en la explicación..
Digo esto más que nada porque me quedé atrancado un rato viendo que la pagina hacía cosas que no concordaban con el código descrito y puede llevar a confusión.
Por lo demás muy buen tutorial..