Tjenare, tänkte nu skriva ett väl genomgående inlägg som på ett översiktligt och informativt sätt går igenom HTML specialtecken som är populära att använda sig utav i HTML-kodning.

Varför specialtecken via HTML?

Varför ska man då kunna detta/varför kan det vara bra att känna till detta? Jo, specialtecken kan användas till mycket, t ex. att komplettera vid tillfällen då tangentbordets utbud av tecken inte längre räcker till för att presentera det du önskar, eller för att snitsa till dina listor med snyggare ikoner, eller allmänt bara strukturera dina texter på ett snyggare och mer utökat sätt.

Specialtecken kan vara bra till många saker, t ex. för oss svenskar så kan det ibland behövas att man för hand kodar in tecken som vissa teckenkodningar annars har svårt att tolka- som exempelvis våra svenska tecken: å, ä och ö. Där finns även tillfällen då man kommer behöva ”hårdkoda” in specialtecken som ampersand tecknet (&), eller man kanske vill ha fler mellanrum av någon anledning utöver vad webbläsaren tolkar från koden – då kan man t ex. hårdkoda in mellanrum som specialtecken för att webbläsaren verkligen ska tolka utöver vad den annars hade gjort.

Där finns som sagt många scenario då detta är användbart, men det är även kul att känna till och det låter en göra så mycket mer med ens webbsidor och sättet man formaterar texter och innehåll på!

I det här inlägget tänkte jag gå igenom samtliga tecken som jag själv finner användbara att ha översiktlig koll på.

Hur HTML specialtecken kodas

Där finns väldigt många specialtecken som kan kodas i HTML, och man kan koda de på olika sätt också, antingen med sifferkoder, eller med bokstavskoder.

De tecknen jag själv anser kan vara intressanta och användbara att känna till

De svenska tecknen å, ä, ö

å = å
Å = &Aring; <- notera stor första bokstav på Aring

ä = &auml;
Ä = &Auml; <- notera hur samma mönster gäller som för Stora Å

ö = &ouml;
Ö = &Ouml;

Horisontella/Vertikala streck – användbara som avskiljare och liknande

– : – (n:et står för EN så kanske är fast storlek på strecket alltid, ej säker dock)
— : — (lite längre än ndash, m:et står för EM så kan ha med font-size att göra hur stor detta strecket blir, ej helt säker)
― : ― (horisontal bar)
∣ : ∣ (Vertikal avskiljare)
‖ : ‖ (Vertikalt dubbelstreck)

Typografiska specialtecken – ”hårdkodat mellanrum”, citationstecken, № (numero) tecken och ampersand (&) tecken

  - &nbsp; <- No-break space - användbart om man vill ha flera på varandra efterföljande mellanrum på en webbsida, måste "hårdkodas"
« - &laquo; <- förkortning står för "left pointing double angle quotation mark"
» - &raquo; <- förkortning samma som ovan fast omvänt
‹ - &lsaquo; <- förkortning står för "left pointing single angle quotation mark"
› - &rsaquo; <- förkortning samma som ovan fast omvänt
“ - &ldquo; <- "left double quotation mark"
” - &rdquo; <- samma som ovan fast omvänt
№ - &numero; <- nummer på italienska
& - &amp; <- förkortning står för "ampersand"

Valuta tecken för Euro (€), Yen (¥), Pund (£) och Cent (¢)

€ - &euro; <- väldigt simpelt kodade förkortningar, lätta att komma ihåg
¥ - &yen;
£ - &pound;
¢ - &cent;

Pilar (arrows) och indikator tecken (med och utan svans)

Singulära pilar:
← - &larr; <- leftwards single arrow
↑ - &uarr; <- upwards single arrow
→ - &rarr; <- right single arrow
↓ - &darr; <- downwards single arrow
↔ - &harr; <- horisontal single arrow (both right & left)
↕ - &varr; <- vertical single arrow - (both up down)
Pilar med "svans":
↢ - &larrtl; <- left single arrow with tail
↣ - &rarrtl; <- right single arrow with tail
⥈ - &harrcir; <- horisontal arrows through circle (looks badass ;) )

Punktlists tecken – Punkt, Cirkel, Diamant (svart/vit), Stjärna (svart/vit), Kvadrat och Trianglar

