Contents nav menu

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 å, ä, ö

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

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

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

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

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

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

Matematiska tecken

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

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

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

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

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

Matematiska “omfamnings-tecken” / Brackets

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

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

Matematiska ekvationstecken – Multiplikations “x”

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

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