HTML(5) stilsidor och kodkonventioner

HTML-konventioner

Webbutvecklare är ofta osäkra på den kodstil och syntax som används i HTML.

Mellan 2000 och 2010 bytte många webbutvecklare från HTML till XHTML.

Genom XHTML tvingades utvecklare att skriva effektivt "välformat" kod.

HTML5 är mer generös vid kodvalidering.

Genom HTML5 måste du skapa din egenBästa praxis, stilsjälvklart och kodkonventioner.

Intelligent och framtidssäker

En logisk användning av stil kan göra det lättare för andra att förstå och använda din HTML.

I framtiden kan program som XML-läsare behöva läsa din HTML.

Använd välformatad "liknande XHTML"-syntaks för att bli mer intelligent.

Kommentarer:Håll alltid din stil intelligent, ren, ren och välformatad.

Använd rätt dokumenttyp

Ange alltid dokumenttypen på första raden i dokumentet:

!DOCTYPE html

Om du alltid använder små taggar kan du använda:

<!doctype html>

Använd små bokstäver för elementnamn

HTML5 tillåter blandade storleksbokstäver i elementnamn.

Vi rekommenderar att använda små bokstäver för elementnamn:

  • Blandade storleksbokstäver är inte bra
  • Utvecklare har vana att använda små bokstäver (t.ex. i XHTML)
  • Låga bokstäver ser renare ut
  • Låga bokstäver är lättare att skriva

Något dåligt:

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

Väldigt dåligt:

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

Något bra:

<section> 
  <p>This is a paragraph.</p>
</section>

Stäng alla HTML-element

I HTML5 behöver du inte stänga alla element (t.ex. <p>-element).

Vi rekommenderar att stänga alla HTML-element:

Det ser dåligt ut:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Det ser bra ut:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

Stänga tomma HTML-element

I HTML5 är det valfritt att stänga tomma HTML-element.

Det tillåts också så här:

<meta charset="utf-8">

Det tillåts också så här:

<meta charset="utf-8" />

Slantslash (/) är nödvändigt i XHTML och XML.

Om du förväntar dig att XML-program ska komma åt din sida är det en bra idé att behålla denna vana.

Använd små bokstäver för egenskapsnamn

HTML5 tillåter blandade stora och små bokstäver för egenskapsnamn.

Vi rekommenderar att använda små bokstäver för egenskapsnamn:

  • Blandade egenskapsnamn är inte bra
  • Utvecklare är vana vid att använda små bokstäver för egenskapsnamn (t.ex. i XHTML)
  • Låga egenskapsnamn ser rentare ut
  • Låga egenskapsnamn är lättare att skriva

Det ser dåligt ut:

<div CLASS="menu">

Det ser bra ut:

<div class="menu">

Egenskapsvärden inom citationstecken

HTML5 tillåter egenskapsvärden utan citationstecken.

Vi rekommenderar att egenskapsvärden läggs inom citationstecken:

  • Om egenskapsvärdet innehåller ett värde måste citationstecken användas
  • Blandade stilar är absolut dåliga
  • Värden inom citationstecken är lättare att läsa

Detta egenskapsvärdet är ogiltigt eftersom det innehåller tomma rutor:

<table class=table striped>

Detta är giltigt:

<table class="table striped">

obligatoriska egenskaper

Använd alltid alt Egenskaper. Detta egenskapsvärde är viktigt när bilden inte kan visas.

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

Definiera alltid bildstorlek. Detta minskar flackheten eftersom webbläsaren reserverar utrymme för bilden innan den laddas.

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

Tomma rutor och likhetstecken

Tomma rutor på båda sidor av likheten är giltiga:

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

Men att förenkla utrymmen är lättare att läsa Men space-less är lättare att läsa och grupperar enheter bättre tillsammans:

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

Undvik långa kodrader

Det är mycket obehagligt att läsa HTML-kod genom att skrolla vänster och höger när man använder en HTML-redigerare.

Försök att undvika att kodrader överstiger 80 tecken.

Tomma rader och indrag

Undvik att utan anledning lägga till tomma rader.

För att förbättra läsbarheten, använd tomma rader för att skilja stora eller logiska kodblock.

För att förbättra läsbarheten, öka indraget med två blanksteg. Använd inte TAB.

För att undvika onödiga tomma rader och indrag. Det finns ingen anledning att använda tomma rader mellan korta och relaterade poster, och det finns ingen anledning att indra varje element:

O nödvändigt:

<body>
  <h1>Kända städer</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo är huvudstaden i Japan, mittpunkten för den större Tokyo-området,
    och den mest befolkade storstadsområdet i världen.
    Det är platsen för den japanska regeringen och kejsarens palats,
    och hemmet för den japanska kejsarfamiljen.
  </p>
</body>

Bättre:

