Textformatering och specialtecken i (X)HTML

På denna hemsida beskrivs hur man formaterar texten med radbrytningar och olika stilar (fet och kursiv)liksom positionering av text och indrag. Sist behandlas specialtecken så som <, >, & och svenska tecken (å, ä och ö) som bl.a. används som styrtecken i (X)HTML

Innehåll

Radbrytning

Eftersom (X)HTML designats för att ersätta alla mellanrum (mellanslag, tabbar och radbrytningar) i kod med ett mellanslag i webbläsarens fönster så behövs en tagg för radbrytning. (Specialtecken för flera mellanslag i rad beskrivs längre ner på denna hemsida.) Taggen för radbrytning är <br /> och den har ingen avslutande tagg. Taggen ger, i motsats till stycke taggen, en radbrytning utan tomrad mellan raderna.

Exempel som visar hur man får radbrytningar (i t.ex. en adress) i ett stycke

<html>
<head>
  <title>Radbrytning</title>
</head>
<body>
<p>Björn Persson<br />
Nygatan 1<br />
234 56   Nystad</p>
</body>
</html>

Visuella taggar

Visuella taggar är taggar som förändrar textens utseende på något sätt. Vanligast är att vi ändrar stil på texten, till t.ex. fet eller kursiv, men även fast teckenbredd.

I HTML finns även taggar och attribut för att ändra typsnitt (font) samt för- och bakgrundsfärger. Dessa taggar har varit utgående i HTML 4.01 och i XHTML så finns taggarna inte kvar då man numera använder stilmallar (CSS) istället. Därför beskrivs dessa taggar och attribut inte längre på denna webbplats.

Betonad och förstärkt text

För betonad text (oftast med kursiv stil) används taggen <em> (eng. emphasize) och för att förstärka text (oftast med fet stil) taggen <strong>.

Fet och kursiv stil

Fet stil erhålls med taggen <b> (eng. bold) och kursiv stil med taggen <i> (eng. italic).
(Taggen <u> [eng. underline] ingår inte längre i XHTML och bör undvikas i HTML då texten lätt kan förväxlas med länkar).

Använda <strong>/<em> eller <b>/<i>?

(X)HTML är, som sagt, avsett för att märka upp element i dokument och bör därför användas som de avses att användas. Genom att använda rätt taggar till rätt sak så gör det möjligt för bl.a. verktyg för t.ex. synskadade att tolka texten rätt.

Det rekommenderas därför att:

<strong>/<em>
används för att just förstärka eller betona text.
<b>/<i>
används för design syfte, d.v.s. för fet eller kursiv stil i t.ex. menyer. Använd dock dessa två taggar restriktivt till förmån för stilmallar (CSS).

Text med fast teckenbredd

Ibland kan det vara användbart att skriva text med fast teckenbredd, d.v.s. att alla bokstäver i alfabetet har lika mycket utrymme i bredd till sitt förfogande. (Studerar ni texten ordentligt i denna mening, med varierande teckenbredd, så ser ni att t.ex. bokstäverna "i" och "m" inte utnyttjar samma utrymme i bredd.) Ett exempel är när man t.ex. vill betona att en viss text är en "kodsnutt" från ett programmerinsspråk. I dess fall kan man använda taggarna <tt> (eng. teletype) eller <code>. (Hur man kan behålla textens placering från HTML-koden med fast teckenbredd på typsnittet beskrivs längre ner på denna hemsida.)

Exempel som visar hur taggarna ovan ändrar texts stil

<html>
<head>
  <title>Visuella taggar</title>
</head>
<body>
<p>På denna hemsida visas hur text kan formateras med <b>fet stil</b> och <i>kursiv stil</i>.</p>
<p>Man kan även <em>betona text</em> eller <strong>förstärka text</strong>.</p>
<p>Vill man undvika att text avläses fel kan man använda <tt>formaterad text</tt> med fast bredd på typsnittet.</p>
</body>
</html>

Ändra typsnitt och färg på text

Taggar för att ändra typsnitt och färg på text har tagits bort i XHTML och de bör inte heller användas i HTML. Istället bör man använda stilmallar (CSS).

Ändra storlek på text

För att få lite mindre eller större text kan man använda taggarna <small> resp. <big>. I övrigt bör man använda stilmallar (CSS) för att anpassa storleken på text.

Exempel som visar hur man kan ändra storlek för text

<html>
<head>
  <title>Ändra storlek på text</title>
</head>
<body>
  <h1>Ändra storlek på text <h1>
  <p>Ett vanligt stycke</p>
  <p>Ett stycke med <big>lite större</big> 
    text och <small>mindre 
    text</small> som synes.</p>
</body>
</html>

Upphöjd och nedsänkt text

För att höja upp och sänka ner text används taggarnar <sup> respektive <sub>.

<p>Exponenter är upphöjda, t.ex.
  x<sup>2</sup>, och kemiska föreningar
  nedsänkta, t.ex. H<sub>2</sub>O.</p>

Exponenter är upphöjda, t.ex. x2, och kemiska föreningar nedsänkta, t.ex. H2O.

Borttagen och infogad text

Det går att markera borttagen och infogad text m.h.a. taggarna <del> resp. <ins>.

Textjustering och indrag

Det mesta av textjustinger och indrag bör ske med stilmallar (CSS), och de taggar som fanns i HTML har tagits bort i XHTML.

