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 HTML designats för att ersätta alla mellanrum (mellanslag, tabbar och radbrytningar, kallat whitespaces) 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

Kod

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

Resultat

Björn Persson
Nygatan 1
234 56  Nystad

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

Kod

Finns <em>betonad</em> och 
  <strong>förstärkt</strong> text

Resultat

Finns betonad och förstärkt text

Fet stil erhålls med taggen <b> (eng. bold) och kursiv stil med taggen <i> (eng. italic).

(Taggen <u>, för understruken text, [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).

Kod

Finns <b>fet</b> och <i>kursiv</i> stil

Resultat

Finns fet och kursiv stil

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. personer med nedsatt syn 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).

För att få lite mindre text, så kallad "finstilt text", kan man använda taggen <small> - text som brukar visas med något mindre teckenstorlek.

(Större text med taggen <big> ska inte längre användas, även om det fortfarande fungerar i 2025.)

Kod

Pris: 1 kr <small>inkl. moms</small>

Resultat

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

Kod

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

Resultat

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

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

Kod

Text kan markeras som <del>borttagen</del>
  och <ins>infogad</ins>.

Resultat

Text kan markeras som borttagen och infogad.

"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 brukar visas med 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 (så som denna).

Kod

<pre>
  Denna text
            kommer att
  visas
     precis som den skrivits i HTML-koden.
  </pre>
  <p>Ett vanligt stycke
            som skrivits på
      samma sätt i HTML-koden.</p>

Resultat

            Denna text
          kommer att
  visas
     precis om den skrivits i HTML-koden.

Ett vanligt stycke som skrivits på samma sätt i HTML-koden.

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 eller omslutande element. 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).

Kod

<hr />

Resultat

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:

&förkortning;

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

Kod

<
&

Resultat

<
&

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.

Kod

<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; Björn.</p>

Resultat

Man börjar alltid HTML-kod med <html> och avslutar med </html>. Namnet Björn såg inte så roligt ut i HTML-kod.

Det är svårt att hålla på copyright på Internet. © Björn.

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.

Exempel 2.9 - specialtecken i HTML

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<br />
631 05&nbsp;&nbsp;Eskilstuna</p>

631 05  Eskilstuna
631 05  Eskilstuna

  ä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 är tänkt att följas av en tom 
  rad<br />
</p>

<hr />

Rad 1
Rad 2 som är tänkt att följas av en tom rad

Men om vi istället använder följande kod (d.v.s. lägger till   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 />

Rad 1
Rad 2 som följs av en tom rad