22. Contenidors genèrics: els elements `div` i `span`

Mark Norman Francis 26 de setembre del 2008. Darrera modificació: 1 d'agost de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: div, span, agrupar, lligams, semàntic

En aquest apartat explicaré com i quan utilitzar els dos elements de l'HTML que no s'utilitzen per a descriure el contingut. Els elements span i div no confereixen en realitat cap significat al contingut que envolten; de fet són un mecanisme genèric que permet crear una estructura i uns agrupaments personalitzats d'elements en els llocs on no hi ha cap altre element de l'HTML que resulti realment adequat, als quals llavors es poden aplicar estils amb CSS o manipular amb JavaScript. Tot i que els elements div no afegeixen cap significat semàntic, es pot considerar que aquests representen una divisió estructural de l'etiquetatge juntament amb la classe semàntica o el nom d'ID adequats.

Són "l'últim recurs" i només s'han d'utilitzar quan no hi ha cap altre element de l'HTML que compleixi els requisits necessaris, ja que no tenen cap significat per a les tecnologies d'assistència, els motors de cerca, etc.

Els continguts d'aquest apartat són els següents:

22.1. Semànticament neutres
22.2. En línia i de bloc
22.3. Més explicacions sobre l'agrupament del contingut
22.4. Informació addicional
22.5. Lligams per a JavaScript, i també CSS
22.6. "div-itis"
22.7. Semàntica inadequada
- 22.7.1. "Paràgrafs" genèrics
Resum
Preguntes de repàs

22.1. Semànticament neutres

La majoria dels elements d'HTML existeixen per a descriure el contingut, com per exemple les imatges, les llistes o els títols, o per a ajudar a compondre el document, com per exemple head, body, link, meta, etc. Hi ha dos elements, però, que no tenen cap significat assignat: Els elements div i span, juntament amb els atributs id i class, ofereixen un mecanisme genèric per a afegir estructura als documents.

Aquests dos elements es poden considerar com la bastida d'HTML. Donen la possibilitat d'agrupar el contingut i d'afegir informació addicional relativa al contingut i lligams per a incorporar-hi estils i interactivitat. Però no afegeixen cap significat semàntic nou al document, ni en si mateixos ni d'ells mateixos.

22.2. En línia i de bloc

Tal com ja heu après, els elements de bloc són elements que ajuden a informar sobre l'estructura d'un document. L'element div, que és l'abreviatura de divisió, és el contenidor genèric dels blocs. Normalment es fa servir per envoltar altres elements de bloc amb l'objectiu d'agrupar-los. També es pot utilitzar per a reunir una colla d'elements inserits i/o text que no encaixen de manera lògica sota cap altre element de bloc, però això hauria de ser l'últim recurs.

Vegeu també

Vegeu el subapartat següent, on trobareu una explicació més detallada sobre l'agrupament del contingut.

L'element span és el contenidor genèric per als elements en línia. També ajuda a informar sobre l'estructura del document, però s'utilitza per a agrupar o envoltar altres elements inserits i/o text més que elements de bloc.

En un primer moment, la línia de separació entre aquests dos tipus diferents podria semblar arbitrària. La diferència que cal tenir en compte és el tipus de contingut i la manera en què hauria d'aparèixer en escriure'l sense cap estil. Un element div es posa al voltant d'un grup d'elements de bloc; per exemple, per envoltar un títol i una llista d'enllaços per a crear un menú de navegació. Un element span envolta un grup d'elements en línia o bé (la majoria de les vegades) text net. La paraula clau és "grup"; si un element div envolta només un element de bloc, o un element span només un element en línia, llavors el seu ús és innecessari.

Per exemple, observeu l'ús que es fa dels elements div i span en el següent etiquetatge, que és molt simple:

<body>
  <div id="mainContent">
    <h1>Títol de la pàgina</h1>
    <p>Aquest és el primer paràgraf de contingut de la meva pàgina d'exemple.</p>
    <img src="example.gif" alt="Aquesta imatge és només un exemple, no té res
     d'especial">
    <p>Aquest és el segon paràgraf de contingut de la meva pàgina d'exemple.
     És molt semblant al primer, però aquí hi ha una <span id="specialAlert">alerta
     especial que volem colorejar i augmentar-li la mida del text mitjançant
     CSS</span>. No es tracta d'un èmfasi estàndard, sinó més aviat un estil, de 
     manera que <em> i <strong> no són del tot adients.</p>
  </div>
</body>

Ara podeu seleccionar el contingut de l'interior dels elements div i span utilitzant els seus atributs id i aplicar-los estils i posicionaments especials amb el CSS.

