HTML5 Style Guide och kodning konventioner
Bra och dålig kodning i HTML5, riktlinjer att följa.
HTML-kodning konventioner
Webbutvecklare är ofta osäkra på kodning stil och syntax för användning i
HTML.
Mellan 2000 och 2010, många webbutvecklare omvandlas från HTML till
XHTML.
Med XHTML, har utvecklarna tvungna att skriva giltiga och "välformade" kod.
HTML5 är lite mer slarvig när det gäller att koda validering.
Be Smart och framtidssäkrad
En konsekvent användning av stil, gör det lättare för andra att förstå din
HTML.
I framtiden, program som XML läsare kanske vill läsa din HTML.
Med hjälp av en väl formed- "close to XHTML" syntax kan vara smart.
alltid hålla din kod snyggt, rent och välformade.
Använd rätt dokument Typ
deklarera alltid dokumenttypen som den första raden i dokumentet:
<!DOCTYPE html>
Om du vill konsekvens med gemener taggar, kan du använda:
<!doctype html>
Använd gemener Element Names
HTML5 tillåter att blanda versaler och gemener i elementnamn.
Vi rekommenderar att du använder små elementnamn eftersom:
Blandning versala och gemena namn är dålig
Utvecklare använder normalt små namn (som i XHTML)
Gemener ser renare
Gemener är lättare att skriva
Dålig:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Väldigt dåligt:
<Section>
<p>This is a paragraph.</p>
</SECTION>
Bra:
<section>
<p>This is a paragraph.</p>
</section>
Stäng alla HTML Elements
I HTML5, behöver du inte att stänga alla element (till exempel <p> element).
Vi rekommenderar att stänga alla HTML-element.
Dålig:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Bra:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Nära tom HTML Elements
I HTML5, är det valfritt att stänga tomma element.
Tillåten:
<meta charset="utf-8">
Även tillåtet:
<meta charset="utf-8" />
Emellertid är stängnings snedstreck (/) krävs i XHTML och XML.
Om du förväntar XML programvara för att få tillgång till din sida, är det en
bra idé att hålla stängnings snedstreck!
Använd gemener attributnamn
HTML5 tillåter att blanda versaler och gemener i attributnamn.
Vi rekommenderar att du använder små attributnamn eftersom:
Blandning versala och gemena namn är dålig
Utvecklare använder normalt små namn (som i XHTML)
Gemener ser renare
Gemener är lättare att skriva
Dålig:
<div CLASS="menu">
Bra:
<div class="menu">
Citat Attribut Värden
HTML5 tillåter attributvärden utan citattecken.
Vi rekommenderar att citera attributvärden eftersom:
Blandning versala och gemena värden är dåligt
Citerade värdena är lättare att läsa
Du måste använda citat om värdet innehåller mellanslag
Väldigt dåligt:
Detta kommer inte att fungera, eftersom värdet innehåller mellanslag:
<table class=table striped>
Dålig:
<table class=striped>
Bra:
<table class="striped">
bild~~POS=TRUNC
Tillsätt alltid attributet "alt" till bilder. Detta attribut är viktigt när bilden av
någon anledning inte kan visas. Också alltid definiera bild bredd och höjd. Det
minskar flimmer eftersom webbläsaren kan reservera utrymme för bilden före
lastning.
Dålig:
<img src="html5.gif">
Bra:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Utrymmen och likhetstecken
HTML5 tillåter utrymmen runt likhetstecken. Men utrymmet mindre är lättare
att läsa, och grupper enheter bättre tillsammans.
Dålig:
<link rel = "stylesheet" href = "styles.css">
Bra:
<link rel="stylesheet" href="styles.css">
Undvika långa koden Lines
Vid användning av en HTML-redigerare, är det besvärligt att rulla åt höger
och vänster för att läsa HTML-koden.
Försök att undvika kodrader längre än 80 tecken.
Tomma rader och indrag
Inte lägga tomma rader utan anledning.
För läsbarhet, lägga till tomma rader för att separera stora eller logiska
kodblock.
För läsbarhet, lägga till två utrymmen i indrag. Använd inte fliken nyckeln.
Använd inte onödiga tomma rader och indrag. Det är inte nödvändigt att göra
ett indrag varje element:
Onödig:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo
Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial
Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Bättre:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Tabell Exempel:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Lista Exempel:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
Utelämna <html> och <body>?
I HTML5-standarden, kan <html> taggen och <body> taggen utelämnas.
Följande kod kommer att validera som HTML5:
Exempel
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Vi rekommenderar inte att utelämna <html> och <body> taggarna.
<Html> elementet är dokumentroten. Det är den rekommenderade platsen
för att ange sidan språk:
<!DOCTYPE html>
<html lang="en-US">
Deklarera ett språk är viktigt för tillgänglighets program (skärmläsare) och
sökmotorer.
Utelämna <html> eller <body> kan krascha DOM och XML programvara.
Utelämna <body> kan orsaka fel i äldre webbläsare (IE9).
Utelämna <head>?
I HTML5-standarden, kan <head> taggen också utelämnas.
Som standard kommer webbläsare lägga till alla delar före <body>, till en
standard <head> -element.
Du kan minska komplexiteten i HTML, genom att utelämna <head> taggen:
Exempel
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Vi rekommenderar inte utelämna <head> taggen.
Utelämna taggar är främmande för webbutvecklare. Det behöver tid för att
etableras som en riktlinje.
metadata
<Title> element krävs i HTML5. Gör titeln så meningsfull som möjligt:
<title>HTML5 Syntax and Coding Style</title>
För att säkerställa korrekt tolkning och korrekt indexering i sökmotorer, både
språket och teckenkodning bör definieras så tidigt som möjligt i ett
dokument:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>
HTML-kommentarer
Korta kommentarer ska skrivas på en rad, så här:
<!-- This is a comment -->
Kommentarer som omfattar mer än en rad, bör skrivas så här:
<!-This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
Långa kommentarer är lättare att observera om de är indragna två
utrymmen.
Style Sheets
Använd enkel syntax för att länka till formatmallar (attributtypen behövs
inte):
<link rel="stylesheet" href="styles.css">
Korta regler kan skrivas komprimeras på en rad, så här:
p.intro {font-family: Verdana; font-size: 16em;}
Långa regler ska skrivas över flera rader:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Placera öppningen fästet på samma linje som väljaren
Använd ett utrymme före öppnandet fästet
Använd två utrymmen i indrag
Använd semikolon efter varje fastighets värdepar, inklusive den sista
Använd endast citattecken runt värdena om värdet innehåller
mellanslag
Placera stängning fästet på en ny linje, utan inledande blank
Undvik linjer över 80 tecken
Laddar JavaScript i HTML
Använd enkel syntax för lastning externa skript (attributtypen behövs inte):
<script src="myscript.js">
Åtkomst HTML-element med JavaScript
En konsekvens av att använda "stökigt" HTML-format, kan resultera i
JavaScript-fel.
Dessa två JavaScript uttalanden ger olika resultat:
Exempel
var obj = getElementById("Demo")
var obj = getElementById("demo")
Använd gemener (små bokstäver) filnamn
Vissa webbservrar (Apache, Unix) är skiftlägeskänsliga om filnamn:
"london.jpg" kan inte nås som "London.jpg".
Andra webbservrar (Microsoft, IIS) är inte skiftlägeskänsliga: "london.jpg"
kan nås som "London.jpg" eller "london.jpg".
Om du använder en blandning av stora och små bokstäver, måste man vara
extremt konsekvent.
Om du flyttar från ett fall okänslig för ett fall känslig server, kommer även
små fel bryta din webbsida!
För att undvika dessa problem, alltid använda gemener filnamn.
filändelser
HTML-filer bör ha en .html eller htm förlängning.
CSS-filer bör ha en .css förlängning.
JavaScript-filer bör ha en .js förlängning.
Skillnader mellan .htm och .html
Det finns ingen skillnad mellan .htm och .html förlängningar. Båda kommer
att behandlas som HTML genom en webbläsare eller webbserver.
Skillnaderna är kulturellt:
.htm "sniffar" av tidiga DOS-system där systemet begränsade
förlängningarna till 3 tecken.
.html "sniffar" av Unix-operativsystem som inte har denna begränsning.
tekniska skillnader
När en URL inte anger ett filnamn (som http://www.w3schools.com/css/),
returnerar servern ett standard filnamn. Vanliga standard filnamn är
index.html, index.htm, default.html och default.htm.
Om servern är konfigurerad endast med "index.html" som standard filnamn,
måste filen ha namnet "index.html", inte "index.htm".
Däremot kan servrar konfigureras med mer än en standard filnamn, och
normalt kan du ställa in så många standard filnamn som behövs.
Hur som helst, är det full utsträckning för HTML-filer html, och det finns ingen
anledning bör det inte användas.