Förformaterad text

"Förformaterad" text innebär att webbläsare ska visa texten som den skrivits i HTML-koden, d.v.s. med mellanrum (mellanslag, radbrytningar och tabbar). Texten kommer att använda ett typsnitt med fast teckenbredd (Courier New i Windows).

Taggen är <pre> och är användbar om man t.ex. skriver programkod i en hemsida.

Exempel som visar skillnaden mellan förformaterad text och ett vanligt stycke

<html>
<head>
  <title>Förformaterad text</title>
</head>
<body>
<pre>
Denna text
          kommer att visas
    precis som den skrivits i HTML-koden.
</pre>
<hr>
<p>Ett vanligt stycke
          som skrivits på
    samma sätt i HTML-koden.</p>
</body>
</html>

Horisontella linjer

Horisontella linjer används som avdelar i hemsidor och man använder taggen <hr /> för att lägga till en. Linjerna är som standard 2 bildpunkter höga och går från kant till kant i webbläsarens fönster. Linjerna brukar (i Windows) visas som en nedsänkt linje, d.v.s. man använder skugga för att ge linjen ett tredimensionellt intryck.

Utseende av horisontella linjer bör ändras med stilmallar (CSS).

Specialtecken i HTML

Vissa tecken används i HTML-kod för vissa ändra mål, så som <, >, " och &. Dessa tecken måste därför kodas i HTML för att bli synliga för besökaren och för att inte HTML-koden ska bli felaktig (d.v.s. tolkas fel av webbläsare). Andra tecken, t.ex. landsspecifika bokstäver (t.ex. svenska) som å, ä och ö, brukar dock visas som de ska om besökaren har en webbläsare/operativsystem som är för det landets språk (d.v.s. med rätt teckentabell). Men om en besökaren med en webbläsare för ett annat språk (annan teckentabell) besöker sidan så kan de landsspecifika tecknen ersättas med t.ex. tomma fyrkanter. (Prova gärna genom att besöka en asiatisk webbplats. :-) 

Specialtecknens uppbyggnad

Specialtecknen börjar med &-tecknet (eng. ampersand) som följs av förkortningen för tecknet och avslutas med semikolon:

&förkortning;

T.ex. så betyder tecknet "<" mindre än (eng. less than) vilket blir "lt".

Svenska å, ä och ö

Svenska tecken är kanske lite svårare att härleda, men "ö" och "ä" motsvaras av "ouml" (eng. o umlaut) respektive "auml" (eng. a umlaut) samt "å" motsvaras av "aring" (eng. a ring). För att få motsvarande bokstav som versal så ändras gemenerna a och o till versalerna A respektive O (d.v.s. "Ouml", "Auml" och "Aring").

Tabellen nedan visar exempel på några specialtecken som måste (eller bör) kodas. De fyra första tecknen i första kolumnen ingår t.ex. i HTML-kod som giltiga tecken.

Tecken HTML-kod Tecken HTML-kod
< &lt; ö &ouml;
> &gt; Ö &Ouml;
& &amp; ä &auml;
" &quot; Ä &Auml;
' &apos; å &aring;
mellanslag &nbsp; Å &Aring;
© &copy;    

Exempel som visar hur bl.a. tecknen å, ä, ö, < och > kodas i HTML

Exemplet nedan visar bl.a. texten "Man börjar alltid HTML-kod med <HTML> och avslutar med </HTML>" där "HTML-tecknen" "<" och ">" måste kodas för att webbläsaren inte ska tolka HTML-koden fel. Tyvärr visar även exemplet att koden blir mycket svårare att läsa då även de svenska tecknen kodats.

<html>
<head>
  <title>Specialtecken i HTML</title>
</head>
<body>

<p>Man b&ouml;rjar alltid HTML-kod med &lt;html&gt; och avslutar med &lt;/html&gt;. Namnet Bj&ouml;rn s&aring;g inte s&aring; roligt ut i HTML-kod.</p>

<p>Det &auml;r sv&aring;rt att h&aring;lla p&aring; copyright p&aring; Internet. &copy; BPn.</p>

</body>
</html>

Erhålla fler än ett mellanslag i hemsida

Om vi vill ha fler än ett mellanslag mellan två bokstäver (t.ex. i postadressen "631 05  Eskilstuna") kan vi inte, som nämnts tidigare, skriva två eller fler mellanslag i HTML-koden. Webbläsaren kommer ersätta dessa två eller fler mellanslag med ett när den visar hemsidan. I stället måste vi använda specialtecknet "&nbsp;" som i något av exemplen nedan:

<p>631 05 &nbsp;Eskilstuna</p>

<p>631 05&nbsp;&nbsp;Eskilstuna</p>

&nbsp; är användbart även i andra sammanhang, t.ex. för att tvinga webbläsaren att skriva ut tomma rader eller tomma celler i tabell (mer om det senare på hemsidan Listor och tabeller). De flesta webbläsare skulle strunta i radbrytningen innan <HR> i följande exempel

<p>Rad 1<br />
Rad 2 som ska följas av en tom rad<br /></p>

<hr />

Men om vi istället använder följande kod (d.v.s. lägger till &nbsp; efter br-taggen) så kommer resultatet bli som man tänkt sig.

<p>Rad 1<br />
Rad 2 som följs av en tom rad<br />&nbsp;</p>

<hr />