Przestrzegania stylu i kodu HTML(5)

Konwencje kodowania HTML

Deweloperzy web'owi często nie są pewni stylu i gramatyki kodu używanego w HTML.

W latach 2000-2010 wielu deweloperów web'owych przeszło z HTML na XHTML.

Przez XHTML, deweloperzy musieli pisać poprawnie 'well-formed' kod.

HTML5 jest bardziej luźny w walidacji kodu.

Przez HTML5 musisz stworzyć własneNajlepsze praktyki, wytyczne dotyczące stylu i konwencje kodowania.

Inteligentne i przyszłościowe

Logiczne użycie stylów może ułatwić innym zrozumienie i użycie Twojego HTML.

W przyszłości programy takie jak czytniki XML mogą musieć odczytać Twoje HTML.

Używanie dobrze sformatowanej gramatyki 'przybliżonej do XHTML' jest bardziej inteligentne.

Komentarz:Zawsze utrzymuj swoje style inteligentne, porządne, czyste i dobrze sformatowane.

Używaj poprawnego typu dokumentu

Zawsze deklaruj typ dokumentu na pierwszym wierszu dokumentu:

<!DOCTYPE html>

Jeśli zawsze używasz małych liter w tagach, możesz użyć:

<!doctype html>

Używaj małych liter w nazwach elementów

HTML5 pozwala na używanie mieszanych liter wielkich i małych w nazwach elementów.

Rekomendujemy używanie małych liter w nazwach elementów:

  • Mieszane litery wielkie i małe nie są dobre
  • Programiści preferują używanie małych liter w nazwach (np. w XHTML)
  • Małe litery wyglądają bardziej czysto
  • Małe litery są łatwiejsze do pisanie

To nie jest najlepsze:

<SECTION> 
  <p>W tym paragrafie znajduje się tekst.</p>
</SECTION>

To jest kiepskie:

<Section> 
  <p>W tym paragrafie znajduje się tekst.</p>
</SECTION>

To całkiem dobrze:

<section> 
  <p>W tym paragrafie znajduje się tekst.</p>
</section>

Zamknij wszystkie elementy HTML

W HTML5 nie musisz zamknąć wszystkich elementów (np. elementu <p>).

Sugerujemy zamknięcie wszystkich elementów HTML:

Wygląda źle:

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

Wygląda dobrze:

<section>
  <p>W tym paragrafie znajduje się tekst.</p>
  <p>W tym paragrafie znajduje się tekst.</p>
</section>

Zamknięcie pustych elementów HTML

W HTML5 zamknięcie pustych elementów jest opcjonalne.

To jest dozwolone:

<meta charset="utf-8">

Też jest dozwolone:

<meta charset="utf-8" />

Kreska (/) jest obowiązkowa w XHTML i XML

Jeśli oczekujesz, że oprogramowanie XML będzie miało dostęp do Twojej strony, utrzymanie tej przyzwyczajenia to dobry pomysł.

Używaj małych nazw atrybutów

HTML5 pozwala na mieszane nazwy atrybutów w różnych wielkościach liter

Rekomendujemy używanie małych nazw atrybutów:

  • Mieszane nazwy atrybutów są złe
  • Programiści przyzwyczaili się do używania małych nazw atrybutów (np. w XHTML)
  • Małe nazwy atrybutów są bardziej czyste w zależności od sytuacji
  • Małe nazwy atrybutów są łatwiejsze do pisania

Wygląda źle:

<div CLASS="menu">

Wygląda dobrze:

<div class="menu">

Wartości atrybutów z cudzysłów

HTML5 pozwala na wartości atrybutów bez cudzysłów

Rekomendujemy używanie cudzysłów dla wartości atrybutów:

  • Jeśli wartość atrybutu zawiera wartość, musisz użyć cudzysłów
  • Mieszane style są absolutnie złe
  • Wartości w cudzysłowach są łatwiejsze do odczytania

Ta wartość atrybutu jest niewłaściwa, ponieważ zawiera spacje:

<table class=table striped>

To jest poprawne:

<table class="table striped">

Wymagane atrybuty

Zawsze używaj alt Atrybuty. Jest ważny, gdy obraz nie może być wyświetlony.

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

Zawsze definiuj rozmiar obrazu. To zmniejszy migotanie, ponieważ przeglądarka zostawi przestrzeń na obraz przed jego załadowaniem.

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

Spacje i znak równości

Spacje po obu stronach znaku równości są legalne:

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

Ale minimalistyczne przestrzenie są łatwiejsze do odczytania Ale brak przestrzeni jest łatwiejszy do odczytania i lepiej grupuje jednostki razem:

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

Unikaj długich wierszy kodu

Używanie edytora HTML do czytania kodu HTML za pomocą przewijania w lewo i prawo jest bardzo niewygodne.

Staraj się unikać przekraczania 80 znaków w wierszu kodu.

Puste wiersze i wcięcia

Nie dodawaj pustych wierszy bez powodu.

Aby poprawić czytelność, dodaj puste wiersze, aby oddzielić duże lub logiczne bloki kodu.

Aby poprawić czytelność, zwiększ wcięcia o dwa spacje. Nie używaj znaków tabulacji.

Nie używaj zbędnych pustych wierszy i wcięć. Nie ma potrzeby używania pustych wierszy między krótkimi i powiązanymi elementami ani wcięć dla każdego elementu:

Niepotrzebne:

