Artikel: HTML - vad är det

HTML är ett sidbeskrivningsspråk, som uppfanns av Tim Berners-Lee. Tack vare tekniker som DNS och HTTP, så kunde man skriva ett enkelt märkspråk som kunde koppla ihop ett dokument med andra. Vi kallar dessa kopplingar för länkar. HTML i sig utläses Hyper Text Markup Language. Hyper Text i namnet står alltså för förmågan att länka, eftersom hypertext är i princip ett annat ord för länkning. Markup betyder uppmärkning och det görs med speciella taggar.

Dokumentets grundläggande delar

Ett HTML-dokument är i grund och botten ett textdokument. Det som skiljer det från andra textdokument är taggarna. Med hjälp av dessa taggar kan man dela in dokumentet i tre delar:

Först skall man ha en så kallad doctype. Med den kan både människor och datorprogram se vilken version av HTML det rör sig om. I strikt teknisk mening är doctypen inte en del av HTML-koden, utan en instruktion som föregår den. Lägg ordet på minnet, men strunta i dess betydelse tills vidare. Minns bara att man skall ha en doctype först.
HTML-kodens första del är dokumenthuvudet. Det som står i huvudet kommer inte direkt att visas i webbläsarens fönster, men kan påverka hur visningen kommer att gå till och se ut. En tagg är obligatorisk, nämligen taggen <title>. Det som anges där kommer att dyka upp på webbläsarens namnlist, den vanligtvis blå raden ovanför menyerna. Taggen <head> påbörjar huvudet, men den föregås av taggen <html>, som tillsammans med sin sluttagg ringar in hela dokumentet. Dokumentets huvudsakliga språk bör anges som ett attribut på den inledande html-taggen.
Större delen av ett HTML-dokument utgörs normalt av dess kropp. Denna anges med taggen <body>.

Nu kan vi med våra fyra taggar (<html>, <head>, <title> och <body>) göra ett minimalt HTML-dokument. Några saker du kommer se i koden nedan är ännu inte förklarade. Vill du testa själv, så skriv bara av dem så länge. De förklaras längre fram.

Ett minimalt dokument (HTML5)

I tekniskt strikt mening är detta minsta möjliga dokument, men det är knappast användbart.


<!DOCTYPE html>
<title>Ett tomt dokument</title>

I praktiken ser ett minimalt dokument ut så här:


<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Ett tomt dokument</title>
  </head>
  <body>
  </body>
</html>

Skulle du titta på detta dokument i en webbläsare blir det bara vitt. På namnlisten kommer det stå Ett tomt dokument, men annars har vi inte gjort något som syns ännu. Låt oss därför lägga till några taggar till. Här kommer några taggar till som vi kan komma igång med:

<h1> som är dokumentets huvudrubrik.
<h2> som är därpå följande underrubriker.
<h3> som följaktligen blir ytterligare en rubriknivå ner i hierarkin. Vi pratar alltså inte om den tredje rubriken, utan den tredje nivån på rubriker.
<p> som anger stycken (eng: paragraph).

Låt oss nu ge vårt dokument lite innehåll!


<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Ett ej längre tomt dokument</title>
  </head>
  <body>
    <h1>Hipp hurra, ett dokument ida!</h1>
    <p>
      Detta är måhända det första dokument jag testat att göra, men
      något skall det innehålla och här skriver jag det.
      Tjosan, hejsan, o.s.v.
    </p>
    <p>
      Här kommer det andra stycket. I denna HTML-kod finns det
      också indrag i koden som markerar vilka delar som hör ihop.
      De påverkar inte funktionen i sig, utan gör bara koden lättare
      att läsa. Tag för vana att alltid skapa indrag i din kod. Två
      blanksteg per nivå, som här, brukar vara lagom.
    </p>
    <h2>ännu mera info här</h2>
    <p>
      Där kom alltså underrubriken, och detta är ett nytt stycke. Så värst
      mycket mer orkar jag dock inte skriva nu. Här blev det därför slut.
    </p>
  </body>
