HTML -stijlgids
Een consistente, schone en opgeruimde HTML-code maakt het voor anderen gemakkelijker om uw code te lezen en te begrijpen.
Hier zijn enkele richtlijnen en tips voor het maken van goede HTML-code.
Documenttype altijd aangeven
Declareer altijd het documenttype als de eerste regel in uw document.
Het juiste documenttype voor HTML is:
<!DOCTYPE html>
Elementnamen in kleine letters gebruiken
HTML maakt het mogelijk om hoofdletters en kleine letters in elementnamen te mengen.
We raden echter aan om elementnamen in kleine letters te gebruiken, omdat:
- Het mengen van namen in hoofdletters en kleine letters ziet er slecht uit
- Ontwikkelaars gebruiken normaal gesproken namen in kleine letters
- Kleine letters zien er schoner uit
- Kleine letters zijn gemakkelijker te schrijven
Goed:
<body>
<p>This is a paragraph.</p>
</body>Slechte:
<BODY>
<P>This is a paragraph.</P>
</BODY>Sluit alle HTML-elementen
In HTML hoef je niet alle elementen te sluiten (bijvoorbeeld het <p>element).
We raden u echter ten zeerste aan om alle HTML-elementen als volgt te sluiten:
Goed:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Slechte:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Kenmerknamen in kleine letters gebruiken
HTML maakt het mogelijk om hoofdletters en kleine letters in attribuutnamen te mengen.
We raden u echter aan om kenmerknamen in kleine letters te gebruiken, omdat:
- Het mengen van namen in hoofdletters en kleine letters ziet er slecht uit
- Ontwikkelaars gebruiken normaal gesproken namen in kleine letters
- Kleine letters zien er schoner uit
- Kleine letters zijn gemakkelijker te schrijven
Goed:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Slechte:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Attribuutwaarden altijd citeren
HTML staat attribuutwaarden toe zonder aanhalingstekens.
We raden u echter aan om kenmerkwaarden te citeren, omdat:
- Ontwikkelaars citeren normaal gesproken attribuutwaarden
- Geciteerde waarden zijn gemakkelijker te lezen
- U MOET aanhalingstekens gebruiken als de waarde spaties bevat
Goed:
<table
class="striped">Slechte:
<table class=striped>Heel slecht:
Dit werkt niet, omdat de waarde spaties bevat:
<table class=table striped>Geef altijd alt, breedte en hoogte op voor afbeeldingen
Geef altijd het altattribuut voor afbeeldingen op. Dit kenmerk is belangrijk als de afbeelding om de een of andere reden niet kan worden weergegeven.
Definieer ook altijd de widthen
heightvan afbeeldingen. Dit vermindert het flikkeren, omdat de browser ruimte kan reserveren voor de afbeelding voordat deze wordt geladen.
Goed:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Slechte:
<img
src="html5.gif">Spaties en gelijktekens
HTML staat spaties rond gelijktekens toe. Maar ruimteloos is gemakkelijker te lezen en groepeert entiteiten beter bij elkaar.
Goed:
<link rel="stylesheet" href="styles.css">Slechte:
<link
rel = "stylesheet" href = "styles.css">Vermijd lange coderegels
Bij gebruik van een HTML-editor is het NIET handig om naar rechts en links te scrollen om de HTML-code te lezen.
Probeer te lange coderegels te vermijden.
Blanco regels en inspringing
Voeg geen lege regels, spaties of inspringingen toe zonder een reden.
Voeg voor de leesbaarheid lege regels toe om grote of logische codeblokken te scheiden.
Voeg voor de leesbaarheid twee inspringingsspaties toe. Gebruik niet de tab-toets.
Goed:
<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>
Slechte:
<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>
Goed tafelvoorbeeld:
<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>
Voorbeeld van een goede lijst:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Sla nooit het <title>-element over
Het <title>element is vereist in HTML.
De inhoud van een paginatitel is erg belangrijk voor zoekmachine optimalisatie (SEO)! De paginatitel wordt gebruikt door algoritmen van zoekmachines om de volgorde te bepalen bij het weergeven van pagina's in zoekresultaten.
Het <title>element:
- definieert een titel in de browserwerkbalk
- biedt een titel voor de pagina wanneer deze wordt toegevoegd aan favorieten
- geeft een titel voor de pagina weer in zoekresultaten van zoekmachines
Probeer dus de titel zo nauwkeurig en zinvol mogelijk te maken:
<title>HTML
Style Guide and Coding Conventions</title>
<html> en <body> weglaten?
Een HTML-pagina valideert zonder de <html>en
<body>tags:
Voorbeeld
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
We raden u echter ten zeerste aan om altijd de <html>en
<body>tags toe te voegen!
Weglaten <body>kan fouten veroorzaken in oudere browsers.
Weglaten <html>en <body>
kan ook DOM- en XML-software laten crashen.
<head> weglaten?
De HTML <head>-tag kan ook worden weggelaten.
Browsers zullen alle elementen vóór toevoegen <body>aan een standaardelement <head>
.
Voorbeeld
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
We raden u echter aan de <head>tag te gebruiken.
Lege HTML-elementen sluiten?
In HTML is het optioneel om lege elementen te sluiten.
Toegestaan:
<meta
charset="utf-8">
Ook toegestaan:
<meta charset="utf-8" />
Als u verwacht dat XML/XHTML-software toegang krijgt tot uw pagina, laat u de afsluitende slash (/) staan, omdat deze vereist is in XML en XHTML.
Voeg het kenmerk lang toe
U moet het langattribuut altijd in de <html>tag opnemen om de taal van de webpagina aan te geven. Dit is bedoeld om zoekmachines en browsers te helpen.
Voorbeeld
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Metagegevens
Om een juiste interpretatie en correcte indexering van de zoekmachine te garanderen, moeten zowel de taal als de tekencodering zo vroeg mogelijk in een HTML-document worden gedefinieerd:<meta charset="charset">
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Het kijkvenster instellen
De viewport is het zichtbare gedeelte van een webpagina voor de gebruiker. Het varieert met het apparaat - het zal kleiner zijn op een mobiele telefoon dan op een computerscherm.
U moet het volgende <meta>element in al uw webpagina's opnemen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dit geeft de browser instructies over hoe de afmetingen en schaal van de pagina te bepalen.
Het width=device-widthonderdeel stelt de breedte van de pagina in om de schermbreedte van het apparaat te volgen (dit is afhankelijk van het apparaat).
Het initial-scale=1.0onderdeel stelt het initiële zoomniveau in wanneer de pagina voor het eerst door de browser wordt geladen.
Hier is een voorbeeld van een webpagina zonder de viewport-metatag en dezelfde webpagina met de viewport-metatag:
Tip: Als u deze pagina bekijkt met een telefoon of tablet, kunt u op de twee onderstaande links klikken om het verschil te zien.
HTML-opmerkingen
Korte opmerkingen moeten op één regel worden geschreven, zoals deze:
<!-- This is a comment -->
Opmerkingen die meer dan één regel beslaan, moeten als volgt worden geschreven:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
Lange opmerkingen zijn gemakkelijker te observeren als ze zijn ingesprongen met twee spaties.
Stijlbladen gebruiken
Use simple syntax for linking to style sheets (the
type attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.