22.3. Més explicacions sobre l'agrupament del contingut

Si observem el codi font de moltes pàgines d'Internet hi veurem molts elements div imbricats que inclouen algunes metàfores habituals a class i/o id dels elements; per exemple, header, footer, content, sidebar, etc.

Els vostres noms de class i id han de ser sempre semàntics, la qual cosa vol dir que haurien de remetre al significat/paper del contingut i no limitar-se a fer referència al seu aspecte visual. Així, doncs, per exemple, barraLateral i missatgeAlerta són uns bons noms per a class, mentre que columnaEsquerraVermella i textBlauIntermitent no. Què passaria si després volguéssiu canviar el color de la barra lateral de vermell a blau, o la seva posició en el lloc web de l'esquerra a la dreta? I si volguéssiu canviar els vostres missatges d'alerta de blaus intermitents a verd sense intermitència?

Aquestes divisions aporten predictibilitat a l'hora de crear estructures de pàgina i, segurament molt més important, quan es torna a revisar l'HTML més endavant ofereixen pistes sobre la part de la pàgina en la qual us trobeu. Una pàgina ben dividida es documenta pràcticament a si mateixa pel que fa a les seves intencions i al seu contingut.

Amb la bona intenció de deixar-ho tot una mica més clar, ara veurem una estructura de div d'un lloc web real, concretament la pàgina d'inici de dev.opera.com. Tingueu en compte que aquest exemple de codi no inclou cap contingut, si deixem de banda alguns altres elements que hi he posat perquè són importants per a l'estructura del lloc. Bàsicament el que vull és únicament reproduir l'estructura real del lloc tal com està definida amb els elements div. En el codi següent, llegiu amb atenció els comentaris HTML; els hi he posat per a explicar l'estructura del lloc. Mentre aneu revisant aquest codi, obriu la pàgina principal de dev.opera.com en una nova pestanya o finestra del navegador per tal de poder veure l'aspecte del lloc mentre exploreu la seva estructura.

<body>
<!-- En primer lloc tenim un element div "wrap", que envolta tota la pàgina i
 permet un control més precís de tot ell en general -->
  <div id="wrap">
  <!-- Aquesta llista desordenada conté la llista d'enllaços de tots els llocs
   diferents d'Opera, que podeu veure a la part superior de la pàgina -->
    <ul id="sitenav" class="hidemobile">
      ...
    </ul>
      ...
    <!-- Aquest és el formulari de cerca - el quadre de cerca que podeu veure
     a la part superior dreta de la pàgina -->
    <form action="/search/" method="get" id="search">
      <div>
        ...
      </div>
    </form>
    <!-- Aquesta llista desordenada conté el menú de navegació principal del
     lloc - el menú horitzontal de pestanyes que hi ha just a sota del gràfic del
     títol principal -->
    <ul id="menu">
      ...
    </ul>
    <!-- Aquest element div imbricat forma l'estructura del quadre d'inici de
     sessió, en el qual introduireu el nom d'usuari i la contrasenya per accedir al
     lloc. Només el veureu si encara no heu iniciat cap sessió. -->
    <div id="loginbox">
      <div id="login">
        ...
      </div>
    </div>
    <!-- Aquesta sèrie d'elements div imbricats és on hi ha el contingut principal
     de la pàgina - tots els resums dels articles que formen el gruix del contingut
     de la pàgina -->
    <div id="content2">
      <div id="main">  
        ...
        <div class="major">
          ...
        </div>
        <div class="major">
          ...
        </div>
        ...
      </div>
    </div>
    <!-- Aquest element div conté la barra lateral de la pàgina - les categories
     d'articles, els últims comentaris, etc -->
    <div id="side">
      ...
    </div>
    <!-- Aquest element div conté el peu de pàgina, que és on veureu el missatge
     de copyright i diversos enllaços a la part inferior de la pàgina. -->
    <div id="footer">
      ...
    </div>
  <!-- El final de la pàgina - és l'etiqueta de tancament per a l'element div
   "wrap" -->  
  </div>
</body>

22.4. Informació addicional

Part del contingut té informació addicional, que és d'utilitat per als agents d'usuari i per a altres analitzadors, i aquesta s'ha de comunicar a través d'un atribut. Els elements span són sovint una bona manera d'adjuntar aquesta informació al contingut d'una pàgina web, tal com veureu a continuació.

Un bon exemple és un idioma diferent que apareix en un document. Per exemple:

