Elements en línia

Els elements en línia són aquells elements que atorguen un significat específic al text sense que trenquin el fluxe del mateix. Els elements en línia són, com els elements en bloc, de caràcter estructural, i tenen, per tant, un valor purament semàntic, no visual. Si es té en compte aquesta característica es veurà la conveniència de deixar enrera pràctiques, ja obsoletes, com pot ser l'ús d'elements <i> o <b> per representar text en itàlica o en negreta, amb finalitat únicament visual i sense significat semàntic. Quan es tracti de definir l'aspecte visual del text convé fer servir els fulls d'estil, com es veurà més endavant.

Una classificació general dels elements en línia pot ser la següent:

Emfàsi (em) i més enfàsi (strong)

L'element em respon a les dues primeres lletres del terme anglès emphasis. Es tancaran entre les etiquetes <em>...</em> qualsevol fragment de text del que es vulgui emfatitzar el seu contingut. La representació per defecte als navegadors del text afectat entre les etiquetes <em>...</em>, és en cursiva o itàlica.

És important tornar a insistir en la diferència entre l'ús de les etiquetes <em> i <i>. La primera respon a l'assignació d'un èmfasi especial al text, mentre que l'etiqueta <i>, té només un valor visual que indica que aquell test es representarà en itàlica, però està deprovista de valor semàntic. Per aquesta raó, es desaconsella absolutament el seu ús.

Quan el text requereix un emfàsi especial, s'utilitza l'etiqueta <strong>...</strong>. La representació visual per defecte als navegador del text afectat per aquest element és la negreta. De la mateixa manera que passa amb les etiquetes <em> i <i>, l'ús de <strong> determina un valor semàntic del fragment seleccionat, mentre que la etiqueta <b> representa només una instrucció visual, el text en negreta, però sense valor semàntic.

Segons la W3C: By default, most Web browsers render the em element in italic font style. This style can be changed using CSS. The following example shows how to render the em element in normal font style. Since voice output systems, such as some assistive technologies, may pronounce content inside the em element in a louder voice, use the em element sparingly in order to avoid overwhelming listeners. És a dir, l'ús inapropiat d'instruccions visuals com <i> o <b> enlloc de <em> o <strong> per a frases o paraules carregades d'èmfasi, resta accessiblitat al document!

El comportament visual dels continguts afectats per les etiquetes <em> i <strong> es determinarà a través dels fulls d'estils, com es veurà més endavant.

Abreviacions (<abbr>) i acrònims (<acronym>)

El nom de l'element abbr respon a las primeres lletres del terme anglès abbreviations, és a dir, abreviacions, i acronym respon al terme acrónim en anglès. L'ús d'aquestes etiquetes proporcionarà més accessiblitat al document, donant la informació precisa que hi ha darrera de cada acrònim i abreviació. Les especificacions del W3C sobre aquests elements en línia són les següents:

Veieu els següents exemples:
<p>La <abbr title="World Wide Web">WWW</abbr> i la 
<acronym title="Xarxa Telemàtica Ensenyaments de Catalunya">XTEC</acronym></p>

Codi font (<code>)

L'etiqueta code designa, segons les especificacions del W3C, un fragment de codi de computador. Aquesta etiqueta queda, per tant, vinculada al marcat de text que representa una o vàries línies del codi font d'un programa. Veieu un exemple:

<p>Exemple de codi font: <code> *foo[2] += 1; </code></p>

Cites (<cite>)

Segons el W3C, l'etiqueta cite conté una cita o una referència a d'altres fonts. Encara que s'especifica a quin tipus de fonts es referix, s'enten que són publicacions, articles, notes de persones... Exemple de cita en línia:

<p>Segons H.P Lovecraft, a <cite>Los Mitos de Cthulhu</cite>,
 l'univers està poblat de monstres còsmics</p>

Teclat (<kbd>)

L'etiqueta kbd està vinculada al camp de la informática. Indica un text que l'usuari ha d'introduir fent servir el teclat. Exemples de text marcats amb aquesta etiqueta serien una expressió de comand o consola, una combinació de teclat... Exemple de teclat:

<p>Premeu <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Supr</kbd> 
per a reiniciar l'equip.</p>
<p>Un altre exemple de teclat, en aquest cas, una expressió de consola:
<kbd class="consola">apt-get install mozilla-firefox</kbd></p>

Tornar a l'inici de la pràctica

Valid XHTML 1.0 Strict Valid CSS Level Double-A conformance icon, 
          W3C-WAI Web Content Accessibility Guidelines 1.0