Translations: English · বাংলা · Dansk · Deutsch · Español · فارسی · Français · Indonesia · 日本語 · 한국어 · Português (BR) · Română · Русский · Türkçe · Українська · Tiếng Việt · 简体中文 · 正體中文
Для написания поддерживаемых и масштабируемых HTML-документов
DOCTYPE требуется для активации стандартного режима.
Плохо:
<html>
...
</html>
Хорошо:
<!DOCTYPE html>
<html>
...
</html>
DOCTYPE больше не предназначен для DTD, будьте проще.
Плохо:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Хорошо:
<!DOCTYPE html>
Вы уверены, что хотите писать XHTML?
Плохо:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
Хорошо:
<!DOCTYPE html>
Если вы пишете HTML-документ с использованием UTF-8, почти все символы (включая Emoji) могут быть записаны напрямую.
Плохо:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
Хорошо:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
Чтобы HTML-документ не содержал ошибок, эти символы следует всегда экранировать.
Плохо:
<h1>The "&" character</h1>
Хорошо:
<h1>The "&" character</h1>
Эти символы легко перепутать с другим символом. Кроме того, спецификация не гарантирует определение человеко-понятного имени для этих символов.
Плохо:
<p>This book can read in 1 hour.</p>
Хорошо:
<p>This book can read in 1 hour.</p>
Некоторые символы нельзя использовать сразу после открытия комментария или до закрытия комментария.
Плохо:
<!--This section is non-normative-->
Хорошо:
<!-- This section is non-normative -->
Я думаю, вы не понимаете правила пропуска закрывающего тега.
Плохо:
<html>
<body>
...
Хорошо:
<html>
<body>
...
</body>
</html>
Последовательность - залог удобного чтения.
Плохо:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr />
Хорошо:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr>
Для этого нет никаких причин.
Плохо:
<h1 class=" title " >HTML Best Practices</h1>
Хорошо:
<h1 class="title">HTML Best Practices</h1>
Он также придает консистенцию.
Плохо:
<a HREF="#general">General</A>
Хорошо:
<a href="#general">General</a>
Так же хорошо:
<A HREF="#general">General</A>
То же, что и выше.
Плохо:
<img alt="HTML Best Practices" src='/img/logo.jpg'>
Хорошо:
<img alt="HTML Best Practices" src="/img/logo.jpg">
Ваше странное правило форматирования сбивает кого-то с толку.
Плохо:
<input name="q" type="search">
Хорошо:
<input name="q" type="search">
Писать легко, не так ли?
Плохо:
<audio autoplay="autoplay" src="/audio/theme.mp3">
Хорошо:
<audio autoplay src="/audio/theme.mp3">
SVG и MathML можно использовать непосредственно в HTML-документе.
Плохо:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
Хорошо:
<svg>
...
</svg>
Мы пишем HTML-документ.
Плохо:
<span lang="ja" xml:lang="ja">...</span>
Хорошо:
<span lang="ja">...</span>
Строка тега может быть очень сложной. Это простое правило поможет прочитать такую строку тегов.
Плохо:
<img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
Хорошо:
<img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">
Какой-то элемент имеет ARIA role
неявно в HTML-документе, не указывайте его.
Плохо:
<nav role="navigation">
...
</nav>
<hr role="separator">
Хорошо:
<nav>
...
</nav>
<hr>
Атрибут lang
поможет перевести HTML-документ.
Плохо:
<html>
Хорошо:
<html lang="en-US">
Японский язык используется только в Японии. Поэтому код страны не нужен.
Плохо:
<html lang="ja-JP">
Хорошо:
<html lang="ja">
Соответствующий атрибут может быть правильно обработан браузерами.
Плохо:
<span data-language="french">chemises</span>
...
<strong data-type="warning">Do not wash!</strong>
Хорошо:
<span title="French"><span lang="fr">chemises</span></span>
...
<strong class="warning">Do not wash!</strong>
Значение для элемента title
используется различными приложениями, не только браузером.
Плохо:
<head>
<meta charset="UTF-8">
</head>
Хорошо:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
Абсолютный путь или URL безопаснее как для разработчиков, так и для пользователей.
Плохо:
<head>
...
<base href="/blog/">
<link href="hello-world" rel="canonical">
...
</head>
Хорошо:
<head>
...
<link href="/blog/hello-world" rel="canonical">
...
</head>
Это подсказка о том, как приложение работает с этим ресурсом.
Плохо:
<link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">
Хорошо:
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">
Почти все браузеры получают /favicon.ico
автоматически и асинхронно.
Плохо:
<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
Хорошо:
<!-- Place `favicon.ico` in the root directory. -->
Путь запроса по умолчанию для сенсорного значка был неожиданно изменен.
Плохо:
<!-- Hey Apple! Please download `/apple-touch-icon.png`! -->
Хорошо:
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
Удобная для понимания человеком метка помогает людям выбрать подходящую таблицу стилей.
Плохо:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet">
Хорошо:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
Значение атрибута href
может быть преобразовано в URL.
Плохо:
<section itemscope itemtype="http://schema.org/BlogPosting">
<meta content="https://example.com/blog/hello" itemprop="url">
...
</section>
Хорошо:
<section itemscope itemtype="http://schema.org/BlogPosting">
<link href="/blog/hello" itemprop="url">
...
</section>
UTF-8 пока не используется по умолчанию во всех браузерах.
Плохо:
<head>
<title>HTML Best Practices</title>
</head>
Хорошо:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
HTTP-заголовки должны задаваться сервером, будь проще.
Плохо:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Хорошо:
<meta charset="UTF-8">
Спецификация требует, чтобы кодировка символов была указана в первых 1024 байтах документа.
Плохо:
<head>
<meta content="width=device-width" name="viewport">
<meta charset="UTF-8">
...
</head>
Хорошо:
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
...
</head>
При использовании UTF-8 вы можете свободно использовать Emoji.
Плохо:
<meta charset="Shift_JIS">
Хорошо:
<meta charset="UTF-8">
В HTML значение атрибута type
элемента style
по умолчанию равно text/css
.
Плохо:
<style type="text/css">
...
</style>
Хорошо:
<style>
...
</style>
Этот ритуал предназначен для старого браузера.
Плохо:
<style>
<!--
...
-->
</style>
Хорошо:
<style>
...
</style>
Иногда элемент script
блокирует построение DOM.
Плохо:
<script src="/js/jquery.min.js"></script>
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/main.js"></script>
Хорошо:
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
Так же хорошо:
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
<link href="/css/screen.css" rel="stylesheet">
Иногда элемент body
дополняется браузером в неожиданном месте.
Плохо:
<html>
<head>
...
</head>
...
</html>
Хорошо:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Этот элемент используется нечасто.
Плохо:
<hgroup>
<h1>HTML Best Practices</h1>
<h2>For writing maintainable and scalable HTML documents.</h2>
</hgroup>
Хорошо:
<h1>HTML Best Practices</h1>
<p>For writing maintainable and scalable HTML documents.</p>
Элемент address
предназначен для адреса электронной почты, аккаунта в социальной сети, адреса улицы, номер телефона или что-то, с чем вы можете связаться.
Плохо:
<address>No rights reserved.</address>
Хорошо:
<address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
Первая новая строка игнорируется браузерами, но вторая и последующие строки отображаются.
Плохо:
<pre>
<!DOCTYPE html>
</pre>
Хорошо:
<pre><!DOCTYPE html>
</pre>
Содержимое элемента blockquote
- это цитата, а не куски символов.
Плохо:
<blockquote>For writing maintainable and scalable HTML documents.</blockquote>
Хорошо:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
Содержимое элемента blockquote
- это цитата.
Плохо:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
<p>— HTML Best Practices</p>
</blockquote>
Хорошо:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<p>— HTML Best Practices</p>
Так же хорошо:
<figure>
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<figcaption>— HTML Best Practices</figcaption>
</figure>
Длиннyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyю строку тяжело читааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааать.
Плохо:
<ul>
<li>General</li><li>TКорневой элемент</li><li>Sections</li>...
</ul>
Хорошо:
<ul>
<li>General</li>
<li>TКорневой элемент</li>
<li>Sections</li>
...
</ul>
Иногда на маркер ссылается содержимое в ближней части. Если вы измените маркер с помощью атрибута type
, вы будете в безопасности для ссылок.
Плохо:
<head>
<style>
.toc {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol class="toc">
<li>General</li>
<li>TКорневой элемент</li>
<li>Sections</li>
...
</ol>
</body>
Хорошо:
<body>
<ol type="I">
<li>General</li>
<li>TКорневой элемент</li>
<li>Sections</li>
...
</ol>
</body>
Элемент dl
ограничен ассоциативным списком в HTML.
Плохо:
<dl>
<dt>Costello</dt>
<dd>Look, you gotta first baseman?</dd>
<dt>Abbott</dt>
<dd>Certainly.</dd>
<dt>Costello</dt>
<dd>Who’s playing first?</dd>
<dt>Abbott</dt>
<dd>That’s right.</dd>
<dt>Costello becomes exasperated.</dd>
<dt>Costello</dt>
<dd>When you pay off the first baseman every month, who gets the money?</dd>
<dt>Abbott</dt>
<dd>Every dollar of it.</dd>
</dl>
Хорошо:
<p>Costello: Look, you gotta first baseman?</p>
<p>Abbott: Certainly.</p>
<p>Costello: Who’s playing first?</p>
<p>Abbott: That’s right.</p>
<p>Costello becomes exasperated.</p>
<p>Costello: When you pay off the first baseman every month, who gets the money?</p>
<p>Abbott: Every dollar of it.</p>
Спецификация не позволяет использовать элемент figcaption
в середине элемента figure
.
Плохо:
<figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
</figure>
Хорошо:
<figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
</figure>
Элемент main
может быть использован для обертывания содержимого.
Плохо:
<div id="content">
...
</div>
Хорошо:
<main>
...
</main>
Элемент div
- это элемент последней надежды.
Плохо:
<div class="chapter">
...
</div>
Хорошо:
<section>
...
</section>
Элемент a
может обернуть практически все элементы (кроме интерактивных элементов, таких как элементы управления формой и сам элемент a
).
Плохо:
<h1><a href="https://whatwg.org/">WHATWG</a></h1>
<p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>
Хорошо:
<a href="https://whatwg.org/">
<h1>WHATWG</h1>
<p>A community maintaining and evolving HTML since 2004.</p>
</a>
Это заставит браузеры загрузить связанный ресурс в хранилище.
Плохо:
<a href="/downloads/offline.zip">offline version</a>
Хорошо:
<a download href="/downloads/offline.zip">offline version</a>
Эти подсказки помогают приложениям работать со связанным ресурсом.
Плохо:
<a href="/ja/pdf">Japanese PDF version</a>
Хорошо:
<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
Текст ссылки должен представлять собой метку связанного с ней ресурса.
Плохо:
<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
Хорошо:
<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
Это серьезно! Поэтому элемент strong
подходит больше.
Плохо:
<em>Caution!</em>
Хорошо:
<strong>Caution!</strong>
Семантика этих элементов слишком сложна для человека.
Плохо:
<i class="icon-search"></i>
Хорошо:
<span class="icon-search" aria-hidden="true"></span>
Кавычки предоставляются браузером.
Плохо:
<q>“For writing maintainable and scalable HTML documents”</q>
Хорошо:
<q>For writing maintainable and scalable HTML documents</q>
Так же хорошо:
“For writing maintainable and scalable HTML documents”
Нет другого способа представить его полную форму.
Плохо:
<abbr>HBP</abbr>
Хорошо:
<abbr title="HTML Best Practices">HBP</abbr>
Поддержка элемента ruby
не завершена в современных браузерах.
Плохо:
<ruby>HTML<rt>えいちてぃーえむえる</ruby>
Хорошо:
<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
Когда атрибут datetime
не присутствует, формат содержимого элемента time
ограничивается.
Плохо:
<time>Dec 19, 2014</time>
Хорошо:
<time datetime="2014-12-19">Dec 19, 2014</time>
Это не формальный способ, но в спецификации он упоминается.
Плохо:
<code><!DOCTYPE html></code>
Хорошо:
<code class="language-html"><!DOCTYPE html></code>
Вложенность элемента kbd
слишком сложна для человека.
Плохо:
<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
Хорошо:
<kbd>Ctrl+F5</kbd>
Элемент span
- это элемент последней надежды.
Плохо:
HTML <span class="best">Best</span> Practices
Хорошо:
HTML <em>Best</em> Practices
Перевод строки должен быть необходим там, где используется элемент br
.
Плохо:
<p>HTML<br>Best<br>Practices</p>
Хорошо:
<p>HTML<br>
Best<br>
Practices</p>
Элемент br
не предназначен для декоративного перевода строки, он предназначен для перевода строки в содержимом.
Плохо:
<p><label>Rule name: <input name="rule-name" type="text"></label><br>
<label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
Хорошо:
<p><label>Rule name: <input name="rule-name" type="text"></label></p>
<p><label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
Элементы не могут быть переполнены другими элементами.
Плохо:
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
<p>Don’t trust!</p></del>
Хорошо:
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
<del><p>Don’t trust!</p></del>
Поддержка элемента picture
пока не очень хороша.
Плохо:
<picture>
<source srcset="/img/logo.webp" type="image/webp">
<source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
<source srcset="/img/logo.jp2" type="image/jp2">
<source srcset="/img/logo.jpg" type="image/jpg">
</picture>
Хорошо:
<picture>
<source srcset="/img/logo.webp" type="image/webp">
<source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
<source srcset="/img/logo.jp2" type="image/jp2">
<img src="/img/logo.jpg">
</picture>
Атрибут alt
помогает тем, кто не может обрабатывать изображения или у кого загрузка изображений отключена.
Плохо:
<img src="/img/logo.png">
Хорошо:
<img alt="HTML Best Practices" src="/img/logo.png">
Если изображение является дополнительным, значит, где-то рядом находится эквивалентный контент.
Плохо:
<img alt="Question mark icon" src="/img/icon/help.png"> Help
Хорошо:
<img alt="" src="/img/icon/help.png"> Help
Иногда вы не знаете, какой текст подходит для атрибута alt
.
Плохо:
<img alt="CAPTCHA" src="captcha.cgi?id=82174">
Хорошо:
<img src="captcha.cgi?id=82174" title="CAPTCHA">
(If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)
Существует некоторое ограничение в его содержании. Быть пустым всегда безопасно.
Плохо:
<iframe src="/ads/default.html">
<p>If your browser support inline frame, ads are displayed here.</p>
</iframe>
Хорошо:
<iframe src="/ads/default.html"></iframe>
Этот контент предназначен для программ читающих с экрана.
Плохо:
<map name="toc">
<a href="#general">General</a>
<area alt="General" coords="0, 0, 40, 40" href="#General"> |
<a href="#the_root_element">TКорневой элемент</a>
<area alt="TКорневой элемент" coords="50, 0, 90, 40" href="#the_root_element"> |
<a href="#sections">Sections</a>
<area alt="Sections" coords="100, 0, 140, 40" href="#sections">
</map>
Хорошо:
<map name="toc">
<p>
<a href="#general">General</a>
<area alt="General" coords="0, 0, 40, 40" href="#General"> |
<a href="#the_root_element">TКорневой элемент</a>
<area alt="TКорневой элемент" coords="50, 0, 90, 40" href="#the_root_element"> |
<a href="#sections">Sections</a>
<area alt="Sections" coords="100, 0, 140, 40" href="#sections">
</p>
</map>
Вспомогательный контент необходим для вновь введенных элементов в HTML.
Плохо:
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">
...
</video>
Хорошо:
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">
...
<iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>
Длинные строки трудно сканировать.
Плохо:
<tr>
<td>General</td><td>TКорневой элемент</td><td>Sections</td>
</tr>
Хорошо:
<tr>
<td>General</td>
<td>TКорневой элемент</td>
<td>Sections</td>
</tr>
Нет причин избегать этого.
Плохо:
<table>
<thead>
<tr>
<td><strong>Element</strong></td>
<td><strong>Empty</strong></td>
<td><strong>Tag omission</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td><strong><code>pre</code></strong></td>
<td>No</td>
<td>Neither tag is omissible</td>
</tr>
<tr>
<td><strong><code>img</code></strong></td>
<td>Yes</td>
<td>No end tag</td>
</tr>
</tbody>
</table>
Хорошо:
<table>
<thead>
<tr>
<th>Element</th>
<th>Empty</th>
<th>Tag omission</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>pre</code></th>
<td>No</td>
<td>Neither tag is omissible</td>
</tr>
<tr>
<th><code>img</code></th>
<td>Yes</td>
<td>No end tag</td>
</tr>
</tbody>
</table>
Элемент label
помогает сфокусировать элемент формы.
Плохо:
<p>Query: <input name="q" type="text"></p>
Хорошо:
<p><label>Query: <input name="q" type="text"></label></p>
Элемент label
может содержать некоторые элементы формы.
Плохо:
<label for="q">Query: </label><input id="q" name="q" type="text">
Хорошо:
<label>Query: <input name="q" type="text"></label>
С помощью соответствующего type
браузер наделяет элемент input
крошечными возможностями.
Плохо:
<label>Search keyword: <input name="q" type="text"></label>
Хорошо:
<label>Search keyword: <input name="q" type="search"></label>
Метка по умолчанию для кнопки submit не стандартизирована для разных браузеров и языков.
Плохо:
<input type="submit">
Хорошо:
<input type="submit" value="Search">
Если вводимый текст не соответствует атрибуту pattern
, значение атрибута title
будет отображаться в качестве подсказки.
Плохо:
<input name="security-code" pattern="[0-9]{3}" type="text">
Хорошо:
<input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
Элемент label
предназначен для метки, атрибут placeholder
- для короткой подсказки.
Плохо:
<input name="email" placeholder="Email" type="text">
Хорошо:
<label>Email: <input name="email" placeholder="[email protected]" type="text"></label>
Длинные строки трудно сканировать.
Плохо:
<datalist id="toc">
<option label="General"><option label="TКорневой элемент"><option label="Sections">
</datalist>
Хорошо:
<datalist id="toc">
<option label="General">
<option label="TКорневой элемент">
<option label="Sections">
</datalist>
С помощью атрибута max
атрибут value
может быть записан в удобном формате.
Плохо:
<progress value="0.5"> 50%</progress>
Хорошо:
<progress max="100" value="50"> 50%</progress>
С помощью атрибутов min
и max
атрибут value
может быть записан в удобном формате.
Плохо:
<meter value="0.5"> 512GB used (1024GB total)</meter>
Хорошо:
<meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
Спецификация требует этого.
Плохо:
<fieldset>
<p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
<legend>About "General"</legend>
</fieldset>
Хорошо:
<fieldset>
<legend>About "General"</legend>
<p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
</fieldset>
В HTML значение атрибута type
элемента script
по умолчанию равно text/javascript
.
Плохо:
<script type="text/javascript">
...
</script>
Хорошо:
<script>
...
</script>
Этот ритуал предназначен для старого браузера.
Плохо:
<script>
/*<![CDATA[*/
...
/*]]>*/
</script>
Также плохо:
<script>
<!--
...
// -->
</script>
Хорошо:
<script>
...
</script>
Атрибут async
является лучшим как по простоте, так и по производительности.
Плохо:
<script>
var script = document.createElement("script");
script.async = true;
script.src = "//example.com/widget.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
Хорошо:
<script async defer src="https://example.com/widget.js"></script>
Отступы важны для удобоного чтения.
Плохо:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Хорошо:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Абсолютный путь лучше работает на локальном хосте без подключения к Интернету.
Плохо:
<link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>
Хорошо:
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="/contact.html">contact page</a>.</p>
С помощью протокола вы можете надежно и безопасно загружать внешние ресурсы.
Плохо:
<script src="//example.com/js/library.js">
Хорошо:
<script src="https://example.com/js/library.js">