De vanligaste elementen

Elementen i XHTML-språket kan indelas i två grupper, element på styckenivån och på teckennivån.

  • Elementen på styckenivån (block) börjar alltid på en ny rad. De inbegriper bl.a. rubriker, listor och vanliga textstycken. 
  • Elementen på teckennivån (inline) skrivs alltid innanför ett styckeelement. De inbegriper bl.a. effekter och länkar. Referenser till bilder ska också skrivas innanför ett styckeelement.  

Vissa styckeelement kan stå innanför varandra, en lista kan t.ex. bestå av enskilda listpunkter och flera listor – t.o.m. textstycken. Däremot kan styckeelementen aldrig stå innanför teckenelement.

Styckeelement

Rubriker

Det finns sex olika rubriknivåer: h1 är den första, h2 den andra, h3 en rubrik på den tredje nivån, o.s.v. Rubriknivåerna h1-h3 används mest. Följande exempel visar hur rubriknivåerna h1, h2 och h3 ser ut:

Markering
Vy i webbläsarena
<h1>Huvudrubriken</h1>

Huvudrubriken

<h2>Rubrik på nivå 2</h2>

Rubrik på nivå 2

<h3>Rubrik på nivå 3</h3>

Rubrik på nivå 3

Observera att layouten på rubrikerna bestäms av vilken CSS-stil man använt: bruka alltså rubriknivåerna till att strukturera texten först och fundera sedan på hur rubrikerna ska se ut när du har skrivit texten färdig. 

Stycken

Största delen av texten kommer att placeras innanför styckeelementen. Taggen för ett stycke är p. Man ska inte glömma att avsluta styckena med en sluttagg.

<p> ... </p>

Listor

Det kan finnas tre olika typer av listor i XHTML: oordnade (ul = unordered list), ordnade (ol = ordered list) och definieringslistor (dl = definition list). I de två förstnämnda markeras varje listpunkt med elementet li. I definieringslistor markeras begreppen med elementet dt (dt = definition term) och beskrivningarna av dem med dd (dd = definition description). Nedan ser du exempel på hur man använder de olika listtyperna:

Markering Vyn i webbläsaren
 <ul>
 <li>katt</li>
 <li>hund</li>
 <li>kamel</li>
</ul>
  • katt
  • hund
  • kamel
 <ol>
 <li>Krydda fisken med färsk ingefära</li>
 <li>Lägg i paprika, chili och kokosmjölk</li>
 <li>Kör in i ugnen en passligt lång tid</li>
<li>Bjud grönsaker till</li>
</ol>
  1. Krydda fisken med färsk ingefära
  2. Lägg i paprika, chili och kokosmjölk
  3. Kör in i ugnen en passligt lång tid
  4. Bjud grönsaker till
 <dl>
 <dt>Katt</dt>
   <dd>Ett husdjur som jamar</dd>
 <dt>Hund</dt>
   <dd>Ett husdjur som skäller</dd>
 <dt>Kamel</dt>
   <dd>En släkting till lamadjur</dd>
</dl>
Katt
Ett husdjur som jamar
Hund
Ett husdjur som skäller
Kamel
En släkting till lamadjur
 

En oordnad lista (ul) kan lätt bytas ut mot en ordnad lista (ol) – och vice versa – genom att byta ut listelementen.

Det generiska styckeelementet div

XHTML innehåller ett generiskt styckeelement, div-elementet. Med detta element kan man indela text och andra element i skilda strukturella helheter som man själv definierar. När man har indelat informationen på en sida i logiska helheter (i exemplet nedan har man definierat en enkel inforuta med div-elementet), kan man mycket enkelt och snabbt använda stilmallar för att redigera layouten på helheter (som inforutan i exemplet).

<div class="infobox" id="bernerslee">
<h3>Visste du?</h3>
<p>Tim Berners Lee uppfann HTML och WWW i
Cern i medlet av 1990-talet.</p>
</div>
 

Observera att man vanligen ger div-elementet ett såkallat class– och/eller id-attribut. Man kan också bruka dessa två attribut med vilket annat element som helst, och man kan ge dem vilket värde som helst. Attributen är användbara av bl.a. följande orsaker:

  • class: då man gett ett element attributet class, kan man bl.a. ge elementet en avvikande layout med en skild CSS-stilmall. Eftersom div-element inte har någon förhandsinställd layout påverkar div-elementet inte heller sidans layout. Om man använder CSS-stilmallar och class-attributet kan man lätt "hämta" en layout som definieras i en CSS-stilmall åt elementet (läs mera på sidan Hur man använder stilmallar – CSS).
  • id: om man gett ett element attributet id kan man bl.a. lätt hänvisa till det elementet från andra webbsidor.

Med attributet class beskriver man alltså vilken typ av element det är fråga om, medan id fungerar som individuell identifierare för elementet. Två element får alltså inte ha samma id på samma sida.

Övriga styckeelement

