Lathund för HTML-taggar

Formatering av text görs med hjälp av så kallade HTML-taggar. Dessa förekommer (med några få undantag) parvis och består av en "för-tag" och en "efter-tag" som omsluter den text som ska formateras. Det kan t ex se ut så här i HTML-koden:

<h2>
Detta är en rubrik på nivå 2
</h2>

Och då blir resultatet så här på den färdiga Web-sidan:

Detta är en rubrik på nivå 2

<h2> är alltså "för-taggen" och </h2> är "efter-taggen". Taggarna bör stå på egna rader för att underlätta läsbarheten av HTML-koden.

Formatering med HTML-taggar görs för att framhäva textens innehåll och funktion. Det kan vara rubriker på olika nivåer, styckeindelning, listor av olika slag, citat, länkar, mm. Hur resultatet ser ut när man använder taggarna beror på designen. Den styrs av innehållet i CSS-filen (Cascading Style Sheet). I CSS-filen beskrivs hur de olika taggarna ska visas på skärmen, t ex typsnitt, textstorlek, radavstånd, färger, mm.

Web-designern är den som bestämmer utseendet på Web-sidan genom CSS-filen, medan du som Web-redaktör står för textens innehåll och funktion genom att välja de HTML-taggar som bäst framhäver det du vill säga.

Här följer en beskrivning av de vanligaste HTML-taggarna.

HTML-kod Resultat
<h1>
Rubrik (header) på nivå 1
</h1>

Rubrik (header) på nivå 1

<h2>
Rubrik (header) på nivå 2
</h2>

Rubrik (header) på nivå 2

<h3>
Rubrik (header) på nivå 3
</h3>

Rubrik (header) på nivå 3

<p>
Ett vanligt textstycke (paragraph).
</p>
<p>
Ytterligare ett textstycke för att visa skillnaden mellan radavstånd och avstånd mellan styckena.
</p>

Ett vanligt textstycke (paragraph).

Ytterligare ett textstycke för att visa skillnaden mellan radavstånd och avstånd mellan styckena.

<ul>
<li>
En onumrerad lista (unordered list)
</li>
<li>
Ytterligare ett element i listan (list item)
</li>
</ul>
  • En onumrerad lista (unordered list)
  • Ytterligare ett element i listan (list item)
<ol>
<li>
En numrerad lista (ordered list)
</li>
<li>
Ytterligare ett element i listan (list item)
</li>
</ol>
  1. En numrerad lista (ordered list)
  2. Ytterligare ett element i listan (list item)
<p>
Det här är normal text. <em>Den här meningen framhävs (emphasize) med kursivering.</em> <strong>Den här meningen framhävs extra starkt (strong) med fetstil.</strong> Kursivering och fetstil bör användas mycket sparsamt.
</p>

Det här är normal text. Den här meningen framhävs (emphasize) med kursivering. Den här meningen framhävs extra starkt (strong) med fetstil. Kursivering och fetstil bör användas mycket sparsamt.

<p>
Här är en länk till <a href="http://ohw.se" title="Öppnas i nytt fönster" target="_blank">Örjan Hanssons nätplats</a> Det är Örjan som har skrivit den här lathunden.
</p>

Här är en länk till Örjan Hanssons nätplats. Det är Örjan som har skrivit den här lathunden.