<body>
  <h1>Slawne miasta</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo jest stolicą Japonii, centrum obszaru metropolitalnego Greater Tokyo,
    i najbardziej zaludnionego obszaru metropolitalnego na świecie.
    To siedziba rządu japońskiego i Pałacu Cesarskiego,
    i dom rodzinnej rodziny cesarskiej japońskiej.
  </p>
</body>

Lepiej:

<body>
<h1>Slawne miasta</h1>
<h2>Tokyo</h2>
<p>
Tokyo jest stolicą Japonii, centrum obszaru metropolitalnego Greater Tokyo,
i najbardziej zaludnionego obszaru metropolitalnego na świecie.
To siedziba rządu japońskiego i Pałacu Cesarskiego,
i dom rodzinnej rodziny cesarskiej japońskiej.
</p>
</body>

Przykład tabeli:

<table>
  <tr>
    <th>Nazwa</th>
    <th>Opis</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Opis A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Opis B</td>
  <tr>
</table>

Przykład listy:

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

Czy można pomijać <html> i <body>?

W standardzie HTML5, można pomijać etykiety <html> i <body>.

Poniższy kod jest weryfikowany jako HTML5:

Przykład

<!DOCTYPE html>
<head>
  <title>Tytuł strony</title>
</head>
<h1>Jest to nagłówek</h1>
<p>W tym paragrafie znajduje się tekst.</p>

Spróbuj sam

Nie zalecamy pomijania etykiet <html> i <body>.

Element <html> jest głównym elementem tekstu. Jest to idealne miejsce do określenia języka strony.

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

Dla aplikacji dostępnych dla osób niepełnosprawnych (czytników ekranowych) i wyszukiwarek, deklaracja języka jest ważna.

Pominięcie <html> lub <body> może doprowadzić do awarii oprogramowania DOM i XML.

Pominięcie <body> może spowodować błędy w starszych przeglądarkach (IE9).

Czy można pomijać <head>?

W standardzie HTML5, etykieta <head> może również być pominięta.

Domyślnie, przeglądarka doda wszystkie elementy przed <body> do domyślnego elementu <head>.

Poprzez pominięcie etykiety <head>, możesz zmniejszyć złożoność HTML:

Przykład

<!DOCTYPE html>
<html>
<title>Tytuł strony</title>
<body>
  <h1>Jest to nagłówek</h1>
  <p>W tym paragrafie znajduje się tekst.</p>
</body>
</html>

Spróbuj sam

Komentarz:Dla deweloperów webowych, pomijanie tagów jest obce. Ustalanie zasad wymaga czasu.

Metadane

Element <title> jest obowiązkowy w HTML5. Stwórz jak najbardziej znaczące tytuły.

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

Aby zapewnić odpowiednią interpretację oraz poprawny indeks przez wyszukiwarki, jak najszybciej zdefiniuj język i kodowanie dokumentu:

<!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ć zapisywane na jednej linii, z dodatkowym spacją po --> i przed -->:

<!-- This is a comment -->

Długie komentarze, rozciągające się na wiele linii, powinny być zapisywane za pomocą <!-- i --> 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śli są wcięte o dwa spacje.

Arkusz stylów

Używaj prostego语法 do łączenia arkuszy stylów (attribut type jest niezbędny):

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

Krótkie reguły mogą być skompresowane do jednej linii, np.:

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

Długie reguły powinny być podzielone na wiele linii:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Otwierający nawias i selektor znajdują się na tej samej linii
  • Dodaj spację przed otwierającym nawiasem
  • Używaj dwuznakowego wcięcia
  • Używaj kropki i spacji między atrybutem a jego wartością
  • Dodawaj spację po każdym przecinku lub średniku
  • Używaj średnika po każdym parze atrybutu (w tym ostatniej)
  • Używaj cudzysłów do otaczania wartości tylko wtedy, gdy zawierają one spacje
  • Umieszczaj zamknięte nawiasy na nowej linii, bez dodatkowych spacji
  • Unikaj przekraczania 80 znaków w każdym wierszu

Komentarz:Dodawanie spacji po przecinku lub średniku to ogólna reguła dla wszystkich typów pisania.

Wczytywanie JavaScript w HTML

Używaj prostego składni do ładowania skryptów zewnętrznych (atrybut type jest niezbędny):

<script src="myscript.js">

Dostęp do elementów HTML za pomocą JavaScript

Konsekwencje użycia "niezorganizowanego" stylu HTML mogą prowadzić do błędów JavaScript.

Te dwa polecenia JavaScript generują różne wyniki:

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

Spróbuj sam

Jeśli to możliwe, używaj tych samych konwencji nazewnictwa w HTML (jak w JavaScript).

Odwiedź przewodnik stylu JavaScript.

Używaj małych nazw plików

Większość serwerów internetowych (Apache, Unix) jest czuła na wielkość liter nazw plików:

Nie można uzyskać dostępu do London.jpg za pomocą london.jpg.

Inne serwery internetowe (Microsoft, IIS) są nieczułe na wielkość liter:

Możliwe jest uzyskanie dostępu do London.jpg za pomocą london.jpg lub London.jpg.

Jeśli używasz mieszanych wielkości liter, musisz zachować wysoki stopień spójności.

Jeśli przeniesiesz się z serwera nieczułego na wielkość liter na serwer czuły na wielkość liter, te małe błędy mogą zniszczyć Twoją stronę internetową.

Aby uniknąć tych problemów, zawsze używaj małych nazw plików (jeśli to możliwe).

Rozszerzenia plików

Nazwy plików HTML powinny używać rozszerzenia .html(zamiast .htm)

Pliki CSS powinny używać rozszerzenia .css.

Pliki JavaScript powinny używać rozszerzenia .js.