Textformatering och specialtecken i HTML

Innehåll

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 HTML

• Radbrytning
• Visuella taggar
• Textjustering och indrag
• Horisontella linjer
• Specialtecken i HTML

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. Taggen för radbrytning är <br /> och den har ingen avslutande tagg. Taggen ger, i motsats till stycke taggen, en radbrytning utan mellanrum mellan raderna.

Exempel 2.1 - radbrytningar

<p>Björn Persson<br />
Nygatan 1<br />
234 56   Nystad</p>

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.

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 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).

(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).

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.)

<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>

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).

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.

  <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>

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

För att få resultatet "Exponenter är upphöjda, t.ex. x², och kemiska föreningar nedsänkta, t.ex. H₂O."

<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>

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

"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.

<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 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).

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. :-) 

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

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

&förkortning;
&lt; => <
&amp; => &

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.

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.

<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>

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 />