Konwencje Kodowanie HTML
developerzy są często niepewne o stylu kodowania i składnię używaną w HTML.
W latach 2000 i 2010, wielu developerzy konwertowane z HTML do XHTML.
XHTML, deweloperzy zostali zmuszeni napisać poprawny i "well-formed" kod.
HTML5 jest nieco bardziej niechlujny, jeśli chodzi o kod weryfikacyjny.
Z HTML5, trzeba tworzyć własne Best Practice, Style Guide i kodowania konwencje.
Bądź mądry i Future Proof
Konsekwentne stosowanie stylu, ułatwia inni zrozumieć i używać HTML.
W przyszłości programy takie jak czytniki XML, może chcesz przeczytać HTML.
Korzystanie z dobrze uformowane "close to XHTML" składni, może być mądry.
Zawsze zachować swój styl elegancki, schludny, czysty i dobrze uformowane.
Użyj odpowiedniego rodzaju dokumentu
Zawsze zadeklarować typ dokumentu jako pierwszej linii w dokumencie:
<!DOCTYPE html>Jeśli chcesz spójność z niższych tagów przypadku można użyć:
<!DOCTYPE html>Użyj małych liter nazw elementów
HTML5 pozwala mieszania wielkich i małych liter w nazwach elementów.
Zalecamy używanie małych liter nazwy elementów:
- Mieszanie nazwiska wielkich i małych jest zły
- Deweloperzy są wykorzystywane do używania nazw małe (as in XHTML)
- Małe litery czystsze wygląd
- Małe litery są łatwiejsze do napisania
Zły:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Bardzo źle:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Dobry:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>Zamknij wszystkie elementy HTML
W HTML5, nie trzeba, aby zamknąć wszystkie elementy (for example the <p> element) .
Zaleca się zamknięcie wszystkich elementów HTML:
Patrząc złe:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Wygląda dobrze:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Blisko puste elementy HTML
W HTML5, to jest opcja, aby zamknąć puste elementy.
Jest to dozwolone:
<meta charset="utf-8">Jest to dozwolone również:
<meta charset="utf-8" />Ukośnik (/) jest wymagane w XHTML i XML.
Jeśli oczekujesz oprogramowanie XML, aby uzyskać dostęp do strony, może to być dobry pomysł, aby ją utrzymać.
Zastosowanie Lower Case Atrybut nazwy
HTML5 pozwala mieszania wielkich i małych liter w nazwach atrybutów.
Zalecamy używanie nazwy atrybutów małe:
- Mieszanie nazwiska wielkich i małych jest zły
- Deweloperzy są wykorzystywane do używania nazw małe (as in XHTML)
- Małe litery czystsze wygląd
- Małe litery są łatwiejsze do napisania
Patrząc złe:
<div CLASS="menu">Wygląda dobrze:
<div class="menu">Wartości atrybutów cytat
HTML5 pozwala wartości atrybutów bez cudzysłowów.
Zalecamy cytowania wartości atrybutów:
- Musisz użyć cudzysłowów, jeśli wartość zawiera spacje
- Mieszanie stylów nigdy nie jest dobry
- Podane wartości są łatwiejsze do odczytania
To nie będzie działać, ponieważ wartość zawiera spacje:
<table class=table striped>To będzie działać:
<table class="table striped">Atrybuty Obrazek
Zawsze używaj alt atrybut obrazami. Jest to istotne, gdy obraz nie może być postrzegana.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">Zawsze określić rozmiar obrazu. To redukuje migotanie ponieważ przeglądarka może zarezerwować miejsca dla obrazów zanim zostaną one załadowane.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">Spacje i znaki równości
Przestrzenie wokół znaku równości jest legalne:
<link rel = "stylesheet" href = "styles.css">Ale mniej przestrzeni jest łatwiejsze do odczytania i grup podmiotów lepiej ze sobą:
<link rel="stylesheet" href="styles.css">Linie uniknąć długiego kodu
Podczas korzystania z edytora HTML, jest to niewygodne, aby przewinąć w prawo i lewo, aby odczytać kodu HTML.
Staraj się unikać linii kodu dłuższe niż 80 znaków.
Puste linie i wcięcia
Nie dodawaj pustych wierszy bez powodu.
Dla czytelności, dodać puste wiersze do oddzielania dużych lub logiczne bloki kodu.
Dla czytelności, dodać 2 przestrzenie wcięcia. Nie używać TAB.
Nie należy używać niepotrzebnych pustych wierszy i wcięcia. Nie jest konieczne stosowanie pustych wierszy pomiędzy pozycjami krótkimi i pokrewnych. Nie jest konieczne, aby wciąć każdy element:
Niepotrzebne:
<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>Lepszy:
<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>Tabela Przykład:
<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>Lista Przykład:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>Pominięcie <html> i <body> ?
W standardzie HTML5, <html> tag i <body> tag można pominąć.
Poniższy kod zweryfikuje jak HTML5:
Przykład
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Spróbuj sam " Nie zalecamy pomijając <html> i <body> tagi.
<html> Element jest korzeniem dokumentu. Jest to zalecane miejsce dla określający język strony:
<!DOCTYPE html>
<html lang="en-US">Deklarowanie języka jest ważne dla aplikacji ułatwień dostępu (screen readers) i wyszukiwarek.
Pominięcie <html> lub <body> może upaść DOM i oprogramowania XML.
Pominięcie <body> może powodować błędy w starszych przeglądarkach (IE9) .
Pominięcie <head> ?
W standardzie HTML5, <head> tag może również zostać pominięty.
Domyślnie przeglądarka doda wszystkie elementy przed <body> , aby domyślnie <head> elementu.
Można zmniejszyć złożoność HTML, przez pominięcie <head> tag:
Przykład
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Spróbuj sam " Pominięcie znaczników jest obca programistów. To wymaga czasu, aby zostać ustanowione jako wytyczne.
meta danych
<title> element jest wymagany HTML5. Uczynić tytuł jako sensowne, jak to możliwe:
<title>HTML5 Syntax and Coding Style</title>Aby zapewnić właściwą interpretację i poprawne indeksowanie w wyszukiwarkach, zarówno język i kodowanie znaków powinny być zdefiniowane jak najwcześniej w dokumencie:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>Komentarze HTML
Krótkie komentarze powinny być napisane w jednej linii, z miejsca po <!-- and a space before --> :
<!-- This is a comment -->Długie komentarze, obejmujące wiele linii, powinien być napisany z <!-- and --> Na oddzielnych liniach:
<!--
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.
-->Długie komentarze są łatwiejsze do zaobserwowania, jeżeli są one przeznaczone, 2 miejsca.
Arkusze stylów
Użyj prostą składnię do łączenia arkuszy stylów (the type attribute is not necessary) :
<link rel="stylesheet" href="styles.css">Krótkie zasady można zapisać skompresowany, w jednej linii, tak:
p.into {font-family: Verdana; font-size: 16em;}Długie zasady powinny być napisane na wielu liniach:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- Umieścić wspornik otwarcia na tej samej linii co selektora.
- Użyj jedno miejsce przed nawiasem otwierającym.
- Stosować 2 przestrzenie wgłębienia.
- Używać dwukropka plus jedna przestrzeń pomiędzy każdej nieruchomości i jej wartości.
- Użyj spacji po każdym przecinkiem lub średnikiem.
- Użyj średnik po każdej pary właściwość-wartość, w tym ostatni.
- używać tylko cudzysłowy wokół wartości, jeśli wartość zawiera spacje.
- Umieścić wspornik zamykający na nowej linii, bez czołowych miejscach.
- Unikaj linii ponad 80 znaków.
Dodanie miejsca po przecinku lub średnikiem, jest ogólną regułą we wszystkich typach piśmie.
Ładowanie JavaScript w HTML
Użyj prostą składnię do ładowania skryptów zewnętrznych (the type attribute is not necessary) :
<script src="myscript.js">Dostęp do elementów HTML z JavaScript
Konsekwencją stosowania "untidy" style HTML, może spowodować błędy JavaScript.
Te dwa stwierdzenia JavaScript dadzą różne wyniki:
Jeśli to możliwe, używać tej samej konwencji nazewnictwa (as JavaScript) w HTML.
Odwiedź JavaScript Style Guide .
Użyj małych liter nazwy plików
Większość serwerów WWW (Apache, Unix) jest wielkość liter o nazwach:
London.jpg nie mogą być dostępne jako London.jpg.
Inne serwery WWW (Microsoft, IIS) nie jest uwzględniana wielkość liter:
London.jpg mogą być dostępne jako London.jpg lub London.jpg.
Jeśli używasz kombinacji dużych i małych liter, trzeba być niezwykle spójna.
Jeśli przeniesiesz się ze sprawy, niewrażliwego na serwerze wrażliwej przypadku nawet niewielkie błędy złamie swoje sieci.
Aby uniknąć tych problemów, należy zawsze używać niższych nazwy plików przypadek (if possible) .
Rozszerzenia plików
Pliki HTML powinny mieć rozszerzenie .html (or .htm ) .
Pliki CSS powinny mieć rozszerzenie .css.
Pliki JavaScript powinien mieć rozszerzenie .js.
Różnice między .htm i .html
Nie ma różnicy między .htm i .html rozszerzeń. Oba będą traktowane jako HTML za pomocą dowolnej przeglądarki internetowej lub serwera WWW.
Różnice kulturowe:
.htm "smells" wczesnych systemów DOS, gdzie system ograniczył rozszerzenia do 3 znaków.
.html "smells" systemów operacyjnych Unix, które nie mają tego ograniczenia.
Różnice techniczne
Gdy URL nie określa nazwę pliku (like http://www.w3ii.com/css/) , serwer zwraca domyślną nazwę pliku. Wspólne domyślne nazwy plików są index.html, index.htm, default.html i default.htm.
Jeśli serwer jest skonfigurowany tylko z "index.html" jako domyślnej nazwy pliku, plik musi mieć nazwę "index.html" , a nie "index.htm."
Jednak serwery mogą być konfigurowane z więcej niż jedną domyślną nazwę i normalnie można skonfigurować dowolną liczbę domyślnych nazw plików, ile potrzeba.
W każdym razie, pełne rozszerzenie dla plików HTML jest .html, i nie ma powodu, to nie powinien być stosowany.