La columna lateral consta de dos blocs:

• Un bloc anomenat Latest Tweets
• Un bloc anomenat Tags

Els dos blocs tenen en comú que estan formats per una capçalera o secció de nivell tres i una llista d'ítems. Veieu a continuació la resolució de l'estructura dels dos sub-blocs de la regió lateral.

El primer bloc consta d'una capçalera de nivell 3 i d'una llísta d'ítems anomenats tweets o missatges curts de menys de 140 caràcters:

<div id="latest_tweets">
 <h3>Latest tweets</h3>
 <ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in turpis ac lacus eleifend sagittis. Nunc in turpis ac lacus eleifend sagittis. <a href="#">3 days ago </a>.</li>
   <li>Nunc in turpis ac lacus eleifend sagittis. Cras facilisis felis sit amet lorem. <a href="#">3 days ago </a>.</li>
   <li>Cras facilisis felis sit amet lorem. <a href="#">5 days ago</a>.</li>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a href="#">10 days ago </a>.</li>
 </ul>
</div>

Incorporeu aquest fragment d'estructura a la pàgina index.html i refresqueu el navegador.

El segon bloc també correspon a una estructura similar a la del primer bloc: una secció o capçalera de tercer nivell i una llista d'ítems que, en aquest cas, corresponen a descriptors. Veieu l'estructura resultant:

<div id="tags">
  <h3>Tags</h3>
  <ul>
   <li><a href="descriptors.html?q=lorem">Lorem</a></li>
   <li><a href="descriptors.html?q=ipsum">Ipsum</a></li>
   <li><a href="descriptors.html?q=dolor">Dolor</a></li>
   <li><a href="descriptors.html?q=amet">Amet</a></li>
   <li><a href="descriptors.html?q=mauris">Mauris</a></li>
   <li><a href="descriptors.html?q=morbi">Morbi</a></li>
  </ul>
</div>

Veieu el resultat al navegador del bloc tags:

Comproveu que l'estructura de l'arxiu index.html és correcte:

  <div id="lateral"> <!-- inici de la columna lateral -->
	<div id="latest_tweets">
	 <h3>Latest tweets</h3>
	 <ul>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in turpis ac lacus eleifend sagittis. Nunc in turpis ac lacus eleifend sagittis. <a href="#">3 days ago</a>.</li>
	   <li>Nunc in turpis ac lacus eleifend sagittis. Cras facilisis felis sit amet lorem. <a href="#">3 days ago </a>.</li>
	   <li>Cras facilisis felis sit amet lorem. <a href="#">5 days ago</a>.</li>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a href="#">10 days ago</a>.</li>
	 </ul>
	</div>
	<div id="tags">
  	 <h3>Tags</h3>
  	 <ul>
 	  <li><a href="descriptors.html?q=lorem">Lorem</a></li>
 	  <li><a href="descriptors.html?q=ipsum">Ipsum</a></li>
 	  <li><a href="descriptors.html?q=dolor">Dolor</a></li>
  	  <li><a href="descriptors.html?q=amet">Amet</a></li>
  	  <li><a href="descriptors.html?q=mauris">Mauris</a></li>
  	 <li><a href="descriptors.html?q=morbi">Morbi</a></li>
 	 </ul>
	</div>
  </div> <!-- final de la columna lateral -->

El peu de pàgina del lloc web conté dos parts clarament diferenciadas:

• Una llista de dos enllaços
• Un paràgraf

La realització en HTML d'aquestes dos parts és trivial:

<div id="peu"> <!-- inici del peu -->
 <ul>
   <li><a href="#">About</a></li>
   <li><a href="#">Buy this theme</a></li>
 </ul>
 <p>Subscribe to our <a href="#">RSS</a> or follow us on <a href="#">Twitter</a></p>
</div> <!-- final del peu -->

La seva representació, si incorporeu aquest fragment al fitxer index.html i refresqueu el navegador.