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, div |
| Strukturella taggar: | abbr, acronym,
address, cite, dfn, em,
strong |
| Citattaggar: | blockquote, q |
| Fler strukturella taggar: | code, kbd,
samp, var |
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 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".
Som exempel till höger (eller nedan) 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 <b>musmarkören</b> över
<span id="denna_text"
onmouseover="this.style.color='red'"
onmouseout="this.style.color=''">denna
text</span>.</p>Placera musmarkören över denna text.
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.)
I exempel till höger (eller nedan) 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.
<div>
Placera <b>musmarkören</b> över
<div onmouseover="this.style.color='red'"
onmouseout="this.style.color=''">denna
text</div>
.
</div>Placera musmarkören över
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).
Observera att denna typ av element inte fungerar så bra på mobiltelefoner och surfplattor! (Det går dock att lösa med CSS och/eller JavaScript. ;-))
<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>Om man är lite lat och inte vill förklara allt så kan man använda förkortningen RTFM.
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).
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.
<address>
Björn Persson<br />
Nygatan 1<br />
123 45 NYSTAD<br />
Telefon: 0123-45 67 89<br />
Webbplats: www.kiltedviking.net
</address>För att markera citat i löpande text kan man använda
taggen <cite>, som visar källan till citatet när
musmarkör förs över det.
(Se även Citat nedan.)
<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>Om vill verka tuff så kan man säga I'll be back, men det kräver nog solglasögon och en hel del muskler.
Använd <dfn> för att markera en term - en term som bör
förklaras i meningen/stycket som termen finns i. Borsett från att
webbläsare kanske visar elementets text med t.ex. kursiv stil, så är
det inget speciellt med taggen.
<p><dfn>XHTML</dfn> är en standard för att
märka upp element i ett dokument.<p>XHTML är en standard för att märka upp element i ett dokument.
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>.
Taggen används för citat i löpande text och texten kan visas inom citationstecken av webbläsare.
<p>Ett vanligt citat är <q
cite="https://sv.wikipedia.org/wiki/Ceasar">Et
tu, Brute</q>.Ett vanligt citat är Et tu,
Brute
.
Taggen används, som dess namn anger, för block av citat och blocket brukar visas indraget på sidorna.
Nedan är globala attribut, d.v.s. attribut som kan användas för alla HTML-element, som kan ge mening.
(CSS-ramverket, Materialize, som jag använder för denna webbsida lägger till den färgade randen till vänster om blocket.)
<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>
<blockquote
cite"https://www.brainyquote.com/topics/
scotland-quotes"
title="Billy Connolly">There are two seasons
in Scotland: June and Winter.</blockquote>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. ...
There are two seasons in Scotland: June and Winter.
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. :-)
Taggen används med fördel med taggen <pre> för att
formatera kod med t.ex. indrag och radbrytning (som exempel i denna webbsida).
(Denna webbsida, och andra, använder CSS-biblioteket Prism för att färga HTML-kod så att
den blir mer lättolkad, d.v.s. färgar taggar i en färg [#905], attributnamn
i en annan [#690], attributvärde i ytterligare annan [#07a] och innehåll
i en annan igen [#000].)
<p>Tilldelning i JavaScript: <code>var sum =
talA + talB;</code>.</p>Tilldelning i JavaScript: var sum = talA + talB;.
Taggen används för att märka upp värden som ska matas in på tangentbord och webbläsare brukar visa dess värde med typsnitt med fast teckenbredd (så som typsnittet Courier New i Windows och Helvetica i macOS).
<p>För att starta en kommandotolk skriver man
<kbd>cmd</kbd> i Kör-fältet.</p>För att starta en kommandotolk skriver man cmd i Kör-fältet.
Taggen används för att markera resultat/utskrift från t.ex. ett kommando.
<p>Resultatet från kommandot time<br />
<samp>Aktuell tid: 17:37:57,09<br />
Ange ny tid:</samp></p>Resultatet från kommandot time
Aktuell tid: 17:37:57,09
Ange ny tid:
Denna tagg är tänkt att användas för att märka upp variabeler, eller argument till funktion/metod och webbläsare brukar visa dess innehåll med kursiv stil.
<p>Till metoden window.open() i JavaScript
bifogar man argumentet <var>url</var> som
innehåller URL som ska öppnas i fönster.</p>Till metoden window.open() i JavaScript bifogar man argumentet url
som innehåller URL som ska öppnas i fönster.