</html>

Vill du testa att göra ett doument själv så starta anteckningar och kopiera koden ovan. Spara det du skrivit med ändelsen html och se till att Windows (om du använder det) inte själv lägger på .txt. jag har sett åtskilliga nybörjare vars dokument heter saker i stil med foobar.html.txt. än så länge ser vårt dokument också väldigt tråkigt ut. Nybörjare ställer därför snabbt frågor som:

Hur kan jag byta typsnitt och/eller ändra färg och storleken på texten?
Hur kan jag få en annan bakgrundsfärg eller en bakgrundsbild?
Hur kan man centrera texten?

Just här skall du tacka din lyckliga stjärna att du läser min webbskola och ingen annan ;-) Allt för många nybörjarkurser börjar nämligen redan nu introducera taggar och andra delar av HTML-koden som kan användas för att styra just dessa saker. Men detta är inte frågor som handlar om innehåll, utan om utseende. Utseendet skall inte styras med HTML över huvud taget. En gång i tiden gjorde man det, men det var dumt och vi som jobbar med webbteknik har alla fått lida för denna dumhet. Utseende skall styras med CSS och du får ge dig till tåls.

Attribut och element

Det som vi hittills kallat taggar kallar de mer bevandrade för element. En tagg är vad som startar och avslutar ett element. Det kallas för start-tagg respektive slut-tagg. Ett elementet är: start-tagg + innehåll (inklusive ev. andra element) + slut-tagg.

Somliga saker vill vi kunna berätta om det som visas och till det har vi bland annat attribut. Attribut skrivs i start-taggen och i texten ovan hade vi följande exempel på attribut:

lang="sv"
charset="utf-8"

Skriv alltid attribut så här: attributnamn="attributvärde". Du bör alltid ha citationstecken runt attributvärdet. I somliga versioner av HTML är det inte en lag, men det är ändå en god vana. Som lärare har jag gång efter annan sett hur problem uppstår när nybörjare inte använder citationstecknen.

Det kan finnas ett undantag till denna regel och det är när man använder attribut som bara kan ha ett enda värde. Följande exempel fungerar alla exakt likadant:

<input required="required" … />
<input required="" … />
<input required … />

I detta fall kan man med fördel använda det nedersta sättet, dvs. skriva attributet utan något värde alls. Det förklarar också varför man i normala fall alltid bör ha citationstecknen runt attributvärdena. Tänk att någon velat skriva följande detta:

<p class="foo bar">

Om man glömmer citationstecknen kommer detta tolkas så här av webbläsaren:

<p class="foo" bar="bar">

Det som var tänkt som en del av attributvärdet har nu blivit ett annat attribut. Det finns en version av HTML, XHTML där man måste man ha citationstecken runt attributvärdet. I XHTML är det inte heller tillåtet att skriva kortformen av ett attribut, dvs. helt utan värde.

Attributet lang

Attributet lang anger vilket (mänskligt) språk sidan har. Här är det roligt (eller snarare sorgligt) att se nybörjare som kopierar andras kod från nätet och anger lang="en" trots att deras dokumement är på svenska (eller tyska eller danska eller..)

Tomma element

I koden ovan fanns elementet meta. Du kanske lade märke till att det inte hade en separat avslutningstagg. Detta element kan nämligen inte ha något annat slags innehåll än attribut. Elementet används här för att ange teckenkodning och informationen används av webbläsarna när de läser in sidorna lokalt från datorns filsystem. Meta-elementet kan användas på fler sätt, men de lämnar vi därhän tills vidare.

Några andra exempel på tomma element är:

br: Betyder break och skapar en ny rad. Kan användas för exempelvis poesi, men bör normalt undvikas.
hr: Betyder horizontal rule och användes i webbens barndom för att tematiskt avskilja delar av en längre sida. Elementet behövs knappt längre. Den visuella effekten bör skapas med CSS.
input: Element för att skapa inmatningsfält i formulär.
link: Anger en relaterad resurs, till exempel en stilmall, en favicon eller ett RSS-flöde.

