Fler taggar

Innehåll

Denna hemsida beskriver taggar som inte riktigt passar in i de andra delarna på denna underwebb. Här beskrivs bl.a. "strukturella taggar", d.v.s de som markerar element av något slag (t.ex. adresser och förkortningar).

Gruppering: span och div.

Strukturella taggar: abbr, acronym, address, cite, dfn, em och strong.

Citattaggar: blockquote och q.

Ännu fler strukturella taggar: code, kbd, samp och var.

• Gruppering
• Strukturella taggar
• Citat
• Fler strukturella taggar

Taggarna <span> och <div> är mycket användbara till bl.a. design och för att "göra webbsidor mer interaktiva". De används för att märka upp/gruppera del av ett element (t.ex. text i ett stycke) respektive ett antal element. Detta är användbart för att t.ex. applicera stilar på det som taggarna markerar/grupperar eller koppla händelser (musklickningar, m.m.) till det markerade/grupperade.

Skillnaderna mellan taggarna är att <span> är tänkt att användas "löpande" (eng. inline), d.v.s. utan att påverka elementets flöde, medan <div> är blockbaserat, d.v.s. det infogas som standard radbrytning före och efter taggen.

(I.o.m. XHTML så kan <div> inte längre användas för att centrera element med attributet align. Istället används stilmallar.)

I exempel nedan används taggen <span> för att appliceras fet stil på ordet "musmarkör" samt hantera händelserna MouseOver och MouseOut över orden "denna text".

Placera musmarkören över denna text.

Som exempel ovan visar så påverkas inte "flödet" i texten av taggen. Exemplet ovan visar även hur vi kan använda taggen id för att namnge taggen så att vi kan referera till den i t.ex. skriptkod (t.ex. JavaScript).

<p>Placera <span style="font-weight:
  bold">musmarkören</span> över
  <span id="denna_text"
  onmouseover="this.style.color='red'"
  onmouseout="this.style.color=''">denna
  text</span>.</p>

I nedanstående exempel används taggen <div> istället, ett exempel som visar på hur taggen <div> "stör flödet", d.v.s. infogar radbrytningar, men eventuellt även hur applicerade stilmallar inte fungerar som de ska. (Första raden, har i skrivande stund, typsnittet Verdana med samma storlek som texten på denna hemsida medan resten av raderna antingen är större storlek på typsnitt eller har "standardtypsnittet" - Times New Roman eller liknande.)

<div>
  Placera
  <div style="font-weight:
    bold">musmarkören</div>
  över
  <div
    onmouseover="this.style.color='red'"
    onmouseout="this.style.color=''">denna
    text</div>
  .
</div>

I exempel ovan så måste div-tagg användas istället för p-tagg, som i exempel med span-taggar ovan, då en div-tagg inte får placeras i en p-tagg i XHTML.

Strukturella taggar är taggar som märker upp element i dokument som har någon "form av betydelse", t.ex. adress, förkortning eller citat.

Dessa taggar används lämpligen med attributet title, som då kan innehålla ev. förklaring av vad elementet representerar. När attributet title används så visar en del webbläsare elementet med en streckad understrykning och när besökare för markören över det så visas en "pop-up"-text med innehållet i attributet.

<abbr> och <acronym> används båda för att märka upp förkortningar, med skillnaden att den första används för bokstävsförkortningar (t.ex. VD) och den senare för förkortade ord, vars bokstavskombination "läses ut" (akronymer; t.ex. SAAB och IKEA).

<p>Om man är lite lat och inte vill förklara allt så kan man använda förkortningen <abbr title="Read The F*cking Manual">RTFM</abbr>.<p>

Denna tagg används för att markera adressuppgifter, t.ex. postadress, telefon och e-postadresser. Taggen kan innehålla mer än bara adresser, d.v.s. även lite beskrivande text.
Webbläsare tenderar till att visa texten med kursiv stil (och inforgar inga tomma rader före eller efter elementet).

<address>
  Björn Persson<br />
  Nygatan 1<br />
  123 45  NYSTAD<br />
  Telefon: 0123-45 67 89<br />
  Webbplats: www.kiltedviking.net
</address>

Denna tagg används lämpligen tillsammans med någon av taggarna <p> eller <div>, alternativt att stilmallar (CSS) används för att ge elementet lite avstånd till andra element.

För att markera citat i löpande text kan man använda taggen <cite>.

<p>Om vill verka tuff så kan man säga <cite title="Terminator">I'll be back</cite>, men det kräver nog solglasögon och en hel del muskler.<p>

(Se även Citat nedan.)

Använd <dfn> för att markera en term - en term som bör förklaras i meningen/stycket som termen finns i.

<p><dfn>XHTML</dfn> är en standard för att märka upp element i ett dokument.<p>

Om man vill betona, eller förstärka, text så kan man använda någon av taggarna <em> eller <strong> - den föregående visas oftast med kursiv stil medan den senare oftast visas med fet stil.

(Se mer under Textformatering)

Det finns två taggar för att markera citat - en för i löpande text, <q>, och en för flera stycken, <blockquote>.

<p>Ett vanligt citat är <q cite="https://sv.wikipedia.org/wiki/Ceasar">Et tu, Brute</q>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...

Proin quis enim et erat consectetur pharetra tincidunt a ligula. ...

Curabitur nisl dolor, semper commodo accumsan et, convallis a massa. ...

(Jag använder denna tagg för kodavsnitt för att de ska sticka ut.)

<blockquote cite="https://www.lipsum.com/">
  <p>Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. ...</p>
  <p>Proin quis enim et erat consectetur pharetra
    tincidunt a ligula. ...</p>
  <p>Curabitur nisl dolor, semper commodo accumsan
    et, convallis a massa. ...</p>
</blockquote>

Det finns fyra ytterligare strukturella taggar som främst är för datorrelaterade saker. (De presenteras separat från övriga strukturella taggar då de antagligen är av intresse för en mindre mängd av mina besökare. :-)

Denna tagg används flitigt i denna underwebb för namn på alla taggar och attribut samt alla kodexempel. :-)

<p>Tilldelning i JavaScript: <code>var sum = talA + talB;</code>.</p>

<p>För att starta en kommandotolk skriver man <kbd>cmd</kbd> i Kör-fältet.</p>

<p>Resultatet från kommandot time kan vara<br />
  <samp>Aktuell tid: 17:37:57,09<br />
  Ange ny tid:</samp></p>

Denna tagg är tänkt att användas för att märka upp variabeler, eller argument till funktion/metod.

<p>Till metoden window.open() i JavaScript bifogar man argumentet <var>url</var> som innehåller URL som ska öppnas i fönster.</p>