HTML(5) Stilarter og kodekonventioner

HTML kodekonventioner

Webudviklere er ofte usikre på kodeformat og syntaks, der bruges i HTML.

Mellem 2000 og 2010 skiftede mange webudviklere fra HTML til XHTML.

Gennem XHTML blev udviklere tvunget til at skrive gyldigt 'velformateret' kode.

HTML5 er mere tolerant under kodevalidering.

Gennem HTML5 skal du oprette din egenBedste praksis, stil指南 og kodekonventioner.

Intelligent og fremtidssikret

En logisk brug af stil kan gøre det lettere for andre at forstå og bruge din HTML.

I fremtiden kan programmer som XML-læsere måske have brug for at læse din HTML.

Brug en velformateret 'tilnærmelse til XHTML'-syntaks, hvilket gør det mere intelligent.

Kommentarer:Hold altid dine stilarter intelligente, pæne, rene og korrekt formaterede.

Brug den korrekte dokumenttype

Brug altid dokumenttypen i første linje af dokumentet:

<!DOCTYPE html>

Hvis du altid bruger små bogstaver for mærker, kan du bruge:

<!doctype html>

Brug små bogstaver for elementnavne

HTML5 tillader brug af blandede store og små bogstaver i elementnavne.

Vi anbefaler at bruge små bogstaver for elementnavne:

  • Blandede store og små bogstaver er ikke godt
  • Udviklere er vant til at bruge små bogstaver i navne (f.eks. i XHTML)
  • Kapitale fremstår renere
  • Kapitale lettes at skrive

Ikke så godt:

<SECTION> 
  <p>Dette er en afsnit.</p>
</SECTION>

Meget dårligt:

<Section> 
  <p>Dette er en afsnit.</p>
</SECTION>

Ikke så dårligt:

<section> 
  <p>Dette er en afsnit.</p>
</section>

Luk alle HTML-elementer

I HTML5 behøver du ikke lukke alle elementer (f.eks. <p>-elementer).

Vi anbefaler at lukke alle HTML-elementer:

Ser dårligt ud:

<section>
  <p>Dette er en afsnit.
  <p>Dette er en afsnit.
</section>

Ser godt ud:

<section>
  <p>Dette er en afsnit.</p>
  <p>Dette er en afsnit.</p>
</section>

Luk tomme HTML elementer

I HTML5 er det valgfrit at lukke tomme HTML elementer.

Det er tilladt at gøre det sådan:

<meta charset="utf-8">

Det er også tilladt at gøre det sådan:

<meta charset="utf-8" />

Skråstregen (/) er obligatorisk i XHTML og XML.

Hvis du forventer, at XML software skal tilgå din side, er det en god idé at holde denne vane.

Brug små bogstaver i egenskabsnavne

HTML5 tillader blandede store og små bogstaver i egenskabsnavne.

Vi anbefaler at bruge små bogstaver i egenskabsnavne:

  • Blandede egenskabsnavne er ikke godt
  • Udviklere er vant til at bruge små bogstaver i egenskabsnavne (f.eks. i XHTML)
  • Kortegenskabsnavne ser renere ud
  • Kortegenskabsnavne er lettere at skrive

Ser dårligt ud:

<div CLASS="menu">

Ser godt ud:

<div class="menu">

Egenskabsværdier i anførsel

HTML5 tillader egenskabsværdier uden anførsel.

Vi anbefaler at bruge anførsel om egenskabsværdier:

  • Hvis egenskabsværdien indeholder en værdi, skal der bruges anførsel
  • Blandede stilarter er absolut dårligt
  • Værdier i anførsel er lettere at læse

Denne egenskabsværdi er ugyldig, fordi værdien indeholder mellemrum:

<table class=table striped>

Dette er gyldigt:

<table class="table striped">

Obligatoriske egenskaber

Brug altid billeder alt Egenskaber. Denne egenskab er vigtig, når billedet ikke kan vises.

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

Definer altid billedets størrelse. Dette reducerer blinken, fordi browseren reserverer plads til billedet før det indlæses.

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

Mellemrum og lighedstegn

Mellemrum på begge sider af lighedstegnet er lovlige:

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

Men en forenklet mellemrum er lettere at læse, Men space-less er lettere at læse, og grupperer enheder bedre sammen:

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

Undgå lange kode linjer

Det er ikke bekvemt at læse HTML kode ved hjælp af HTML redigeringsværktøj, ved at rulle til venstre og højre.

Undgå at lade kode linjer overstige 80 tegn.

Tomme linjer og indrykning

Undgå at tilføje tomme linjer uden grund.

For at forbedre læsbarheden, brug tomme linjer til at adskille store eller logiske kodeblokke.

For at forbedre læsbarheden, brug to mellemrum til indrykning. Undgå at bruge TAB.

Undgå at bruge unødvendige tomme linjer og indrykning.

Unødvendigt:

