11. Analisi della marcatura prodotta

Analizziamo in dettaglio la marcatura creata per il nuovo layout del documento.

  1. utilizziamo il contenitore generale #wrapper per contenere l'intero layout della pagina
  2. l'intestazione è costituita dall'elemento #header e dal suo figlio h1
  3. al di sotto dell'elemento #header troviamo l'elemento #top, che contiene:
    1. la sezione "Sei qui" (elemento #breadcrumbs)
    2. i link per il cambio di stile della pagina (elemento #change-style).
  4. viene quindi il contenuto effettivo della pagina (elemento #content), al cui interno troviamo:
    1. un elemento spaziatore (#gutter), secondo una nota tecnica usata da Dan Cederholm nel suo recente Bulletproof Webdesign
    2. il titolo dell'articolo (elemento h2)
    3. vari paragrafi di testo
    4. un elenco ordinato con classe .code che contiene il codice di esempio usato nell'articolo.
  5. dopo il contenuto viene la colonna laterale (elemento #sidebar), che contiene i seguenti elementi:
    1. un contenitore per il menu di navigazione (elemento #navcontainer)
    2. il menu di navigazione (elemento #nav)
    3. il motore di ricerca.
  6. a chiudere la pagina troviamo l'elemento address, che reca il nome dell'autore del documento e funge da piè di pagina.

Alcuni punti sono interessanti: