XHTML Tutorial - Kapitel 5: Fet och kursiv text

Att göra vissa ord eller fraser på dina sidor feta eller kursiva är väldigt lätt bara du förstår hur det här med taggar fungerar, och det gör du förmodligen nu. Fet text används för att göra ord "starkare" så de syns bättre, och för det använder man taggen <strong>. Kursiv text används för att lägga mer "vikt" vid orden och understryka en poäng, och för det använder vi <em> (eng. "emphasis").

Dessa är ju de två huvudsätten på vilka man formaterar texten på hemsidor. Ett annat är t.ex att ändra textfärgen, men vi ska inte bry oss om det just nu. Eftersom detta är en XHTML-tutorial så ska vi försöka lämna all sådan "styling" åt CSS, eller Cascading Style Sheets. Jag har skrivit en annan tutorial för CSS som jag också rekommenderar att du läser när du hajat det här med HTML.

Låt oss istället bara titta på ett snabbt exempel med fet (strong) och kursiv (em) text:

<html>
  <head>
    <title>Exempel med Fet och Kursiv stil</title>
  </head>
  <body>
    <p>
      Det här korta exemplet behöver ingen rubrik, eftersom vi bara
      gör texten <strong>fet</strong> och <em>kursiv</em>.
    </p>
    <p>
      <strong><em>Och titta, den här texten är båda!</em></strong>
    </p>
  </body>
</html>

Som du ser på slutet, så kan flera olika taggar också kombineras för att lägga båda deras egenskaper till materialet. Kom bara ihåg att alltid följa gällande "parent / child"-ordning, och avsluta <em> innan du avslutar <strong>, eftersom <strong> är det "yttre" elementet, som "innehåller" både <em> och texten.

Om vi hade gjort såhär istället:

<strong><em>Och titta, den här texten är båda!</strong></em>

...så hade det inte varit korrekt XHTML.





En kort historielektion: <b> och <i>

Det finns även ett par andra alternativa sätt för att åstadkomma vad <strong> och <em> gör, nämligen taggarna <b> och <i>. Dessa är logiskt nog förkortningar för de engelska orden bold ("fet") och italic ("kursiv"). Det finns dessutom en till, <u> för underlined ("understruken").

Dessa anses dock, trots att de används precis överallt på webben (jag har själv en uppsjö sajter fortfarande online som använder dem), vara föråldrade och rekommenderas inte. De kommer sannolikt ej heller att stödjas i framtida versioner av HTML.

Anledningen till detta är att de inte är semantiskt korrekta. Om vi tänker närmare på saken så betyder ju "bold" specifikt fet stil och "italic" betyder kursiv, men <strong> däremot betyder bara att vi vill att texten ska stå ut som lite starkare - den begränsar oss inte genom att säga hur. På samma sätt betyder <em> bara att vi vill betona något i texten, inte att vi måste göra det via kursiv stil. På det viset är taggarna mycket mer flexibla när vi omdefinierar dem i CSS-mallar.

Låt oss säga att vi vill ge vår "starkare" text en blå färg, och att vi vill låta vår "betonade" text visas i grön färg. Om vi definierade om en bold-tagg ( <b> ) som blå-färgande, stämmer inte betydelsen av HTML-koden längre. Vi har plötsligt framställt <b>-taggen som en lögnare, som påstår att den ska göra texten fet när den i själva verket bara ändrar färgen! Om taggen heter <strong> eller <em> så kan den dock tolkas korrekt oavsett hur vi väljer att göra vår text starkare eller mer betonad. Detta gör koden "semantiskt korrekt", oavsett metod!

Och, naturligtvis, att göra ord understrukna för att få dem att stå ut är en dålig idé i allmänhet eftersom besökarna som ser den då kommer att tro att det är en klickbar länk och bli förvirrade. Om du fortfarande vill tvinga en bit text att vara understruken utan att använda den fula föråldrade <u>-taggen, så kan du med fördel sätta CSS-deklarationen text-decoration: underline; istället.





< Tidigare: Rubriker och stycken

www.eagleowl.se      Tel: 026-16 13 61      E-post: robert@eagleowl.se
Allt material ©2014 EagleOwl