Semantiske sitater
Sitater kan markeres med HTML på to måter. Hvilken skal du bruke når? cjohansen.nos daglige julekalender gir deg noen forslag.
Aktuelle elementer:
Elementet <q> er ment for inline-innhold og dermed kortere sitater, mens <blockquote> er til for lengre sitater, og er også et blokkelement. Relatert er også elementet <cite> som er til for å angi siteringer og kildehenvisninger.
Bruksområder
<q> er som nevn ment for kortere sitater, og er et inline-element. Elementet har noe spesiell spesifikasjon idet den sier at brukeragenten er ansvarlig for å sette inn anførselstegn på hver side av sitatet. En sånn spesifikasjon ber om trøbbel, og trøbbel har vi fått. Spesifikasjonen sier også at anførselstegn ("quotation marks" - jeg er usikker på min oversettelse er helt riktig) er språkavhengig.
Desverre er det selvsagt varierende støtte i nettlesere som lager trøbbel. Internet Explorer setter ikke inn anførselstegnene slik spesifikasjonen ber om, mens Firefox og Safari samvittighetsfullt gjør det. Ett løsningsforslag som presenteres i en artikkel hos alistapart.com er å bruke CSS til å fjerne anførselstegnene (q:before, q:after { content: ""; }) for deretter å sette anførselstegnene manuelt inn i HTML-en, noe som ikke strider direkte mot spesifikasjonen om du setter de rundt q-taggen. Men det er likefullt et hack.
Eksempel (fra A List Apart-artikkelen)
<p>
Visste du at "<q>The quick brown fox jumps over the lazy dog</q>"
inneholder alle bokstavene i det engelske alfabetet (det gjorde ikke jeg)?
</p>Dersom dette presenteres sammen med CSS-en vist over vil dette fungere på tvers av nettleserene.
Blokksitater
<blockquote> er det elementet som idag er vanligst i bruk for å markere noe som et sitat. Det er relativt enkelt i bruk. Det brukes som et vanlig blokkelement, og i tillegg brukes cite-attributtet til å angi kilden til sitatet:
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html#h-9.2.2" lang="en" xml:lang="en">
<p>
The value of this attribute is a URI that designates a source document or message. This attribute
is intended to give information about the source from which the quotation was borrowed.
</p>
</blockquote>I mange tilfeller vil det være veldig interessant å vise verdien i cite-attributtet, kanskje som en lenke. Gitt at cite-attributtet er nettopp et attributt vil ikke dette fungere "ut av boksen", men ved hjelp av CSS kan vi ihvertfall vise cite-attributtet, og ved hjelp av Javascript kan vi lage en lenke av det.
CSS' attributt-selector, :after-pseudoelementet og content-egenskapen
Med litt råflott CSS2 (som desverre ikke har bred nok støtte til å stå på egne ben) kan vi vise cite-attributtet etter alle blockquote-elementer som har et cite-attributt:
blockquote[cite]:after {
content: "Kilde: " attr(cite);
}Dette vil velge alle blokksitater som har cite-attributtet (uansett hvilken verdi), og legge til "Kilde: [cite]" etter sitatet.
<cite>
cite er også en måte å henvise til andre, men her er det selve referansen som står i fokus, ikke selve sitatet. En mulig måte å bruke denne på er følgende eksempel:
<p>
Ifølge <cite title="cite-taggen i HTML 4.01-spesifikasjonen">W3C</cite> inneholder cite-elementet
en referanse til andre kilder.
</p>Jeg stusser over at cite-taggen ikke har noen mulighet til å gi URL, eller knytninger til sitater eller innhold som kilden faktisk står bak, og ser dermed for meg at dette ikke er det nyttigste elementet i HTML-spekken. Men spesifikasjonen sier ikke noe om at du ikke kan bruke denne i andre tagger, så en mulig løsning på det usynlige cite-attributtet i <blockquote> kan være å rett og slett duplisere innholdet i en <cite> nestet i <blockquote>:
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html#h-9.2.2" lang="en" xml:lang="en">
<p>
The value of this attribute is a URI that designates a source document or message. This attribute
is intended to give information about the source from which the quotation was borrowed.
</p>
<p>
<cite title="Sitater i HTML 4.01-spesifikasjonen">
<a href="http://www.w3.org/TR/html401/struct/text.html#h-9.2.2">
W3C
</a>
</cite>
</p>
</blockquote>Hva er dine tips for sitater i HTML?
