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:
<strong>
i <em>
: emfatitzen el fragment de text seleccionat (em
). En el cas de l'etiqueta strong
, l'èmfasi és més accentuat.<abbr>
i <acronym>
: indiquen una forma abreviada (abbr
) i un acrònim (acronym
).<cite>
: conté una cita o referència a una altra font.<code>
: dessigna un "fragment de codi de computador", segons les especificacions del W3C.<kbd>
: indica un text que hauria de ser introduit per l'usuari.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.
<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:
<abbr>
indica una forma abreviada: (WWW, HTTP, URL,...)<acronym>
indica un acrònim (GENCAT, XTEC,...)<p>La <abbr title="World Wide Web">WWW</abbr> i la <acronym title="Xarxa Telemàtica Ensenyaments de Catalunya">XTEC</acronym></p>
<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>
<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>
<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>