<body>
<h1>Kända städer</h1>
<h2>Tokyo</h2>
<p>
Tokyo är huvudstaden i Japan, mittpunkten för den större Tokyo-området,
och den mest befolkade storstadsområdet i världen.
Det är platsen för den japanska regeringen och kejsarens palats,
och hemmet för den japanska kejsarfamiljen.
</p>
</body>

Tabell-exempel:

<table>
  <tr>
    <th>Namn</th>
    <th>Beskrivning</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Beskrivning av A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Beskrivning av B</td>
  <tr>
</table>

Listor-exempel:

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

Uteslå <html> och <body>?

I HTML5-standarden kan både <html>- och <body>-etiketterna uteslås.

Följande kod valideras som HTML5:

示例

!DOCTYPE html
<head>
  <title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Prova själv

Vi rekommenderar inte att du uteslår <html> och <body>-etiketterna.

<html>-elementet är roden till texten. Det är det ideala stället att specificera sidans språk.

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

För tillgängliga applikationer (skärmläsare) och sökmotorer är det viktigt att deklarera språk.

Uteslå <html> eller <body> kan orsaka att DOM och XML-program kraschar.

Uteslå <body> kan orsaka fel i äldre webbläsare (IE9).

Uteslå <head>?

I HTML5-standarden kan <head>-etiketten också uteslås.

Som standard lägger webbläsaren alla element innan <body> till den standardmässiga <head>-elementet.

Genom att uteslå <head>-etiketten kan du minska komplexiteten i HTML:

示例

!DOCTYPE html
<html>
<title>Page Title</title>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Prova själv

Kommentarer:För webbutvecklare är det ovanligt att hoppa över taggar. Att skapa regler tar tid.

Metadata

<title>-elementet är nödvändigt i HTML5. Skapa så meningsfulla titlar som möjligt.

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

För att säkerställa korrekt tolkning och korrekt indexering av sökmotorer, är det bättre att definiera språk och teckenkodning tidigt i dokumentet:

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

HTML kommentar

Korta kommentarer bör skrivas på en rad och inkludera ett blanksteg efter --> och ett blanksteg före -->:

!-- Detta är en kommentar -->

Långa kommentarer som sträcker sig över flera rader bör skrivas genom att använda <!-- och --> på separata rader:

!-- 
  Detta är ett exempel på en lång kommentar. Detta är ett exempel på en lång kommentar. Detta är ett exempel på en lång kommentar.
  Detta är ett exempel på en lång kommentar. Detta är ett exempel på en lång kommentar. Detta är ett exempel på en lång kommentar.
-->

Långa kommentarer är lättare att observera om de är indragen med två blanksteg.

Stilmåtten

Använd enkel syntax för att länka till stilmåtten (type-attribut är inte nödvändigt):

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

Korta regler kan komprimeras till en rad, som detta:

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

Långa regler bör delas upp i flera rader:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Placera öppnande parenteser och väljare på samma rad.
  • Använd ett blanksteg före öppnande parenteser.
  • Använd två tecken för indragning.
  • Använd ett kolon följt av ett blanksteg mellan varje egenskap och dess värde.
  • Använd blanksteg efter varje komma eller semikolon.
  • Använd semikolon efter varje egenskapsvärdepar (inklusive det sista).
  • Använd citattecken för att omge värden endast när de innehåller blanksteg.
  • Placera stängande parenteser på en ny rad utan att använda blanksteg före.
  • Undvik att ha mer än 80 tecken per rad.

Kommentarer:Att lägga till blanksteg efter komma eller semikolon är en allmän regel för alla skrivstilar.

Ladda JavaScript i HTML

Använd enkel syntax för att ladda externa skript (type-attribut är inte nödvändigt):

<script src="myscript.js">

Åtkomst till HTML-element via JavaScript

Konsekvenserna av att använda "otillräckligt ren" HTML-stil kan leda till JavaScript-fel.

Dessa två JavaScript-satser genererar olika resultat:

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

Prova själv

Använd samma namngivningskonventioner som (med JavaScript) i HTML om möjligt.

Besök JavaScript-stilhandboken.

Använd små bokstäver i filnamn

De flesta webbserverar (Apache, Unix) är känsliga för storlek på bokstäver i filnamn:

Det är inte möjligt att komma åt London.jpg via london.jpg.

Andra webbserverar (Microsoft, IIS) är inte känsliga för storlek på bokstäver:

Det är möjligt att komma åt London.jpg via london.jpg eller London.jpg.

Om du använder blandad storlek på bokstäver måste du upprätthålla hög konsistens.

Om du flyttar från en server som inte är känslig för storlek på bokstäver till en server som är känslig för storlek på bokstäver, kommer dessa små fel att förstöra din webbplats.

För att undvika dessa problem bör du alltid använda små bokstäver i filnamn (om möjligt).

Filändelser

HTML-filnamn bör använda förlängningen .html(istället för .htm)

CSS-filer bör använda förlängningen .css.

JavaScript-filer bör använda förlängningen .js.