På denna sida beskrivs den grundläggande strukturen för HTML-kod - dess uppbyggnad, syntax och hur man skriver koden. Kommentarers utseende beskrivs samt några rekommendationer om hur man bör skriva koden ges. Sist diskuteras hur webbläsare hanterar felaktig HTML-kod.
Tanken med HTML (Hypertext Markup Language) var att den skulle användas för att märka upp olika objekt (element - se nedan) och därmed ge innehållet i ett HTML-dokument struktur. Och för att slippa "uppfinna hjulet igen" (och därmed ha redundant data på Internet) skulle författaren av ett HTML-dokument kunna "länka" ord i texten till andra HTML-dokument där orden beskrivs. Besökaren av ett HTML-dokument skulle då, om den önskar, kunna klicka på länken för att läsa mer om ordet i det andra HTML-dokumentet.
En annan tanke med HTML var att HTML inte skulle diktera hur objekten i ett HTML-dokument skulle se ut. Utan tillverkare, eller rent av användarna, av webbläsarna skulle kunna avgöra hur de olika objekten i HTML-dokument skulle visas.
Detta är, i viss mån, även sant idag. Men tillverkare av webbläsare har (bl.a.) försökt ge HTML mer "funktion" (än standard) för att göra HTML-dokument ett mer attraktivt medium. Därför har t.ex. visuella taggar - d.v.s. taggar som inte har med dokumentets struktur att göra - för bl.a. fet och kursiv stil introducerats liksom attribut (för taggar - se nedan) som påverkar objektens utseende.
I dag strävar World Wide Web Consortium (W3C) - som standardiserar bl.a. HTML, XHTML och stilmallar (Cascading Style Sheets, CSS) - att ta bort dessa taggar och attribut från (X)HTML för att ersätta dem med andra tekniker (bl.a. CSS). Utvecklingen av HTML har dock avstannat i ett försök att ersätta den (?) med XHTML (Extensible HTML) - nästa generation av HTML. (HTML-standard version 5 är "under remiss".)
HTML-dokument, eller hemsidor som de även kallas, som är relaterade (hör ihop) brukar kallas för en webbplats (eller "webbsajt" i talspråk, eng. web site). En webbplats kan gälla alla hemsidor på en webbserver, en webbadress (t.ex. https://www.kiltedviking.net/) eller bara en samling med hemsidor på en webbserver (som t.ex. denna - Björns studiewebb).
Hemsidor består av element - t.ex. stycken, rubriker, tabeller och bilder. Denna hemsida (som du läser denna text på) består bl.a. av rubriker (i olika storlekar och färger), stycken, punktlistor, horisontella streck och länkar. De fyra första är ganska lätta att upptäcka i hemsidan. Men för själva länkarna syns endast en del av - de blåa och understrukna orden som gör att man hoppar till en annan position i detta dokument.
Element byggs upp med s.k. taggar (eng. tags) - t.ex. <p> (paragraph), <hx> (heading storlek x), <table> och <img> (image). Några av taggarna, speciellt de vanligaste (som för stycken), har förkortats för att minska HTML-kodens storlek. Taggar består av tecknen mindre än ("<") och större än (">") med elementets namn mellan - t.ex. <html>.
De flesta elementen har en öppnande tagg (t.ex. <html>) och en avslutande tagg (t.ex. </html>). Mellan den öppnande och avslutande taggen placeras elementets innehåll (om den har något). För en del element, speciellt de utan innehåll, behöver man dock inte ange den avslutande taggen. Om det är XHTML så måste dock taggarna avslutas med ett snedstreck, t.ex. <br />.
HTML-kod är inte känslig för mellanrum - mellanslag, tabbar och radbrytningar (s.k. white-spaces) - mellan taggar. Ett eller flera mellanslag, radbrytningar och/eller tabbar omvandlas till ett mellanslag när elementen visas i webbläsaren. Vissa element (t.ex. rubriker) ger automatiskt en radbrytning, med för de element som inte gör det kan man använda ett speciellt element för radbrytning (mer om radbrytningar senare). Dock får inte taggarnas namn och dess attribut (mer om attribut senare) innehålla några mellanrum. Och taggar och dess attribut måste separeras med mellanrum.
<body color="white">
<body
color="white">
<bo dy>
<bodycolor="white">
Taggar kan skrivas med både versaler och gemener, d.v.s. taggarna <HTML>, <html> och <HtMl> är alla giltiga i HTML. Man bör dock försöka vara konsekvent vad gäller skiftläge (d.v.s. hur man kombinerar gemener och versaler) för att göra koden mer lättläst. (Se Rekommendationer nedan för mer information.)
I XHTML måste man dock använda gemener för taggar.
Taggar får inte överlappa varandra, d.v.s. gå omlott. Resultatet kan då bli något helt annat än man tänkt sig i vissa webbläsare.
<tagg1>abcd<tagg2>efgh</tagg1>ijkl</tagg2>
<tagg1>abcd<tagg2>efgh</tagg2>ijkl</tagg1>
Vissa taggar får innesluta vissa andra taggar, t.ex. kan några tecken i ett stycke kan märkas upp med fet stil i ett stycke.
<p>Ord med <b>fet</b> stil</p>
Taggar kan ha attribut som t.ex. påverkar elementets utseende eller
positionering. Attributen anges då i den öppnande taggen och består
oftast av ett attributnamn=värde-par, d.v.s. attributets namn och ett
likhetstecken (=) följt av värdet för attributet. Värdet placeras inom dubbla
citattecken (t.ex. "värde").
Som exempel på hur ett attribut används så kan vi ange klass för ett stycke (något som kan användas för att applicera stilmallar, CSS).
<p class="fet">...</p>
En del attribut saknar dock värden, men då bör man använda attributets
namn, likhetstecken och namnet på attributet som värde så att koden är korrekt
i både HTML och XHTML. T.ex. så kan en kryssruta vara
förbockad som standard genom att använda attributet checked="checked" enligt
följande:
<input type="checkbox" checked="checked" />
Kommentarer bör användas för att göra hemsidor lättare att uppdatera och de har följande utseende
<!-- Text som inte visas av webbläsare -->
Kommentarer visas inte i webbläsarens fönster. Dock kan kommentarer ses i (X)HTML-koden om besökaren väljer Visa källa (eller motsvarande) för att se koden för hemsidan.
Ett användningsområde för kommentarer är att visa var informationen, i t.ex. en hemsida med komplex design (och därmed ofta komplex (X)HTML-kod), ska placeras. Därmed gör man det också lättare för webb-/informationsansvariga att uppdatera hemsidorna med ny/ändrad information.
Som standard har taggar och dess attribut skrivits med versaler. Detta har gjorts för att göra det lättare att läsa HTML-koden. Men med dagens editorer, som färgkodar koden, så är detta inte längre nödvändigt då färgerna visar vad som är taggar, attribut, värde för attribut och innehåll (i elementen).
För korrekt XHTML-kod (och XML-kod) så ska taggar och attribut skrivas med gemener.
För att stilmallar (Cascading Style Sheets, CSS) ska fungera ordentligt måste man oftast använda både den öppnande och avslutande taggen för alla element. För vissa taggar i HTML (men inte tvunget XHTML) är nämligen den avslutande taggen inte obligatorisk. Men om den avslutande taggen inte används så kan inte webbläsaren avgör var den ska börja och sluta att applicera en eventuell stilmall.
Om avslutande tagg utelämnas i XHTML så måste den öppnande (och enda) taggen avslutas med ett snedstreck, t.ex. <br />
Om hemsidorna inte är tänkta för ett intranät (d.v.s. endast inom en organisation med en webbläsare som standardprogram) så bör man koda hemsidorna så att de fungerar i webbläsare från de flesta tillverkare (åtminstone Microsoft Internet Explorer, Mozilla Firefox/SeaMonkey, Opera och Apple Safari idag - 100710).
Om detta inte är möjligt så kan man göra två (eller fler) uppsättningar av hemsidorna, d.v.s. en uppsättning för varje webbläsartyp. Man kan sen automatiskt (med t.ex. JavaScript) skicka vidare besökarens webbläsare till rätt uppsättning av hemsidor beroende på typen av besökarens webbläsare.
De flesta av dagens webbläsare är ganska "förlåtande" vad gäller felaktig (X)HTML-kod, d.v.s. webbläsare är gjorda för att hantera/förstå vissa fel i (X)HTML-kod. Resultatet av den felaktiga koden beror dock på vilken webbläsare som besökaren använder.
Webbläsare är även gjorda för att bortse från taggar och attribut de inte känner till. Detta gör att äldre webbläsare kan visa hemsidor gjorda med en nyare version av (X)HTML än vad webbläsaren var gjord för. Detta innebär att webbläsare (oftast) inte genererar ett fel om den stöter på en felstavad tagg eller attribut. Men resultatet beror, som ovan, på vilken webbläsare som besökaren använder.
Validering används för att kontrollera att (X)HTML-kod är korrekt. Om kod är korrekt så är det större chans att webbsidor visas så som man tänkte när man utvecklade webbplats.
På Internet finns ett antal valideringsprogram som kan kontrollera riktigheten i syntaxen i ett (X)HTML-dokument. Så om vi vill kontrollera (X)HTML-kodens riktighet i en av våra hemsidor så besöker vi någon av hemsidorna nedan och fyller i adressen till vår egen hemsida. Valideringsprogrammet kommer då visa eventuella fel i hemsidan.
För att valideringen ska fungera måste vi tala om för valideringsprogrammet vilken version av (X)HTML som koden innehåller. Därför lägger vi till följande rad längst upp i (X)HTML-dokument.
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Alla (X)HTML-dokument bör innehålla denna rad, men de flesta webbläsare klarar (bevisligen) av att visa hemsidorna korrekt ändå dock i, vad som kallas, quirks mode. Quirks mode anger att webbläsare ska visa webbsidor enligt tidigare icke-standard sätt, d.v.s. hur tillverkare av webbläsare tyckte det skulle se ut eller hur standard skulle tolkas.
Det finns även tillägg till Firefox som kan validera när du surfar på sidor. Själv använder jag tillägget HTML Validator (och Firebug) för detta.
Om valideringen går igenom så får du också möjlighet att placera en "ikon" på din hemsida som visar att du är duktig på HTML. :-)