XHTML: Korostukset ja lyhenteet 2008-02-22 06:28

Kuvaus:

Merkkitasoisissa elementeissä on tarjolla kaksi korostustasoa: korostus em ja vahva korostus strong. Yleisellä merkkitasoisella span-elementillä voidaan poimia esimerkiksi henkilön- ja paikannimiä tai avainsanoja, jotka eivät ole varsinaisia korostuksia, mutta niiden halutaan visuaalisesti erottuvan. Lyhenteille on oma rakenne-elementtinsä abbr, ja akronyymeille acronym. Myös tekstistä tehdyt poistot ja lisäykset voi merkitä del ja ins elementeillä.

Korostus | Emphasis, Strong emphasis <em>...</em> ... <strong>...</strong>

Korostus tehdään em-elementillä, vahvempi korostus strong-elementillä.

<p>Korostuksia käytetään kun halutaan <em>painottaa</em> avainkohtia, tai ollaan <strong>opettavaisia</strong>.</p>

Vaikka em ja strong oletuksena toistuvatkin kursiivina ja lihavoituna, älä käytä ulkoasua kuvailevina vanhentuneita i- ja b- elementtejä korostuksissa vaikka ne edelleen toimivatkin.

Semantic Use of Bold and Italic Elements
Tässä tosin vastakkainen näkökanta. Pohdintaa elementeistä b, i, strong, em.

Vaikka ulkoasua ei pitäisi ajattella merkitsevänä asiana rakenteellisen merkkauksen yhteydessä, em-elementtiä kannattaa välttää pitkissä korostuksissa, koska oletusulkoasu kursiivi ei ole näytöllä helposti luettavissa.

Yleinen merkkitason elementti <span>...</span>

span on kappaletason div-elementtiä vastaava elementti merkkitasolla. Sillä ei ole oletuksena mitään ulkoasua.

<p>Niin <span class="henkilo">Prinssi Reipas</span> ja <span class="henkilo">Prinsessa Pirtsakka</span> elivät onnellisina yhdessä, elämänsä loppuun saakka.</p>

<p>Sen pituinen se.</p>

<p>Kirjoittanut: <span class="kirjoittaja">AB</span></p>

span-elementtiä kannattaa käyttää em- ja strong-elementtien sijaan poimimaan esimerkiksi tietyn tyyppisiä sanoja (kuten henkilön- ja paikannimet, sekä avainsanat), silloin kun ne eivät ole varsinaisia korostuksia. Merkityille sanoille voidaan antaa erottuva ulkoasu CSS:llä span-elementtiin liitettyjen id- ja class-attribuuttien avulla.

Lyhenne <abbr>...</abbr>

Lyhenteet merkataan abbr-elementiksi. Lyhenne ympäröidään aloitus- ja lopetustunnisteella, ja aloitustunnisteen title-attribuutissa kerrotaan mistä sanoista lyhenne muodostuu.

<p><abbr title="Extensible HyperText Markup Language">XHTML</abbr>-kielellä merkataan asiakirjan rakenne.</p>

title-attribuutin sisältö näkyy kun hiiri viedään selaimessa oletuksena pisteviivalla alleviivatun lyhenteen päälle.

Akronyymi <acronym>...</acronym>

Sanoina lausuttavat lyhenteet merkataan acronym-elementiksi. Periaate on sama kuin abbr-elementillä.

<p><acronym title="GNU Image Manipulation Program">GIMP</acronym> on ilmainen avoimen lähdekoodin kuvankäsittelyohjelma.</p>

Huom! acronym-elementti tulee poistumaan esimerkiksi HTML 5 -standardista, joten sen käytöstä voinee ehkä luopua muutenkin, ja käyttää yksistään abbr-elementtiä merkitsemään lyhennettä yleisemmin.

Poisto <del>...</del>, lisäys <ins>...</ins>

Mikäli tulee kirjoittaneeksi sivuilleen sellaista josta myöhemmin myöhemmin tulee toisiin ajatuksiin

<p>Bob Dylan laulaa hyvin.</p>

voi vrheen virheen tai muun muutoksen korjata siten, että poistettu teksti jää näkyviin:

<p>Bob Dylan <del>laulaa hyvin</del> <ins>on omintakeinen laulaja</ins>.</p>

Poistettu teksti näkyy selaimessa oletusarvoisesti yliviivattuna, lisätty alleviivattuna. Lisäysten ja poistojen käyttäminen merkkauksessa on erittäin suositeltavaa, varsinkin jos halutaan korostaa informaation muuttumista.

Luokka: »
Avainsanat:

Keskustelu

Kommentoi tätä sivua

Kommentit ovat julkisia. Sähköpostiosoitettasi ei julkaista tai jaeta.

*
*
*
http://raulihaverinen.fi/verkko-opas/?id=102