Ett sätt att uttrycka detta är att tomma element stänger sig själva, åtminstone i vanlig HTML. Längre fram skall vi titta på XHTML där reglerna är annorlunda.

Implicit stängning av element

En slut-tagg är en uttrycklig (explicit) åtgärd. I HTML kan det också finnas element som stängs av ett annat elements start-tagg. Här följer ett exempel, där en utvecklare felaktigt trott att man kan ha listor inuti stycken, men vet att man kan låta bli att avsluta de enstaka punkterna (list items = <li>) inuti listan.


<p>
  Hälsningsfraser:
  <ul>
    <li>Hej
    <li>God dag
    <li>Tjenare
  </ul>
</p>

Vad som händer här är att listans start-tagg <ul> avslutar stycket. Det är som om webbläsaren tolkar koden ungefär så här:


<p>
  Hälsningsfraser:
</p>
<ul>
  <li>Hej
  <li>God dag</li>
  <li>Tjenare</li>
</ul>

Lägg märke till att p-slut-taggen flyttats upp. Stycken kan inte innehålla listor, så när listan påbörjas så avslutas stycket. Varje enskild punkt i listan avslutas av nästkommande punkt, eller av att listan i sig avslutas. Detta kallas för implicit (underförstådd) avslutning av element.

Reglerna för vad som avslutas implicit och inte är inte helt lätta att lära sig. Några självklara fall finns, men också betydligt svårare. Lägg därtill att webbläsarna inte alltid (än så länge) har identiska regler för när implicit stängning skall ske, så blir det än svårare. Av detta skäl uppmanar jag alltid till att stänga varje element explicit! När man sedan validerar sin kod, så kommer felaktigt placerade avslutningstaggar att ge ifrån sig fel. Ovanstående exempel resulterar enligt HTML5 validatorn i felet No p element in scope but a p end tag seen. På svenska betyder det att det finns en avslutnings-p-tagg, men den tillhör inget p-element. Det avslutades ju högre upp!

Implicit skapade element

Testa följande:


<!DOCTYPE html>
<title>Test av implicit skapade element</title>
<style>
html {
    color: red;
}
body {
    font-size: xx-large;
}
</style>
<p>Hej</p>

Trots att vi varken skrivit ut html-taggar eller body-taggar, så fungerar CSS-koden. Texten kommer bli mycket stor och röd. Stycket (p-elementet) ärver färgen och storleken från html- och body-elementen. Dessa finns alltså, fast de inte skrivits ut i koden. De är implicita i HTML (men inte i XHTML, som vi kommer till längre fram.) Koden ovan är alltså helt funktionellt likvärdig med denna:


