När HTML-standarden XHTML (X:et står för eXtensible och XHTML var en kombinationsstandard mellan HTML & XML) kom så följde även strikta och bra kodningspraktiker med från XML.
På följande länk kan mer i detalj ses vilka skillnader det blev mellan HTML 4.01 och tillkommandet av XHTML 1.0, och XHTML’s nya kodningsprinciper är betydligt bättre (tycker jag själv) att följa vid kodandet av HTML: http://www.w3.org/TR/xhtml1/#diffs – De bidrar med renare, striktare och professionellare HTML-kod! Detta är även varför jag kommer följa dessa vid egna kodexempel.
Små bokstäver för alla taggar
XHTML kräver att ALL HTML-kod skall vara med små bokstäver (gemener)!
<table> <- Korrekt
<TABLE> <- Fel
<TaBle> <- Fel
Avsluta taggar i korrekt ordning
Taggar skall avslutas i rätt ordning – t ex. om du startar en paragraf-tagg och inuti den har en span-tagg, så måste span-taggen avslutas först, och sist paragraf-taggen.
<p><b>fisk</b></p> <- Korrekt ordning <b><p>fisk</b></p> <- Fel ordning - se byte av plats på </b> och </p> t ex.
Stäng alla taggar som öppnas
XHTML kräver även att alla taggar som öppnas, måste stängas! Vilket betyder att ensamstående taggar måste avslutas på följande vis: <br /> med ett mellanrum och ett snedstreck innan ”större-än”- tecknet. XHTML krävde även att ALLA attribut-värden skulle omslutas med citationstecken.
<hr /> <- Korrekt <hr> <- Fel --------------------------------------------------------------------------------- <header> <img src="" width="" height="" alt="" /> <nav></nav> -------- <- Notera hur här saknas </header> avslutningstaggen för <header> t ex. <article></article> <footer></footer> <header> <img src="" width="" height="" alt="" /> <nav></nav> </header> <- Notera hur FINNS avslutningstaggen för <header> jmft. med ovan exempel där den saknades. <article></article> <footer></footer>
Indentering för ökad läsbarhet och bättre kodningsstruktur
En personlig preferens som man sen kan avgöra om man vill använda sig av eller inte- är användandet av s.k. ”indentering”, som jag snappat upp från programmeringen. Indentering innebär att man skapar en ”hierarkisk frånskjutningsstruktur” från vänster i koddokumentet utefter hur element (eller kod i allmänhet) är nästlad och hör ihop, så man ser vilken kod som hör till var. Se exempel nedan:
<första-tagg>
<första-tagg-sub-tagg>
lite text…
</första-tagg-sub-tagg>
</första-tagg>
Med ovan exempel kan vi se att följande kodblock tillhör <första-tagg> taggblocket:
<första-tagg-sub-tagg> lite text... </första-tagg-sub-tagg>
camelCase för bättre och lättläsligare namngivning i kod
En annan personlig preferens- även denne hämtad från programmeringen, är något som kallas för ”camelCase”, och för er som ännu inte stött på detta är det konsten att skriva lättlästa beskrivande/deskriptiva namn för t ex. variabler och annat genom att börja första ordet med liten bokstav, därefter följer varje nytt ord efter första med en stor första bokstav! Se nedan exempel på variabelnamn med camelCase:
enVariabelSomHeterDuga
secondVariableToUse
thirdVariableToUse
Väldigt användbart och proffsigt ;)
Kommentarer för dokumentation och information av vad ens kod gör
Kommentarer i HTML är ytterligare en väldigt viktig del som hjälper utvecklare att dokumentera sin kod, såväl som informera övriga utvecklare om vad specifika delar i koden fyller för funktion.
Där finns bara en typ av HTML-kommentar som gäller för både enskilda, såväl som flera rader med text, medan t ex. i vissa programmeringsspråk så finns där olika typer av kommentarer för utifall kommentaren sträcker sig över en, eller flera rader.
HTML-kommentaren ser ut som följer:
<!– Kommentarstexten här –>
Som ni då ser ovan så inleds en HTML-kommentar med <!–, och avslutas med –>.
Emellan starten av kommentaren och slutet av kommentaren så skrivs då kommentarstexten, och denne kan sträcka sig över enstaka rader, såväl som flertalet rader, så länge den är emellan starten och slutet av HTML-kommentaren.
Vad dessa start- och sluttecken i princip gör- är att meddela webbläsaren att ignorera vad som än som står mellan dessa tecken. Då kommentarer egentligen är innehåll som skall ignoreras av webbläsaren när den tolkar din webbsida och dess kod för att sen presentera för sidans besökare.