Element, taggar och attribut

Element och taggar

Element i markeringsspråket XHTML är webbsidans "byggnadsklossar" bestående av taggar (tag). Till elementen hör både starttaggen och sluttaggen samt innehållet innanför taggarna, t.ex. en rubrik eller ett textstycke. I följande exempel av ett element är <h1> starttaggen, "My Photo Gallery" textinnehållet och </h1> sluttaggen:

    <h1>My Photo Gallery</h1>

Man använder taggen <h1> för att markera en rubrik. Observera att elementen också kan ligga innanför varandra, d.v.s. de kan innehålla andra element. Ett exempel:

<h1> <a href="gallery.htm"> My Photo Gallery </a> </h1>

Attribut

Elementen kan ha attribut som t.ex. ger webbläsaren mera information om elementen som använts. Attributen skrivs inom starttaggen för elementet, och de får alltid något värde som definieras inom citationstecken. Olika element har sina egna attribut som är individuella för varje typ av element. Vissa attribut kan ges till vilket element som helst. I följande exempel har ett bildelement bildens filnamn som attribut:

    <img src="hund.jpg" /> 

Observera att elementets start- och sluttagg har skrivits som en enda helhet genom att använda tecknet / i slutet av taggen.

Att läsa en XHTML-sida med webbläsare

Följande XHTML-exempel innehåller en huvudrubrik som markerats med elementet h1, ett textstycke som markerats med elementet p, och en länk som markerats med elementet a. Observera följande egenskaper hos XHTML, vilka också framgår i exemplet:

  • Taggarna i början och slutet av ett element skrivas alltid inom vinkelparentes d.v.s. tecknen < och >.  
  • Start- och sluttaggen är likadana, med den skillnaden att sluttaggen innehåller tecknet / före taggnamnet. 
  • Man kan ange mera information om elementen med hjälp av olika attribut. Länkmålet för elementet a, t.ex., ges med attributet href, som får webbadressen för länkens målsida som värde.
<h1>Hej världen!</h1>
<p>
Detta är ett enkelt textstycke som innehåller
<a href="http://www.helsinki.fi">en länk</a>.
</p>

XHTML-markeringen ovan syns på följande sätt i en webbläsare:

 

Lådmetaforen

Du kan göra det lättare att gestalta strukturen på markeringsspråket XHTML om du tänker dig att elementen är lådor och texten och annat innehåll på webbsidan är packat in i lådorna:

  • Elementen ordnar innehållet på webbsidan i skilda enheter, i "lådor" på varandra. 
  • Elementen med olika namn är lådor av olika typer och innehåller olika typer av information. 
  • Lådorna kan ligga inom varandra, men de kan aldrig överlappa varandra. 
  • Attributen är etiketter som man klistrar på lådorna och de innehåller instruktioner för hur man ska behandla lådorna.