<body>
  <h1>Bekantede byer</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo er hovedstaden i Japan, centrum for den større Tokyo-regionen,
    og den mest befolkede metropol i verden.
    Det er sæde for den japanske regering og kejsers palads,
    og hjemsted for den japanske kejserfamilie.
  </p>
</body>

Bedre:

<body>
<h1>Bekantede byer</h1>
<h2>Tokyo</h2>
<p>
Tokyo er hovedstaden i Japan, centrum for den større Tokyo-regionen,
og den mest befolkede metropol i verden.
Det er sæde for den japanske regering og kejsers palads,
og hjemsted for den japanske kejserfamilie.
</p>
</body>

Tabelleeksempel:

<table>
  <tr>
    <th Navn</th>
    <th>Beskrivelse</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Beskrivelse af A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Beskrivelse af B</td>
  <tr>
</table>

Listeeksempel:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Udelade <html> og <body>?

I HTML5-standarden kan <html>- og <body>-etiketterne udelades.

Følgende kode kan valideres som HTML5:

Eksempel

<!DOCTYPE html>
<head>
  <title>Sidetitel</title>
</head>
<h1>Dette er en overskrift</h1>
<p>Dette er en afsnit.</p>

Try it yourself

Vi anbefaler ikke at udelade <html> og <body>-etiketterne.

<html>-elementet er roden til teksten. Det er det ideelle sted at specificere sprog på siden.

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

Erklæringen af sprog er vigtig for tilgængelige applikationer (skærmlæsere) og søgemaskiner.

Udelade <html> eller <body> kan få DOM og XML-programmer til at krasje.

Udelade <body> kan forårsage fejl i ældre browsere (IE9).

Udelade <head>?

I HTML5-standarden kan <head>-etiketten også udelades.

Standardmæssigt tilføjer browseren alle elementer før <body> til den standardiserede <head>-etiket.

Ved at udelade <head>-etiketten kan du reducere kompleksiteten i HTML:

Eksempel

<!DOCTYPE html>
<html>
<title>Sidetitel</title>
<body>
  <h1>Dette er en overskrift</h1>
  <p>Dette er en afsnit.</p>
</body>
</html>

Try it yourself

Kommentarer:For webudviklere er det ukendt at undlade mærker. Det tager tid at etablere regler.

Metadata

Elementet <title> er obligatorisk i HTML5. lav betydelige titler, så vidt muligt.

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

For at sikre korrekt fortolkning og korrekt indeksering af søgemaskiner, er det bedre at definere sprog og tegnkodning tidligt i dokumentet:

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

HTML Kommentarer

Korte kommentarer skal skrives på én linje og tilføj et mellemrum efter <!-- og et mellemrum før -->:

<!-- This is a comment -->

Lange kommentarer, der strækker sig over flere linjer, skal skrives på separate linjer gennem <!-- og -->:

<!-- 
  Dette er et eksempel på en lang kommentar. Dette er et eksempel på en lang kommentar. Dette er et eksempel på en lang kommentar.
  Dette er et eksempel på en lang kommentar. Dette er et eksempel på en lang kommentar. Dette er et eksempel på en lang kommentar.
-->

Lange kommentarer er lettere at se, hvis de er indrykket med to mellemrum.

Stilark

Brug en simpel syntaks til at kæde stilarter (type-attribut er ikke nødvendig):

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

Korte regler kan komprimeres til én linje, sådan her:

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

Lange regler bør deles op i flere linjer:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Placer åben parentes på samme linje som udselektoren
  • Brug et mellemrum før åben parentes
  • Brug to tegns indrykning
  • Brug et kolon og et mellemrum mellem egenskab og værdi
  • Brug et mellemrum efter hvert komma eller semicolon
  • Brug semicolon efter hvert egenskabsværdipar (inklusive det sidste)
  • Brug citater kun omkring værdier, der indeholder mellemrum
  • Placer afsluttende parentes på en ny linje, uden mellemrum forinden
  • Undgå at overskride 80 tegn pr. linje

Kommentarer:At tilføje et mellemrum efter komma eller semicolon er en generel regel for alle skrivestiltyper.

Indlæs JavaScript i HTML

Please use simple syntax to load external scripts (the type attribute is not required):

<script src="myscript.js">

Access HTML elements through JavaScript

The consequences of using 'untidy' HTML styles can lead to JavaScript errors.

These two JavaScript statements will produce different results:

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

Try it yourself

If possible, use the same naming conventions in HTML as in JavaScript (with JavaScript).

Please visit the JavaScript Style Guide.

Use lowercase filenames

Most web servers (Apache, Unix) are case-sensitive for filenames:

Cannot access London.jpg with london.jpg.

Other web servers (Microsoft, IIS) are case-insensitive:

Can access London.jpg with london.jpg or London.jpg.

If you use mixed case, you must maintain high consistency.

If you move from a case-insensitive server to a case-sensitive server, these small errors will break your website.

To avoid these problems, always use lowercase filenames (if possible).

File extensions

HTML filenames should use the extension .html(instead of .htm)

CSS files should use the extension .css.

JavaScript files should use the extension .js.