HTML Coding Conventions
Web-Entwickler sind oft unsicher über die Codierung Stil und Syntax in HTML zu verwenden.
Zwischen 2000 und 2010 konvertiert viele Web-Entwickler von HTML zu XHTML.
Mit XHTML, wurden die Entwickler gezwungen zu schreiben gültig und "well-formed" Code.
HTML5 ist ein bisschen schlampig, wenn es Validierung, Code kommt.
Mit HTML5 können , müssen Sie Ihre eigenen Best Practice, Style Guide und Kodierungskonventionen erstellen.
Be Smart and Future Proof
Eine konsequente Verwendung von Stil, macht es einfacher für andere zu verstehen und Ihre HTML zu verwenden.
In Zukunft Programme wie XML-Leser, möchten Sie Ihre HTML lesen.
Mit einer wohlgeformten "close to XHTML" Syntax kann klug sein.
Halten Sie Ihren Stil smart, ordentlich, sauber und gut gebildet.
Verwenden Sie die richtigen Dokumenttyp
Immer erklärt den Dokumenttyp als die erste Zeile in Ihrem Dokument:
<!DOCTYPE html>Wenn Sie Konsistenz mit Kleinbuchstaben-Tags möchten, können Sie verwenden:
<!DOCTYPE html>Verwenden Kleinschreibung Element Names
HTML5 ermöglicht Groß- und Kleinbuchstaben in Elementnamen zu vermischen.
Wir empfehlen Kleinelementnamen verwenden:
- Mischen Groß- und Klein Name ist schlecht
- Entwickler werden mit Kleinnamen verwendet (as in XHTML)
- Klein sieht Reiniger
- Klein sind leichter zu schreiben
Schlecht:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Sehr schlecht:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Gut:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Alle schließen HTML-Elemente
In HTML5, müssen Sie nicht alle Elemente schließen (for example the <p> element) .
Wir empfehlen, das Schließen aller HTML-Elemente:
Suchen Sie schlecht:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Gut aussehen:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Schließen Leeren HTML-Elemente
In HTML5 ist es optional, leere Elemente zu schließen.
Dies erlaubt:
<meta charset="utf-8">Dies ist auch erlaubt:
<meta charset="utf-8" />Der Schrägstrich (/) wird in XHTML und XML erforderlich.
Wenn Sie XML-Software erwarten, dass Ihre Seite zuzugreifen, könnte es eine gute Idee, es zu halten.
Verwenden Kleinschreibung Attributnamen
HTML5 ermöglicht Groß- und Kleinbuchstaben in Attributnamen zu mischen.
Wir empfehlen Kleinattributnamen:
- Mischen Groß- und Klein Name ist schlecht
- Entwickler werden mit Kleinnamen verwendet (as in XHTML)
- Klein sieht Reiniger
- Klein sind leichter zu schreiben
Suchen Sie schlecht:
<div CLASS="menu">Gut aussehen:
<div class="menu">Zitat Attributwerte
HTML5 ermöglicht Attributwerte ohne Anführungszeichen.
Wir empfehlen, unter Angabe von Attributwerten:
- Sie müssen Anführungszeichen verwenden, wenn der Wert Leerzeichen enthält
- Stile mixen ist nie gut
- Angegebene Werte sind leichter zu lesen
Das wird nicht funktionieren, weil der Wert Leerzeichen enthält:
<table class=table striped>Dies funktioniert:
<table class="table striped">Bildattribute
Verwenden Sie immer das alt - Attribut mit Bildern. Es ist wichtig, wenn das Bild kann nicht angezeigt werden.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">Immer definieren Bildgröße. Es reduziert Flimmern, da der Browser Platz für Bilder behalten können, bevor sie geladen werden.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">Räume und Gleichheitszeichen
Räume um Gleichheitszeichen ist legal:
<link rel = "stylesheet" href = "styles.css">Aber platz weniger ist leichter zu lesen und Gruppen Einheiten besser zusammen:
<link rel="stylesheet" href="styles.css">Vermeiden Sie lange Codezeilen
Wenn ein HTML-Editor verwendet, ist es unbequem rechts zu scrollen und links den HTML-Code zu lesen.
Versuchen Sie, Code-Zeilen länger als 80 Zeichen zu vermeiden.
Leerzeilen und Einrückungen
Fügen Sie keine Leerzeilen ohne Grund.
Zur besseren Lesbarkeit wird, dass Leerzeilen groß oder logische Codeblöcke zu trennen.
Zur besseren Lesbarkeit hinzufügen 2 Räume der Vertiefung. Verwenden Sie TAB nicht.
Keine unnötigen Leerzeilen und Einrückungen verwenden. Es ist nicht erforderlich, Leerzeilen zwischen kurzen und verwandten Elementen zu verwenden. Es ist nicht notwendig, jedes Element einrücken:
Nicht notwendig:
<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>Besser:
<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>Tabelle Beispiel:
<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>Liste Beispiel:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>Das Weglassen <html> und <body> ?
Im HTML5 - Standard, der <html> -Tag und das <body> -Tag können weggelassen werden.
Der folgende Code wird als HTML5 validieren:
Beispiel
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Versuch es selber " Wir empfehlen nicht , das Weglassen der <html> und <body> Tags.
Das <html> Element ist das Dokument Wurzel. Es ist der empfohlene Ort für die Angabe der Seite der Sprache aus:
<!DOCTYPE html>
<html lang="en-US">Sprache Deklarieren ist für die Zugänglichkeit Anwendungen wichtig (screen readers) - (screen readers) und Suchmaschinen.
Weglassen <html> oder <body> kann abstürzen DOM und XML - Software.
Das Weglassen <body> können Fehler bei älteren Browsern erzeugen (IE9) .
Das Weglassen <head> ?
Im HTML5 - Standard, der <head> -Tag auch weggelassen werden kann.
Standardmäßig werden alle Elemente Browser vor fügen <body> , auf einen Standard <head> Element.
Sie können die Komplexität von HTML reduzieren, durch Weglassen des <head> tag:
Beispiel
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Versuch es selber " Das Weglassen Tags ist ungewohnt für Web-Entwickler. Es braucht Zeit, als Richtlinie festgelegt werden.
Meta-Daten
Das <title> Element in HTML5 erforderlich. Machen Sie den Titel möglichst aussagekräftig:
<title>HTML5 Syntax and Coding Style</title>Um eine richtige Interpretation und korrekte Indizierung durch Suchmaschinen, sowohl die Sprache und die Zeichenkodierung sollte so früh wie möglich in einem Dokument definiert werden:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>HTML Kommentare
Kurze Kommentare sollten sich auf eine Zeile geschrieben werden, mit einem Leerzeichen nach <!-- and a space before --> :
<!-- This is a comment -->Lange Kommentare, viele Zeilen überspannen, sollte geschrieben werden <!-- and --> in separaten Zeilen:
<!--
This is a long comment example. This is a long comment example. 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 Kommentare sind leichter zu beobachten, wenn sie zwei Leerzeichen eingerückt werden.
Style Sheets
Verwenden einfache Syntax für die Verknüpfung von Stylesheets (the type attribute is not necessary) - (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">Kurze Regeln geschrieben werden können komprimiert, in einer Zeile wie folgt aus:
p.into {font-family: Verdana; font-size: 16em;}Lange Regeln sollten über mehrere Zeilen geschrieben werden:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Legen Sie die öffnende Klammer auf der gleichen Linie wie die Wähler.
- Verwendet einen Raum vor der Öffnung Halterung.
- Verwendung 2 Räume der Einbuchtung.
- Verwenden Sie Doppelpunkt und ein Leerzeichen zwischen jeder Eigenschaft und seinen Wert.
- Verwenden Sie Leerzeichen nach jedem Komma oder Semikolon.
- Verwenden Sie Semikolon nach jeder Eigenschaft-Wert-Paar, einschließlich der letzten.
- Verwenden Sie nur Anführungszeichen um Werte, wenn der Wert Leerzeichen enthält.
- Platzieren Sie den Schließbügel auf einer neuen Zeile, ohne führende Leerzeichen.
- Vermeiden Sie Linien über 80 Zeichen.
Hinzufügen ein Leerzeichen nach einem Komma oder ein Semikolon, ist eine allgemeine Regel in allen Arten des Schreibens.
Laden Sie JavaScript in HTML
Verwenden einfache Syntax zum Laden externen Skripte (the type attribute is not necessary) - (the type attribute is not necessary) :
<script src="myscript.js">Zugriff auf HTML-Elemente mit JavaScript
Eine Folge der Verwendung von "untidy" HTML - Stile, könnte in JavaScript - Fehlern führen.
Diese beiden JavaScript-Anweisungen werden zu unterschiedlichen Ergebnissen führen:
Wenn möglich, verwenden Sie die gleiche Namenskonvention (as JavaScript) in HTML.
Besuchen Sie die JavaScript Style Guide .
Verwenden Lower Case File Names
Die meisten Webserver (Apache, Unix) Groß- und Kleinschreibung zu den Dateinamen:
London.jpg kann nicht als London.jpg zugegriffen werden.
Andere Web - Server (Microsoft, IIS) sind Groß- und Kleinschreibung:
London.jpg kann als London.jpg oder London.jpg zugegriffen werden.
Wenn Sie eine Mischung aus Groß- und Kleinbuchstaben verwenden, müssen Sie extrem konsistent sein.
Wenn Sie von einem Groß- und Kleinschreibung, auf einen Fall sensible Server zu verschieben, selbst kleine Fehler werden Ihre Web brechen.
Um diese Probleme zu vermeiden, verwenden Sie immer Kleinbuchstaben Dateinamen (if possible) .
Dateierweiterungen
HTML - Dateien sollten eine Erweiterung .html haben (or .htm ) .
CSS - Dateien sollten eine CSS - Erweiterung haben.
JavaScript - Dateien sollten eine Js - Erweiterung haben.
Unterschiede zwischen .htm und .html
Es gibt keinen Unterschied zwischen der .htm und .html-Erweiterungen. Beide werden als HTML von jedem Web-Browser oder Web-Server behandelt werden.
Die Unterschiede sind kulturell:
.htm "smells" der frühen DOS Systemen , in denen das System die Erweiterungen auf 3 Zeichen begrenzt.
.html "smells" von Unix - Betriebssysteme , die diese Einschränkung nicht haben.
Technische Unterschiede
Wenn eine URL keinen Dateinamen angeben (like http://www.w3ii.com/css/) , gibt der Server einen Standard - Dateinamen. Gemeinsame Standarddateinamen sind index.html, index.htm, default.html und default.htm.
Wenn Ihr Server nur mit konfiguriert ist "index.html" als Standard - Dateiname muss Ihre Datei mit dem Namen werden "index.html" , nicht "index.htm." .
Allerdings kann Server mit mehr als einem Standarddateinamen konfiguriert werden, und in der Regel können Sie beliebig viele Standarddateinamen nach Bedarf einrichten.
Wie dem auch sei, die vollständige Erweiterung für HTML-Dateien ist .html, und es gibt keinen Grund, es sollte nicht verwendet werden.