<!DOCTYPE html>
<html>
  <head>
    <title>Test av implicit skapade element</title>
    <style>
      html {
          color: red;
      }
      body {
          font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <p>Hej</p>
  </body>
</html>

Precis som med implicit avslutade element, så är det inte helt lätt att veta när element har skapats implicit. Därför rekommenderar jag inte att man förlitar sig på detta, speciellt inte som nybörjare. Det finns ett antal experter som fixar och trixar med sin HTML-kod så att den blir extremt minimal, men besparingarna är sällan så stora att detta spelar någon praktisk roll. Skriv ut allt och undvik fel. Det är en regel som minimerar dina verkliga bekymmer!

Entiteter

Taggar i HTML börjas med tecknet < och avslutas med >, men hur gör man om man vill använda dessa tecken till annat? Om jag vill säga att 3 är större än 4 eller om jag vill skriva HTML-kod så att den syns? Svaret är entiteter. < skrivs som < och > skrivs som <.

En entitet börjar alltså med tecknet & och slutar med ett semikolon. Eftersom tecknet & har denna speciella betydelse, så måste det skrivas som en entitet när man vill använda det som en del av den vanliga texten. Entiteten för & är & som kommer från det engelska ordet ampersand.

Onödiga entiteter

I webbens absoluta barndom kunde man inte skriva å, ä och ö, utan att använda entiteter.

Entiteten för å: å = a med en ring.
Entiteten för ä: ä = a med umlaut, på svenska kallat trema.
Entiteten för ö: ö = o med umlaut.

Att använda dessa är idag helt onödigt. Sedan åtminstone 1993 stödjer alla webbläsare teckenkodningar som innehåller våra svenska tecken.

Den enda ytterligare entitet man normalt behöver använda är " som motsvarar citationstecknet ". Det kan användas när man skriver datakod, som i denna HTML-skola. För riktiga citat finns det däremot regelrätta element: <q> för korta citat och <blockquote> för långa citat.

För den som vill gräva ner sig i detaljerna runt entiteter finns det gott om resurser på nätet. Det som jag skrivit här räcker dock riktigt långt. Det är långt viktigare att man som nybörjare lär sig att hantera teckenkodningar. Med rätt vald teckenkodning kan man skriva vilket tecken man vill, och på det viset blir alla andra entiteter utom de ovan nämnda helt onödiga.

Vilken slags HTML?

Alldeles nyss så infördes begreppet XHTML. Det är ju så att webben utvecklas i en rasande fart och den HTML-kod som var bra för fem år sedan är förlegad idag. Vi kan något förenklat tala om fyra generationer (X)HTML:

HTML 3.2, som fastslogs 14 januari 1997.
HTML 4.01, som fastslogs 24 januari 1999
XHTML 1.0 och XHTML 1.1, som fastslogs 26 januari 2000 respektive 31 maj 2001.
XHTML 2.0, tänkt att ersätta all gammal kod, men av olika skäl blev detta en flopp och standarden är i princip död.
(X)HTML5 håller på att utarbetas och innebär en kraftig utökning av vad man kan göra med HTML, med betoning på applikationer och inte bara statiska dokument.

Någon kanske undrar vad som fanns före HTML 3.2 och svaret är att fram till dess hade inga standarder fått något egentligt genomslag. Varför 4.01 och inte HTML 4.0? Det fanns en 4.0, men den innehöll några buggar och kan enklast läggas i glömskans kammare.

Vilken slags HTML man använder sig av skall anges med hjälp av dokumentets doctype. Använder man sig av någon slags XHTML, så skall man också ange dokumentets namnrymd. Namnrymder är än så länge att betrakta som överkurs och skulle du glömma att ange den kommer dokumentet fortfarande fungera oklanderligt. Du kan dock nöta in en dålig vana och vill du fördjupa dig i webbteknik kommer den att straffa sig längre fram. Du behöver alltså inte veta vad en namnrymd är ännu, kom bara ihåg att de skall anges i XHTML!

Sammanfattning

Vi har alltså konstaterat att en hemsida består av tre delar: doctype, head och body. Dokumentet märks upp med det som i dagligt tal kallas taggar. Man kan också uttrycka det så att dokumentet utgörs av element. Element kan ha attribut, vilka skrivs inuti start-taggen enligt formeln attributnamn="attributvärde". Från början var HTML inte ämnat att innehålla information om hur innehållet skulle presenteras rent visuellt. Efter hand uppstod det både speciella element och attribut vars syfte var att styra designen. I modern kodning skall man undvika sådana taggar och sådana attribut. Det jobbet lämnas över till CSS-koden i stället.

Innan vi lär oss mer (X)HTML, så måste vi bestämma oss för vilken slags (X)HTML vi bör välja. Näst-nästa kapitel förklarar skillnaderna mellan HTML 4.01 och XHTML, samt deras respektive undergrupper. Kapitlet som nu följer kommer att berätta för dig hur man kan se skillnad på välskriven HTML-kod och illa skriven dito.

Publicerad:	2005-05-10 13:27	Författare:	itpastorn
Uppdaterad:	2010-08-01 10:16	Ämne:	Webbteknik