HTML5. Гід по стилю і угоди по кодуванню

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML. Як правильно писати код? Угоди по кодуванню

Веб-розробники часто не впевнені у використанні стилю кодування та синтаксису в HTML.

Між 2000 і 2010 роками багато веб-розробників перейшли з HTML на XHTML.

Починаючи з XHTML розробники були змушені писати валідний і "добре сформований" код.

HTML5 є трохи більш недбалим, коли йдеться про перевірку коду.


Будьте розумні і майбутнє це доведе

Послідовне використання стилю полегшує іншим розуміння вашого HTML.

У майбутньому програми, такі як читачі XML, можуть захотіти прочитати ваш HTML.

Використання добре сформованого синтаксису "близько до XHTML" є розумним вибором.

Завжди тримайте свій код акуратним, чистим і добре сформованим.


Використовуйте правильний Doctype

Завжди оголошуйте Doctype (тип документу) в першому рядку документу:

<!DOCTYPE html>

Якщо вам потрібна узгодженість з тегами нижнього регістру, ви можете використовувати:

<!doctype html>

Використовуйте назви в нижньому регістрі

HTML5 дозволяє змішувати великі та малі літери в назвах елементів.

Ми рекомендуємо використовувати назви елементів літерами лише в нижньому регістрі, оскільки:

Погано:

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

Дуже погано:

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

Добре:

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

Закривайте всі HTML елементи

У HTML5 не потрібно закривати всі елементи (наприклад, елемент <p>).

W3C рекомендує закривати всі HTML елементи.

Погано:

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

Добре:

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

Закривайте порожні HTML елементи

В HTML5 не обов'язково закривати порожні елементи.

Дозволено:

<meta charset="utf-8">

Також дозволено:

<meta charset="utf-8" />

Проте закриваюча коса риса (/) НЕОБХІДНА в XHTML і XML.

Якщо ви очікуєте, що програмне забезпечення XML матиме доступ до вашої сторінки, то варто зберегти закриту косу риску (слеш)!


Використовуйте назви атрибутів в нижньому регістрі

HTML5 дозволяє змішувати великі та малі літери в назвах атрибутів.

W3C рекомендує використовувати назви атрибутів в нижньому регістрі, оскільки:

Погано:

<div CLASS="menu">

Добре:

<div class="menu">

Значення атрибутів в лапках

HTML5 дозволяє писати значення атрибутів без лапок.

W3C рекомендує писати значення атрибутів в лапках, оскільки:

Дуже погано:

Це не працюватиме, оскільки значення містить пробіли:

<table class=table striped>

Погано:

<table class=striped>

Добре:

<table class="striped">

Атрибути зображення

Завжди додавайте атрибут alt до зображень. Цей атрибут є важливим, коли зображення з якоїсь причини не може бути відображено. Також завжди визначайте ширину та висоту зображення. Це зменшує мерехтіння, оскільки браузер може резервувати простір для зображення перед завантаженням.

Погано:

<img src="html5.gif">

Добре:

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

Пробіли та знаки рівності

HTML5 дозволяє розміщувати пробіли навколо знаків рівності. Але простіше читати, коли об'єкти згруповані разом.

Погано:

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

Добре:

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

Уникайте довгих рядків коду

Використовуючи редактор HTML, незручно прокручувати праворуч і ліворуч, щоб читати HTML-код.

Намагайтесь уникати рядків коду довжиною більше 80 символів.


Пусті рядки та відступ

Не додавайте порожні рядки без крайньої необхідності.

Для зручності читання додавайте порожні рядки для розділення великих або логічних блоків коду.

Для зручності читання додайте два пробіли відступу. Не використовуйте клавішу табуляції.

Не використовуйте непотрібні порожні рядки та відступи. Немає потреби робити відступи для кожного елемента:

Непотрібно:

<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>

Краще:

<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>

Приклад таблиці:

<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>

Приклад списку:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Опускання <html> та <body>?

В HTML5 тег <html> і тег <body> можуть бути опущені.

Наступний код буде вважатися валідним згідно специфікації HTML5:

Приклад:

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Спробуйте самі »

Однак ми не рекомендуємо пропускати теги <html> та <body>.

Елемент <html> вказує завантаження HTML-документу. Також це рекомендоване місце для визначення мови сторінки:

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

Оголошення мови сторінки має важливе значення для програм з доступністю (програми для читання з екрану) та пошукових систем.

Опущення <html> або <body> може обрушити DOM та програмне забезпечення XML.

Опущення <body> може викликати помилки в старих браузерах (IE9).


Опускання <head>?

В HTML5 тег <head> також може бути опущеним.

За замовчуванням браузери додаватимуть усі елементи, які знаходяться перед <body> до <head> елементу.

