HTML(5) Stijlgidsen Code Conventies

HTML-codeconventies

Webontwikkelaars zijn vaak onzeker over de code-stijl en syntaxis die ze in HTML gebruiken.

Tussen 2000 en 2010 zijn veel webontwikkelaars van HTML naar XHTML overgegaan.

Met XHTML moesten ontwikkelaars effectieve 'goed geformatteerde' code schrijven.

HTML5 is wat losser bij het valideren van code.

Met HTML5 moet u eigenlijk uw eigenBest practices, stijlgidsen en code-afspraken.

Intelligent en met toekomstige garantie

Het logische gebruik van stijlen maakt het voor anderen gemakkelijker om uw HTML te begrijpen en te gebruiken.

In de toekomst zullen programma's zoals XML-lezers mogelijk uw HTML moeten kunnen lezen.

Gebruik een goed geformatteerde, 'nagenoeg XHTML'-achtige syntax, wat intelligenter is.

Opmerking:Houd uw stijlen intelligent, netjes, puur en goed geformatteerd.

Gebruik de juiste documenttype

Zorg ervoor dat u de documenttype-declaratie altijd op de eerste regel van het document vermeldt:

<!DOCTYPE html>

Als u consistent kleine tags gebruikt, kunt u:

<!doctype html>

Gebruik kleine letters voor elementnamen

HTML5 staat het gebruik van gemengde hoofd- en kleine letters in elementnamen toe.

We bevelen aan om kleine letters te gebruiken voor elementnamen:

  • Mengde hoofdlettergebruik is niet goed
  • Ontwikkelaars hebben de gewoonte om kleine letters te gebruiken voor namen (bijvoorbeeld in XHTML)
  • Kleine letters zijn cleaner
  • Kleine letters zijn gemakkelijker te schrijven

Niet zo goed:

<SECTION> 
  <p>Dit is een paragraaf.</p>
</SECTION>

Heel slecht:

<Section> 
  <p>Dit is een paragraaf.</p>
</SECTION>

Niet slecht:

<section> 
  <p>Dit is een paragraaf.</p>
</section>

Sluit alle HTML-elementen

In HTML5 hoeft u niet alle elementen te sluiten (bijvoorbeeld het <p>-element).

We raden aan om alle HTML-elementen te sluiten:

It looks bad:

<section>
  <p>Dit is een paragraaf.
  <p>Dit is een paragraaf.
</section>

It looks good:

<section>
  <p>Dit is een paragraaf.</p>
  <p>Dit is een paragraaf.</p>
</section>

Closing empty HTML elements

In HTML5, closing empty elements is optional.

It is allowed to be like this:

<meta charset="utf-8">

It is also allowed to be like this:

<meta charset="utf-8" />

The slash (/) is required in XHTML and XML.

If you expect XML software to access your page, it is a good idea to maintain this habit.

Use lowercase attribute names

HTML5 allows mixed-case attribute names.

We recommend using lowercase attribute names:

  • Mixed attribute names are not good
  • Developers are accustomed to using lowercase attribute names (such as in XHTML)
  • Lowercase attribute names are cleaner when used appropriately
  • Lowercase attribute names are easier to write

It looks bad:

<div CLASS="menu">

It looks good:

<div class="menu">

Quoted attribute values

HTML5 allows attribute values without quotes.

We recommend that attribute values be quoted:

  • If the attribute value contains a value, it must be quoted
  • Mixed styles are absolutely bad
  • Quoted values are easier to read

This attribute value is invalid because it contains spaces:

<table class=table striped>

This is valid:

<table class="table striped">

Required attributes

Always use for images alt Attributes. This attribute is important when the image cannot be displayed.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Always define image dimensions. This will reduce flickering because the browser will reserve space for the image before it loads.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces and equal signs

Spaces on both sides of the equal sign are legal:

<link rel = "stylesheet" href = "styles.css">

But concise spacing is easier to read, But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

Avoid long code lines

It is very inconvenient to read HTML code by scrolling left and right when using an HTML editor.

Please try to avoid code lines exceeding 80 characters.

Blank lines and indentation

Do not add blank lines without reason.

To improve readability, please add blank lines to separate large or logical code blocks.

To improve readability, please increase indentation by two spaces. Do not use TAB.

Please do not use unnecessary blank lines and indentation.

Noodzakelijk:

<body>
  <h1>Bekende Steden</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo is de hoofdstad van Japan, het centrum van de Grote Tokyo-regio,
    en de meest bevolkte stedelijke regio ter wereld.
    Het is de zetel van de Japanse overheid en het keizerlijk paleis,
    en de thuisbasis van de Japanse keizerlijke familie.
  </p>
</body>

Beter:

<body>
<h1>Bekende Steden</h1>
<h2>Tokyo</h2>
<p>
Tokyo is de hoofdstad van Japan, het centrum van de Grote Tokyo-regio,
en de meest bevolkte stedelijke regio ter wereld.
Het is de zetel van de Japanse overheid en het keizerlijk paleis,
en de thuisbasis van de Japanse keizerlijke familie.
</p>
</body>

Tabel voorbeeld:

<table>
  <tr>
    <thNaam</th>
    <th>Beschrijving</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Beschrijving van A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Beschrijving van B</td>
  <tr>
</table>

Lijst voorbeeld:

<ol>
  <li>LondenA</li>
  <li>Parijs</li>
  <li>Tokyo</li>
</ol>