Bland övriga styckeelement finns blockquote (styckecitat), table (tabell) samt pre (pre = preformatted) som visar mellanslag, radbyten och indragningar som de har skrivits. Läs mera om dessa och andra element och hur de markeras på t.ex. instruktionssidan för HTML Dog.

 

Teckenelement

Accentueringar

XHTML innehåller två olika accentueringar. Elementet em (em = emphasis) finns till för svag accentuering: vanligen visar webbläsarna em-accentueringen som kursivskrift. Litet starkare är strong som brukar visas med fet stil.

<p>
Med XHTML kan man accentuera <em>svagt</em> eller
<strong>starkt</strong>.
</p>
 

Det äldre markeringsspråket HTML innehåller också fet stil (b) och kursivering (i). Dessa element har avlägsnats från nyare versioner av XHTML.

Hyperlänkar

På de tidigare sidorna har vi redan sett på hyperlänkar, d.v.s. hänvisningar till andra webbsidor, filer eller webbadresser. En text som ska fungera som hyperlänk markeras med elementet a och målet för länken anges med attributet href. Värdet för attributet kan vara ett filnamn eller en webbadress (URL):

<p>
Detta stycke innehåller en länk till
<a href="http://www.helsinki.fi">adressen Helsinki.fi</a>.
</p>
 

Observera att det räcker med bara filnamnet om länkens mål finns i samma katalog som XHTML-sidan – i annat fall måste man också ange informationsstigen med hjälp av href-attributet. Exemplen nedan illustrerar detta: den första länken hänvisar till sidan hundar.htm i samma katalog, medan den andra länken hänvisar till sidan lägerbilder.htm som finns i underkatalogen fotografier.

<a href="hundar.htm">Hundar i mitt liv</a>
<a href="fotografier/lägerbilder.htm">Bilder från lägret 2006</a>

Forcerat radbyte

Med hjälp av radbyteselementet br kan man kapa en rubrik eller ett stycke så att det fortsätter på följande rad. Elementet kan också användas för att t.ex. placera adressuppgifter på skilda rader:

<p>
Ragnar Keskivarsen <br />
Änkefru Freytags gränd 59 B 66 <br />
00790 HELSINFORS
</p>

Observera att man helst inte ska använda forcerat radbyte: det ska inte användas för att indela texten i stycken!

Radbytet är ett tomt element, d.v.s. det har inget textinnehåll att omge med en start- och en sluttagg. Ett tomt element behöver ingen sluttagg, så man kan skriva tecknet / som betecknar slutet på ett element inom starttaggen:

<br />

Bilder

Man använder elementet img för att placera bilder på en webbsida. Elementet är ett teckenelement, och måste alltså alltid placeras innanför ett styckeelement:

<p>
<img src="dromedar.jpg" alt="En kamel med en puckel" />
</p>
 

Filnamnet eller webbaddressen för bilden anges med attributet src. En bild måste också ha en alternativ beskrivning som anges med attributet alt. Den alternativa bilden visas om webbläsaren inte kan visa bilder eller bilden inte kan laddas ner.

En bild, ett img-element, är ett tomt element som radbytet. Det har alltså inget textinnehåll. Därför skrivs också img-elementets /-tecken inom starttaggen.

Det generiska teckenelementet span

Motsvarigheten till styckeelementet div är teckenelementet span. Med det kan man markera t.ex. personer eller begrepp som inte har något eget element i texten. Med span-elementet kan man också använda attributen class och id.

<p>
Att <span class="verksamhet">göra</span> sidor är kul!
</p>

Det är vettigt att omge vissa ord eller meningar med span-elementet bl.a. om man vill ge semantiska betydelser åt meningarna i koden för en webbsida. Följande exempel illustrerar detta:

<p>
Ekorren, det söta lilla djuret, är en ofta sedd gäst på många gårdar.
Det lönar sig att vara försiktig med ekorren <span class="vetenskapligtnamn">Sciurus
vulgaris</span>, som förekommer allmänt i Finland, så den inte flyttar in hos dig!
</p>

Efter att han lärt sig om den semantiska webben deltar Ragnar i uppehållet av en wiki om Finlands natur. Det första han gör är att lägga till elementet <span class=vetenskapligtnamn> runt de vetenskapliga namnen på djur i wikin. Efter det lägger Ragnar en sökfunktion till en sida i wikin. Han ger sökfunktionen namnet "Sök efter djur som nämns i wikin på basen av deras vetenskapliga namn". Då kan användarna av wikin snabbt och enkelt söka efter information ur wikin på många olika sätt.

 

Övriga teckenelement

Övriga element som kan komma till nytta är t.ex. ins och del (infogad och raderad text), cite (citat), code (kod) samt acronym (bokstavskombination) och abbr (förkortning). Läs mera om teckenelement på den ovannämnda sidan HTML Dog.

Kommentarer

Man kan också skriva kommentarer inom XHTML-koden. De syns inte på själva webbsidan. Med kommentarerna kan man t.ex. förklara koden och hur den har använts. Ett exempel:

<!-- Här ska en bild med storlek 300x200 läggas in -->