Ви можете зменшити складність HTML, пропустивши тег <head>:

Приклад:

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>
Спробуйте самі »

Однак ми не рекомендуємо пропускати тег <head>.

Опущення тегів є невідомим для веб-розробників. Потрібен час, щоб це стало в якості орієнтира.


Метадані

Елемент <title> обов'язковий в HTML5. Необхідно робити назву якомога змістовнішою:

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

Для забезпечення належної інтерпретації та правильного індексування пошуковими системами, як мова сторінки, так і кодування символів повинні бути визначені якомога раніше в документі:

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

Налаштування вікна перегляду - Viewport

В HTML5 з'явився метод, який дозволив веб-дизайнерам взяти під свій контроль вікно перегляду за допомогою тегу <meta>.

Вікно перегляду (viewport) - видима область користувача веб-сторінки. Вона змінюється в залежності від пристрою і буде менше на мобільному телефоні, ніж на екрані комп'ютера.

Вам слід включити наступний елемент <meta> на ваших веб-сторінках:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Елемент <meta> viewport надає інструкції браузеру, як контролювати розміри та масштабування сторінки.

Частина width=device-width встановлює ширину сторінки, щоб вона відповідала ширині екрана пристрою (яка залежить від пристрою).

Частина initial-scale=1.0 встановлює початковий рівень масштабування, коли сторінка спочатку завантажується браузером.

Ось приклад веб-сторінки без viewport метатега, і тієї ж веб-сторінки із viewport метатегом:

Порада: Якщо ви переглядаєте цю сторінку за допомогою телефону або планшету, можна натиснути два посилання нижче, щоб побачити різницю.



HTML Коментарі

Короткі коментарі повинні бути написані на одному рядку:

<!-- Це коментар -->

Коментарі, які охоплюють більше одного рядка, повинні бути написані так:

<!--
  Це довгий приклад коментарів. Це довгий приклад коментарів.
  Це довгий приклад коментарів. Це довгий приклад коментарів.
-->

Довгі коментарі легше побачити, якщо вони мають відступ у два пробіли.


Таблиця стилів

Використовуйте простий синтаксис для посилання на таблиці стилів (атрибут type не є необхідним):

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

Короткі правила стилю можуть бути написані стисло, як це:

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

Довгі правила стилю повинні бути написані на декількох лініях:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

Підключення JavaScript в HTML

Використовуйте простий синтаксис для підключення зовнішніх скриптів (атрибут type не потрібний):

<script src="myscript.js">

Доступ до елементів HTML за допомогою JavaScript

Наслідком використання "неохайних" стилів HTML може стати помилка JavaScript.

Ці два оператора JavaScript дадуть різні результати:

Приклад:

var obj = getElementById("Demo")

var obj = getElementById("demo")
Спробуйте самі »

Відвідайте Посібник по стилю JavaScript.


Використовуйте імена файлів в нижньому регістрі

Деякі веб-сервери (Apache, Unix) чутливі до регістру імен файлів: "london.jpg" не доступний як "London.jpg".

Інші веб-сервери (Microsoft, IIS) не чутливі до регістру: "london.jpg" доступний як "London.jpg", так і як "london.jpg".

Якщо ви використовуєте суміш верхнього та нижнього регістру, ви повинні бути надзвичайно послідовними.

Якщо ви перейдете з нечутливого до регістру сервера на чутливий до регістру сервер, то навіть невеличкі помилки поламають вашу мережу!

Щоб уникнути цих проблем, завжди використовуйте імена файлів у нижньому регістрі.


Розширення файлів

HTML файли повинні мати розширення .html або .htm.

CSS файли повинні мати розширення .css.

JavaScript файли повинні мати розширення .js.


Різниця між .htm та .html

Немає різниці між розширеннями .htm та .html. Обидва розширення веб-браузерами або веб-серверами будуть розглядатися як HTML.

Відмінності культурні:

.htm "відчувають" ранні системи DOS, де система обмежувала розширення до 3 символів.

.html "відчувають" операційні системи Unix, які не мають цього обмеження.


Технічні відмінності

Якщо URL-адреса не вказує ім'я файлу (наприклад, https://www.w3schools.com/css/), сервер повертає ім'я файлу за замовчуванням. Загальні назви файлів за замовчуванням - index.html, index.htm, default.html і default.htm.

Якщо ваш сервер налаштовано лише з "index.html" як типове ім'я файлу, ваш файл має бути названий "index.html", а не "index.htm".

Проте, сервери можуть бути налаштовані на більш ніж одне ім'я файлу за замовчуванням, і зазвичай ви можете встановити стільки назв файлів за умовчанням, скільки потрібно.

Так чи інакше, повне розширення для HTML-файлів .html, і немає ніяких причин його не використовувати.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.