Etiquetes genèriques

Encara que hi ha moltes etiquetes diferents en HTML no és possible tenir-ne una per a cadascun dels usos que se ens poden ocórrer. Per aquestos casos tenim unes etiquetes genèriques <span> i <div>.

L’etiqueta span

Potser que en un determinat text desitgem destacar els noms propis, o els adjectius, o els conceptes importants. No existèix una etiqueta específica per a cadascun d’aquestos usos però per fer açò tenim l’etiqueta <span>, la qual s’utilitza conjuntament amb els atributs id i class per poder modificar posteriorment el seu aspecte amb CSS. Per exemple:

<p>En el <strong>Cicle de Wilson</strong>, les primeres etapes són
extensives, i se corresponen amb la fragmentació de la <em>Pangea</em>
de <span class="autor">Wegenner</span>.</p>

I després en el HTML canviarem el seu aspecte amb el següent CSS:

span.autor {
    color: #52ACCA;
}

L’etiqueta div

L’etiqueta <div> serveix per a crear una caixa que pot contenir diferents elements HTML. Per exemple, imagina que vols ficar dos elements HTML dins d’un matèix requadre (dos paràgrafs o una imatge i un paràgraf). Per fer-ho pots ficar aquestos dos elements dins d’un element <div>.

<div>
    <p>Un paràgraf</p>
    <p>Altre paràgraf</p>
</div>

<div>
    <img src="mapae.png" alt="Mapa d'Espanya">
    <p>Figura 1: Mapa d'Espanya</p>
</div>

Els usos de <div> tenen sempre a veure amb la divisió de la pàgina en diferents parts.

L’estàndard HTML classifica tots els seus elements com a elements en línia i elements de bloc. Els elements de bloc acaben amb un bot de línia, i ocupen per defecte tot l’espai horitzontal disponible, mentre que els elements en línia es troben dins d’elements de bloc, no comencen en una nova línia i solament ocupen l’espai necessari per a mostrar el seu contingut. Per exemple: els paràgrafs i títols són elements de bloc mentre que el text destacat i abreviatures són elements en línia.

Si desitgem definir un nou element en línia utilitzarem l’etiqueta span, mentre que si el que fem és agrupar elements en bloc utilitzarem l’etiqueta div, encara que alguns usos habituals de l’etiqueta div han estat reemplaçats per les noves etiquetes semàntiques de HTML5.