• - &bull; <- antar detta står som förkortning för "bulletpoint" vilket praktiskt taget betyder "punkt" på svenska
○ - &cir; <- vit cirkel
◯ - &bigcirc; <- stor vit cirkel
♦ - &diams; <- svart diamant
⋄ - &diam; // &diamond; <- vit diamant
⋆ - &sstarf; // &Star; <- stjärna
★ - &starf; <- svart stjärna (förkortning = star + filled (f:et står alltså för ifylld med färg))
☆ - &star; <- vit stjärna (förkortning = star Utan filled)
◼ - &FilledSmallSquare; <- Svart kvadrat
▸ - &rtrif; <- Höger-pekande svart triangel
▹ - &rtri; <- Höger-pekande vit triangel (ej ifylld)

Lagliga tecken – Copyright (©), Registered (®) samt TradeMark (™)

© - &copy; <- för copyright
® - &reg; <- för registered
™ - &trade; <- för trademark

Matematiska tecken

Jämförelse operatorer: Större än och mindre än tecken (även HTML-tagg tecknen)

< - &lt; <- förkortningen står för "lesser than" som på svenska blir "mindre än"
> - &gt; <- förkortningen står för "greater than" som på svenska blir "större än"

Större än eller lika med respektive mindre än eller lika med tecknen

≤ - &le; <- förkortningen står för "less than or equal to", som på svenska motsvarar "mindre än eller lika med"  
≥ - &ge; <- förkortningen står för "greater than or equal to", som på svenska motsvarar "större än eller lika med"

Matematiska Plus/Minus tecknet (kan användas vid PQ formeln t ex.) – har 3 sätt att kodas på

± - &plusmn; // &pm; // &PlusMinus; <- alla koder ger exakt samma tecken, testa själva vetja ;)

Grader som t ex. 30° – kan vara användbart att veta hur man kodar detta

° - &deg; <- förkortningen står för engelskans "degree", vilket på svenska betyder "grader"

Allmänna matematiska tecken som ”Infinity” (∞) för oändlighet, och ”Nästan lika med” (≈) för ungefärliga värden

∞ - &infin; <- förkortning står uppenbarligen för "infinity" som engelska ord för oändlighet 
≈ - &asymp;

Matematiska ”omfamnings-tecken” / Brackets

〈 - &lang; <- förkortningen står för "mathematical left angle bracket", som på svenska motsvarar "matematisk vänstervinklad parentes"
〉 - &rang; <- förkortningen här står för samma som ovan, fast right angle bracket

Matematiska enheter – promille (‰) och mikro (µ)

‰ - &permil; <- förkortning står för "per mille" gissar jag, där "mille" betyder tusen på franska, och promille är ju tusendelar så "per tusen" på svenska
µ - &micro;

Matematiska PI – Stora PI (Π) & lilla PI (π)

Π - &Pi; <- notera stora första bokstaven, precis som för de svenska tecknen
π - &pi; <- precis som svenska tecknen för liten bokstav

Matematiska ekvationstecken – Multiplikations ”x”

× - &times; <- "times" på engelska är samma som "gånger med"

Övriga tecken och ikoner som kan skapas med HTML specialtecken (sikte, telefon, man/kvinna, hjärta, bock, kryss, not)

⌖ - &target; <- sikte
☎ - &phone; <- telefon ikon
♀ - &female; <- kvinno könstecknet
♂ - &male; <- manliga könstecknet
♥ - &hearts; <- hjärta
♪ - &sung; <- sångnot
✓ - &check; <- checkmark (bock)
✗ - &cross; <- cross mark (kryss)

Ytterligare tecken som kan skapas via HTML-kod

Man kan även koda Grekiska alfabetet (som t ex. används ofta vid matematiska samband – alfa, beta, gamma, delta, etc.), såväl som t ex. Danska bokstäver som: ø, æ.

Där finns även specialtecken för att representera upphöjt-med och nedsänkt-med, men ni bör i det fallet hellre överväga det semantiska alternativet då HTML5 har taggar för att upphöja/nedsänka tecken, vilket kanske är att föredra över icke-semantiska specialtecken.

Slutkläm

Anledningen att jag på många ställen förklarade vad kodnings förkortningarna stod för och representerade – var då jag själv personligen har lättare för att komma ihåg kodnings förkortningarna om jag vet vad de står för i kombination med kunskapen att veta vad respektive kodnings förkortning ger för resultat i praktiken.

Valde att gå igenom samtliga användbara tecken som jag kunde komma på och som även kan hittas på W3C’s referenssida länkad först i nedan stycke.

Bra referenssidor där ni själva kan se över det tillgängliga utbudet av specialtecken för HTML

Några bra referenssidor för att se diverse tecken man kan koda in och vilka koder som ger vilka tecken kan hittas på följande sidor:

http://dev.w3.org/html5/html-author/charref

http://www.degraeve.com/reference/specialcharacters.php