Over het overslaan van <html> en <body>?

In de HTML5-norm kunnen de <html> en <body>-tags worden overgeslagen.

Het volgende code als HTML5 valideren:

Voorbeeld

<!DOCTYPE html>
<head>
  <title>Pagina Titel</title>
</head>
<h1>Dit is een titel.</h1>
<p>Dit is een paragraaf.</p>

Probeer het zelf uit

We raden het overslaan van de <html> en <body>-tags af.

Het <html>-element is de wortelelement van de tekst. Het is het ideale plekje om de taal van de pagina te specificeren.

<!DOCTYPE html>
<html lang="en-US">

Voor toegankelijke toepassingen (schermlezers) en zoekmachines is het verklaren van de taal belangrijk.

Het overslaan van <html> of <body> kan de DOM- en XML-software laten crashen.

Het overslaan van <body> kan fouten veroorzaken in oudere browsers (IE9).

Over het overslaan van <head>?

In de HTML5-norm kan het <head>-tag ook worden overgeslagen.

Standaard voegt de browser alle elementen die zich voor het <body>-element bevinden, toe aan de standaard <head>-element.

Door het <head>-tag te overslaan, kun je de complexiteit van HTML verminderen:

Voorbeeld

<!DOCTYPE html>
<html>
<title>Pagina Titel</title>
<body>
  <h1>Dit is een titel.</h1>
  <p>Dit is een paragraaf.</p>
</body>
</html>

Probeer het zelf uit

Opmerking:Voor webontwikkelaars is het vermijden van tags onbekend. Regelgeving vereist tijd om op te bouwen.

Metadata

Het <title>-element is in HTML5 vereist. Probeer zo betekenisvolle titels te maken.

<title>HTML5 Syntax and Coding Style</title>

Om een juiste interpretatie en een correcte zoekmachineindex te waarborgen, is het beter om vroeg in het document de taal en de characterencoding te definiëren:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML Opmerkingen

Korte opmerkingen moeten op een enkele regel worden geschreven, en er moet een spatieslag worden toegevoegd na <!-- en voor -->

<!-- Dit is een commentaar -->

Lange opmerkingen, die over meerdere regels lopen, moeten geschreven worden met <!-- en --> op aparte regels:

<!-- 
  Dit is een lang commentaarvoorbeeld. Dit is een lang commentaarvoorbeeld. Dit is een lang commentaarvoorbeeld.
  Dit is een lang commentaarvoorbeeld. Dit is een lang commentaarvoorbeeld. Dit is een lang commentaarvoorbeeld.
-->

Lange opmerkingen zijn gemakkelijker te observeren als ze ingesprongen zijn met twee spaties.

Stijlbladen

Gebruik een eenvoudige syntaxis om de stylesheet te koppelen (het type-eigenschap is niet vereist):

<link rel="stylesheet" href="styles.css">

Korte regels kunnen op een regel worden samengeperst, zoals hierboven:

p.into {font-family:"Verdana"; font-size:16em;}

Lange regels moeten over meerdere regels worden verdeeld:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • De opening rechte haak staat op dezelfde regel als de selector
  • Gebruik een spatieslag voor de opening rechte haak
  • Gebruik een twee tekens diep ingesprongen
  • Gebruik een dubbele punt en een spatieslag tussen elke eigenschap en waarde
  • Gebruik een spatieslag na elke komma of semikolon
  • Gebruik een semikolon achter elk paar van eigenschap en waarde (inclusief het laatste)
  • Gebruik aanhalingstekens alleen om waarden met spaties te omkaderen
  • Plaats de afsluitende rechte haak in een nieuwe regel, zonder spaties ervoor
  • Voorkom dat elke regel meer dan 80 tekens bevat

Opmerking:Een spatieslag toevoegen na een komma of semikolon is een algemene regel voor alle soorten schrijven.

Laden van JavaScript in HTML

Gebruik een eenvoudige syntaxis om externe scripts te laden (het type-eigenschap is niet vereist):

<script src="myscript.js">

HTML-elementen bereiken via JavaScript

Het gebruik van 'onnetiquet' HTML-stijlen kan leiden tot JavaScript-fouten.

Deze twee JavaScript-staten leveren verschillende resultaten op:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Probeer het zelf uit

Gebruik indien mogelijk dezelfde naamconventie in HTML (zoals met JavaScript).

Bezoek de JavaScript Stijlgids.

Gebruik kleine letters in bestandsnamen

De meeste web servers (Apache, Unix) zijn hoofdlettergevoelig voor bestandsnamen:

Je kunt London.jpg niet bereiken om London.jpg te openen.

Andere web servers (Microsoft, IIS) zijn niet hoofdlettergevoelig:

Je kunt London.jpg of London.jpg bereiken om London.jpg te openen.

Als je een mix van hoofd- en kleine letters gebruikt, moet je een hoge mate van consistentie behouden.

Als je van een server met een niet-kasgevoelige hoofdlettergevoeligheid overschakelt naar een server met een hoofdlettergevoelige hoofdlettergevoeligheid, zullen deze kleine fouten je website beschadigen.

Om deze problemen te voorkomen, gebruik dan altijd kleine letters in bestandsnamen (indien mogelijk).

Bestandsextensies

HTML-bestandsnamen moeten de extensie .html gebruiken .html(in plaats van .htm)

CSS-bestanden moeten de extensie .css gebruiken .css.

JavaScript-bestanden moeten de extensie .js gebruiken .js.