<p><q>Plus ça change, plus c'est la même chose</q> she said.</p>

Tot i que l'idioma del document principal és l'anglès, la cita és en francès. Això s'indicaria mitjançant l'ús de l'atribut lang, de la següent manera:

<p><q lang='fr'>Plus ça change, plus c'est la même chose</q> she said.</p>

En aquest exemple era molt fàcil indicar aquest canvi d'idioma, ja que apareixia només en una cita, amb la qual cosa l'element q era perfecte per a envoltar el contingut. Hi ha alguns casos, però, en què no hi ha cap element semàntic adequat fàcilment disponible, amb la qual cosa hauríeu de recórrer a span o div. Per exemple:

<p>A screen reader will read the French word chat (cat) as chat (to talk
 informally) unless it is properly marked up.</p>

En aquest exemple, la primera aparició de la paraula chat, que és una paraula en francès en un document en anglès, hauria de tenir aquesta diferència indicada per tal que no es pogués interpretar com la paraula anglesa chat. En aquest cas, la manera correcta de fer-ho és amb un element span al voltant de la paraula chat, ja que no hi ha cap altre element HTML adequat per a envoltar la paraula francesa (no volem afegir cap èmfasi a la paraula, no és un cita, no és un codi, etc.). Com que és una única paraula dintre d'una frase, estarem treballant amb un element inserit. Per tant, aquest exemple s'hauria d'escriure de la manera següent:

<p> A screen reader will read the French word <span lang='fr'>chat</span>
 (cat) as chat (to talk informally) unless it is properly marked up.</p>

Aquesta és la mateixa tècnica que la utilitzada en els microformats per etiquetar formats de dades comuns en pàgines web. Podeu trobar molta més informació sobre els microformats en alguns del apartats més avançats sobre l'HTML a la pàgina corresponent de developer.mozilla.org.

22.5. Lligams per a JavaScript, i també CSS

Abans ja he parlat de com es poden utilitzar div i span juntament amb els atributs id i class per oferir lligams amb els quals aplicar estils CSS i el posicionament a certes parts del vostre contingut. El mateix també es pot fer per a aplicar JavaScript al vostre document.

Si el JavaScript ha de trobar i manipular un element concret, el més habitual és aplicar-li un id i llavors utilitzar la funció getElementById per a trobar-lo. A l'última part d'aquest curs aprendreu moltes més coses sobre el JavaScript.

22.6. "div-itis"

Una de les coses que cal tenir en compte és un efecte que, entre la comunitat de desenvolupadors de webs, es coneix normalment com a "div-itis".

És molt fàcil afegir estils mitjançant molts elements div o span imbricats, però és una temptació en la qual hauríem d'evitar caure sempre que fos possible. En la majoria dels casos es poden afegir estils o funcions JavaScript als elements ja existents del document. L'ús d'un contenidor genèric hauria de ser l'últim recurs; és millor intentar escriure pàgines web començant només amb els elements semàntics i afegir-hi contenidors només quan sigui necessari.

22.7. Semàntica inadequada

En aquesta secció exploro algunes de les errades més habituals que cal tenir en compte a l'hora d'etiquetar el contingut amb HTML i que cal evitar sempre que sigui possible.

22.7.1. "Paràgrafs" genèrics

Algunes vegades és molt temptador utilitzar un element p (paràgraf) al voltant de qualsevol bloc de text, però això no és massa correcte. Tal com ja he explicat en el meu apartat anterior sobre l'etiquetatge del contingut:

"Si són només unes quantes paraules i no una frase pròpiament dita, llavors potser seria millor no etiquetar-ho com un paràgraf."

L'element correcte per a envoltar el contingut textual inconnex que no té cap altra relació semàntica coberta per altres elements de l'HTML és div o span (segons la posició exacta).

Resum

Aquí acaben les meves explicacions sobre els elements span i div; ara ja hauríeu d'entendre molt millor quina és la seva finalitat i ser capaços d'utilitzar-los amb tota confiança. Els apartats del mòdul "Conceptes bàsics de CSS" aprofundiran molt més en el seu ús per crear maquetacions de pàgina i per a altres finalitats.

Preguntes de repàs

Quina és la diferència entre div i span?
Digueu dos dels usos principals d'aquests elements a les pàgines web.
Observeu el codi font d'una de les pàgines del vostre lloc web preferit. Mireu quina estructura té. Utilitza molt elements div i span? Podeu veure alguna cosa dolenta o inadequada en la manera d'utilitzar-los? Com es podria millorar?

22. Contenidors genèrics: els elements div i span