Några av de vanligaste HTML-taggarna

Blocknivåelement

<H1></H1> Rubrik 1 (Header)

Huvudrubriken för dokumentet ("första nivåns rubrik").

Som regel finns en sådan i varje HTML-dokument. Det är ofta lämpligt att ha samma text i dokumentets <TITLE> som i dess <H1>.

Denna huvudrubrik brukar visas med stor fontstorlek och fetstil.

<h2></h2> Rubrik 2

Underrubrik ("andra nivåns rubrik").

Denna rubrik brukar visas med något mindre fontstorlek än <H1>.

Det finns också <h3> ("tredje nivåns rubrik") och <h4> ("fjärde nivåns rubrik"). De brukar visas med successivt mindre fontstorlek.

Det finns dessutom <H5> och <H6> men de är så dåligt implementerade i de vanligaste webläsarna att de är praktiskt oanvändbara och bör undvikas (de visas med mindre fontstorlek än vanlig text, vilket är helt ologiskt för en rubrik).

<P></P> Stycke (Paragraph)

Den stora textmassan består som regel av textstycken som innesluts i <P>-behållare.

Två på varandra följande stycken brukar presenteras med en blankrad mellan sig.

<PRE></PRE> Förformatterad text (PREformatted text)

Om man vill visa till exempel programkod eller ascii-konst med html är det förformatterad text som gäller. I den tolkas allt "vitt", d.v.s. blanktecken, och nyradstecken (och även tabbar, men såna bör undvikas eftersom de tolkas olika av olika program) precis så som du skrivit det. Förformatterad text visas med icke-proportionell font där så är möjligt.

Listor

Det kan ofta vara praktiskt att ställa upp listor över saker, t.ex. länkar. Det finns några olika sorters listor. Om man vill göra en numrerad lista använder man sig av <OL> (Ordered List) och om man vill göra en onumrerad lista använder man sig av <UL> (Unordered List). Varje element i listan innesluts så i <LI> (List Item).

I en definitionslista anger man först saken som ska definieras (ofta bara ett ord) och sen definitionen (t.ex. en översättning).

Exempel:

Numrerad lista 
<ol>
  <li>Ett</li>
  <li>Två</li>
  <li>Tre</li>
</ol>
  1. Ett
  2. Två
  3. Tre
Onumrerad lista 
<ul>
  <li>Ett</li>
  <li>Två</li>
  <li>Tre</li>
</ul>
  • Ett
  • Två
  • Tre
Definitionslista 
<dl>
  <dt>One</dt>
    <dd>Ett</dd>
  <dt>Two</dt>
    <dd>Två</dd>
  <dt>Three</dt>
    <dd>Tre</dd>
</dl>
One
Ett
Two
Två
Three
Tre

<HR> "Avskiljare" (Horisontal Rule)

<HR> är en tom tag. Den används för att skilja av större delar av ett dokument. Den presenteras oftast som en horisontell linje. Dess namn betyder också, lite ologiskt, "horisontell linje", vilket ju är en rent visuell beskrivning. Dess användningsområde är dock lika strukturellt som visuellt.

Tabeller

Ibland kan det vara bra att kunna visa upp data i tabellform. Då kan man använda sig av tabeller. En tabell innehåller ett antal rader, som i sin tur innehåller ett antal dataceller.

Många använder "tabeller" för att "göra layout" på websidor. Det är ofta ett tecken på att de inte förstått vad det är de sysslar med, och dokument av den typen hör till de som oftast ser fula ut därför att de råkar bli lite, lite, lite fel i nån situation som inte är riktigt exakt likadan som den som författaren testade sina dokument i.

(Se filen om tabeller)

<DIV></DIV> Generellt blockelement

Används ofta för att applicera CSS på blocknivå.

Textnivåelement

<A></A> "Ankare" (Anchor)

Taggen med det lite skumma namnet "ankare" har två olika funktioner. Dels är det det man använder för att sätta in länkar i texten. Dels är den taggen man använder för att ange en plats mitt inuti ett dokument som man sen kan länka till.

(Se filen om länkar)

<IMG> Bild (IMaGe)

<IMG> är en tom tag. Det är den man använder för att länka in en bild i ett HTML-dokument.

(Se filen om bilder)

<BR> Radbrytning (BReak)

<BR> är en tom tag. Den används för att göra en radbrytning mitt inuti ett stycke. Det är användbart till exempel för att presentera dikter, där det ju faktiskt spelar viss roll att raderna slutar där de ska utan att man för den skull vill börja på ett nytt stycke.

Exempel:

I've never seen a purple cow.
I never wish to see one.
But I can tell you anyhow,
I'd rather see, than be one.

<EM></EM> Eftertryck (Emphasis)

När man vill sätta lite extra tryck på ett eller ett par ord.

Visas ofta som kursiv text (men jag vet åtminstone en webläsare där den visas som understruken).

<STRONG></STRONG> Starkt eftertryck (STRONG emphasis)

Samma som emphasis, fast starkare.

Visas ofta som fetstil (men även här vet jag en webläsare där den visas som understruken).

<SPAN></SPAN> Generellt textelement

Används ofta för att applicera CSS på textnivå.

En sidmall

Några tankar om hur en mall för en websida kan se ut. Kopiera den och ändra den så den passar dig. Spara den som "mall.html" eller nåt sånt och kopiera den som grund när du skriver ett nytt dokument. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HEAD>
<TITLE>Skriv nåt vettigt här</TITLE>
<LINK REL="StyleSheet" href="/nånting/style.css" type="text/css">
</HEAD>
<BODY>


<H1>Skriv nåt vettigt här</H1>

<p>text här
</p>


<HR>
<ADDRESS>
Namn: Kalle Karlsson<br>
E-post: <A HREF="mailto:kalle@ingenstans.se">kalle@ingenstans.se</A><br>
Hemsida: <A HREF="http://och.så.vidare/">http://och.så.vidare/</A><br>
</ADDRESS>
</BODY>