Внешний вид сайта:

Высокопроизводительный HTML

Высокопроизводительный HTML
В статье автор дает советы по написанию чистого, лаконичного и производительного HTML. Вы узнаете, как создавать сайты и приложения, которые легко отлаживать и поддерживать.

Как вы можете улучшить производительность web страниц?

Большинство разработчиков стараются оптимизировать JavaScript, конфигурацию сервера, используют сборку и минификацию файлов — даже хитрости CSS. А бедным старым HTML пренебрегают, не смотря на то, что он является основным языком в web.

HTML становится все тяжелее . HTML страницы большинства из TOP100 сайтов требуют около 40k на HTML . Такие сайты как Amazon или Yahoo содержат тысячи строк HTML кода. Главная страницы youtube.com на текущий момент содержит около 3.5 тысяч HTML элементов.

Уменьшение сложности HTML и количества элементов на странице не очень сильно ускоряет парсинг страницы , но хорошо написанный HTML является основой быстрозагружающихся и адаптивных страниц.

В этой статье вы узнаете, как писать чистый, лаконичный HTML, что позволяет создавать страницы, которые быстро загружаются и хорошо работают на различных устройствах. Также мы поговорим о том, как создавать сайты и приложения, которые легко отлаживать и поддерживать.

Всегда существует более одного способа написать тот или иной код — особенно HTML. Вместо того, чтобы каждое утверждение начинать с выражения «В целом ...», я сразу оговорюсь, что основываюсь на своем опыте. Это не означает, что каждое предложение является правильным в любой ситуации.

tl;dr

  • Разделяйте ответственности: используйте HTML для задания структуры, а не внешнего отображения.
  • Держите код чистым: используйте инструменты валидации кода во время работы.
  • Держите код аккуратным: используйте инструменты и стандарты , чтобы поддерживать единую структуру кода и форматирование.
  • Изучайте язык: чтобы разметка была семантичной .
  • Обеспечивайте доступность: используйте ARIA атрибуты , а также атрибуты резервного содержимого. Ваш сайт должен быть доступен в текстовых браузерах и скринридерах .
  • Тестируйте: проверяйте ваш сайт на различных устройствах и размерах экрана, используйте эмуляторы и инструменты анализа производительности .

HTML, CSS и JavaScript

HTML — это язык разметки для добавления структуры и содержания.

Не стоит использовать HTML для определения стиля отображения. Не нужно помещать текст в теги заголовков, чтобы «сделать его больше» или использовать цитаты для того, чтобы добавить отступы блоку. Вместо этого, чтобы изменить внешний вид и расположение элементов, используйте CSS.

Внешний вид HTML элементов по умолчанию определяется стилями браузера по умолчанию: в Chrome, Firefox, Internet Explorer, Opera — у каждого есть свои собственные . Например, в Chrome элемент h1 по умолчанию отображается жирным шрифтом 32px Times.

Три главных принципа:

  • Используйте HTML для структуры, CSS для представления и JavaScript для поведения. CSS Zen Garden (которому в этом году 12 лет!) показывает такое разделение в действии.
  • Используйте HTML, затем CSS, если и когда это требуется, — и потом, если это действительно необходимо, JavaScript. Например: во многих случаях можно использовать HTML для валидации формы , и CSS или SVG для анимации — не прибегая к JavaScript.
  • Держите CSS и JavaScript в файлах отдельно от HTML. Это позволяет кэшировать их в браузере и делает отладку кода удобнее. При сборке в продакшене можно минифицировать , объединить и встроить скрипты и стили в страницу.

Структура документа

Используйте тип документа HTML5. Пример структуры документа:

<!DOCTYPE html>
<html>

<head>
<title>Recipes: pesto</title>
</head>

<body>
<h1>Pesto</h1>
<p>Pesto is good!</p>
</body>
</html>
Ссылки на CSS файлы должны быть вверху страницы, в элементе head: 
<head>
  <title>My pesto recipe</title>

  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">

</head>

Таким образом, браузер будет иметь информацию о стилях до парсинга HTML.

Подключайте JavaScript в нижней части страницы, перед закрывающим тегом body. Это ускорит загрузку страницы, так как браузер сможет отобразить ее до разбора JavaScript. Также это имеет полезный побочный эффект — позволяет JavaScript обращаться к элементам страницы:

<body>

  ...

  <script src="/js/global.js">
  <script src="js/local.js">

</body>

В качестве альтернативы можно использовать атрибуты async и defer — но нужно понимать, как они работают: нет гарантии, что скрипты с атрибутом async выполнятся в том порядке, в котором они подключены. Также стоит учесть поддержку браузерами: атрибут async поддерживается Internet Explorer 10 и выше ; defer — только частично поддерживается начиная с Internet Explorer 10.

Добавляйте обработчики событий в JavaScript, НЕ в HTML. В примере ниже код чреват ошибками и его трудно поддерживать:

index.html:

<head>
  
  ...

  <script src="js/local.js">

</head>

<body onload="init()">

  ...

  <button onclick="handleFoo()">Foo</button>

  ...

</body>

Такой варинт гораздо лучше:

index.html:

<head>

  ...

</head>

<body>

  ...

  <button id="foo">Foo</button>

  ...

  <script src="js/local.js">

</body>

js/local.js:

init();
var fooButton =
    document.querySelector('#foo');
fooButton.onclick = handleFoo();

Валидация

Одной из основных причин успеха веба является то, что браузеры обрабатывают невалидный HTML. Есть даже стандартизированные правила того, как браузеры должны отображать невалидный код .

Тем не менее, это НЕ повод не обращать внимания на валидацию. Валидный HTML легче отлаживать, он чаще меньше по размеру, быстрее и менее ресурсоемкий для парсинга и отображения. Невалидный HTML может создать проблемы при реализации адаптивного дизайна.

Написание валидного HTML является особенно важным при работе с шаблонами: то что, кажется, хорошо работает в изолированном фрагменте кода, может некорректно сочетаться с другими шаблонами.

Включите проверку валидности в процесс разработки: можно использовать плагины к среде разработки, такие как HTMLHint и SublimeLinter , и включить проверку валидности в процесс сборки, используя такие инструменты, как HTMLHint для Grunt . Вы можете проверить код на сайте с помощью таких инструментов, как W3C HTML validator .

Используйте тип документа HTML5.

Убедитесь, что иерархия HTML поддерживается корректно: элементы правильно вложены друг в друга. Убедитесь, что ни один из тегов не остался незакрытым. Для отладки может быть полезно добавлять комментарий к закрывающимся тегам, содержащим сложный контент — особенно при использовании шаблонов:

<div id="foobar">

...

</div> <!-- foobar ends -->

Убедитесь, что добавили закрывающийся тег ко всем не самозакрывающимся тегам.

Например, такой код будет работать:

<p>Pesto is good to eat...
<p>...and pesto is easy to make.

Но в пример ниже сожнее допустить ошибку, т.к. закрывающийся тег указан явно:

<p>Pesto is good to eat...</p>
<p>...and pesto is easy to make.</p>

Закрывающие теги не являются обязательными для элементов списка и некоторые очень умные разработчики считают, что их использовать не нужно. Как бы там ни было, убедитесь, что закрыли каждый элемент списка:

<ul>
  <li>Basil
  <li>Pine nuts
  <li>Garlic
</ul>

Закрывающиеся теги нужно обязательно писать для элементов video и audio. Они не являются «самозакрывающимися»:

<!-- wrong: liable to cause layout grief -->
<video src="foo.webm" />

<!-- better -->
<video src="foo.webm">
  <p>Video element not supported.</p>
</video>

В определенных местах, наоборот, можно удалить ненужный код:

Не нужно добавлять слеш к самозакрывающимся элементам, таким как <img> или <link>. Логические атрибуты не должны иметь значения: если атрибут установлен — его значение true. В примере ниже элемент video не проигрывается автоматически и не имеет контролов (поведение по умолчанию):

<video src="foo.webm">

Следующий пример работает не так, как ожидается, поскольку установленные атрибуты имеют значение true:

<video src="foo.webm" autoplay="false" controls="false">

Так работает правильно:

<video src="foo.webm" autoplay="true" controls="true">

Но более читаемо:

<video src="foo.webm" autoplay controls>

Для стилей и скриптов не нужно указывать атрибут type — CSS и JavaScript определяются по умолчанию.

Не указывайте протокол, если ссылка ведет на внешний ресурс: это может вызвать проблему смешанного содержимого. Например:

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

Форматирование кода

Единое форматирование делает HTML код проще для понимания, оптимизации и отладки.

Договоритесь в команде об использовании единого стиля (или используйте один из существующих, например, от Google ).

Используйте инструменты автоформатирования в среде разработки. Например, в Sublime можно задать горячую клавишу для автоформата . Также вы можете использовать инструменты проверки кода, например, SublimeLinter или онлайн-инструменты, такие как CSS Beautyfy или JS Beautifier .

Не переусердствуйте с отступами! Это может легко выйти из-под контроля, поэтому установите разумное значение по умолчанию для отступа. Если иерархия слишком глубокая, возможно данный участок кода нужно отрефакторить.

Стандартизируйте отступы, используйте либо табы, либо пробелы, но не и то и другое вместе.

Улучшайте читаемость с помощью правильного вложения. В примере ниже сразу видно, что это заголовок:

<h2><a href="/contact">Contact</a><h2>

…в то время как следующий пример выглядит как ссылка:

<a href="/contact"><h2>Contact</h1></a>

Придеживайтесь правильного порядка элементов, чтобы другие разработчики или вы сами через пол года не удивлялись. Например, элемент footer должен быть расположен внизу .html страницы, хотя (в теории) может находиться где угодно.

Используйте либо одинарные, либо двойный кавычки.

Атрибуты и теги пишите в нижнем регистре. Верхний регистр мозолит глаза:

<A HREF="/">Home</A>

Но смешанный регистр еще хуже:

<H2>Pesto</h2>

Семантическая разметка

Семантичный значит подходящий по смыслу.

HTML-разметки добавляет смысл содержимому: название элемента и атрибутов описывают роль содержимого.

В HTML5 появилось несколько новых «семантических элементов», таких как <header>, <footer> и <nav>.

Использование правильных элементов делает контент доступным, код более понятным:

  • Используйте теги <h1> (<h2>, <h3>...) для заголовков, <ul> или <ol> для списков.
  • Обратите внимание, что заголовком в теге <article> должен быть <h1>.
  • Там, где это уместно, используйте семантичные элементы HTML5 , такие как <header>, <footer>, <nav> и <aside>.
  • Используйте тег <p> для текста, HTML5 элементы (или <div>) для структуры — а не наоборот.
  • Используйте <em> и <strong> вместо <i> and <b>: <em> и <strong> добавляют смысл, а не стиль.
  • В формах используйте элементы
  • Смешивание элементов и текста внутри другого элемента как правило приводит к ошибкам. Например:
    <div>Name: <input type="text" id="name"></div>
    гораздо лучше написать: 
    <div>
    <label for="name">Name:</label><input type="text" id="name">
</div>
    В этом есть еще и полезный побочный эффект: клик по ссылке будет автоматически ставить фокус на поле ввода. Особенно это полезно для чекбоксов и радио-кнопок.

Позиционирование

Повторюсь: HTML нужно использовать для добавления смысла и структуры содержимого, а не для стилизации.

Используйте <p> для текста, а не для позиционирования. По умолчанию, <p> имеет отступы и другие встроенные стили браузера.

Избегайте использования <br> для перевода строки: вместо этого используйте блочные элементы или свойство CSS display. Тег <br> может использоваться только в тексте, — и даже тогда очень редко.

Избегайте использования тега <hr> для добавления горизонтальных линий: вместо этого лучше использовать свойство CSS border-bottom. Можно использовать <hr> для обозначения тематического разрыва.

Не используйте лишние дивы: спецификация W3C HTML описывает div как последнее средство, когда ни один из элементов не подходит. Стилизуйте инлайновые элементы с помощью display: block вместо того, чтобы оборачивать их в <div> или (что еще хуже) использовать <br>.

Не оборачивайте блочные элементы в <div>. Например, нет необходимости помещать список внутрь дива.

Не используйте таблицы для позиционирования. Не используйте таблицы для выравнивания содержимого.

Flexbox уже хорошо поддерживается браузерами: используйте его.

Используйте свойства padding и margin по назначению: необходимо хорошо понимать блочную модель.

Стандартизируйте отступы. Лучше задавать отступы снизу и справа, чем свержу и слева. В любом случае, избегайте смешивания верхних и нижних или левых и правых отступов. Используйте селектор last-of-type, чтобы убрать лишние отступы.

HTML email-рассылки

Верстка email-рассылки отличается от верстки для web.

Я не буду вдаваться в ужасные подробности — достаточно сказать, что лучшая практика вертски для email-рассылки напоминает веб-разработку конца 1990-х: таблицы, минимальный CSS, плохая поддержка изображений и медиа, минимальная поддержка JavaScript, и много мелких хаков (взгляните на базовый шаблон MailChimp).

CSS

Эта статья об HTML, но я также дам несколько советов, касающихся CSS:

  • Избегайте инлайновых стилей. Для оптимизации производительности, вы можете объединить и встроить CSS в страницу во время сборки.
  • Используйте уникальные ID: на странице должен быть только один элемент с id="foo", с id="bar", или любым другим ID.
  • Используйте классы для стилизации нескольких однородных элементов — стоит взглянуть на синтаксис BEM. Там, где это возможножно, задавайте класс родительскому элементу, а не дочерним:
    <!-- verbose :( -->
<ul>
    <li class="ingredient">Basil</li>
    <li class="ingredient">Pine nuts</li>
    <li class="ingredient">Garlic</li>
</ul>
<!-- better :) -->
<ul class="ingredients">
    <li>Basil</li>
    <li>Pine nuts</li>
    <li>Garlic</li>
</ul>

Доступность

Используйте семантическую разметку.

Добавляйте заголовки и субтитры с помощью элемента track, указывайте атрибут alt у изображений (или alt с пустым значением, если изображение несе только декоративный смысл).

Добавляйте атрибут title у ссылок — но он должен быть значащим и не дублировать текст ссылки.

Используйте правильные типы поле ввода и указывайте атрибут placeholder.

Используйте ARIA атрибуты.

Прочие советы

Убедитесь в кодировании спецсимволов, таких как < и &. Например:

<title>HTML & JavaScript</title>

Некоторые символы, такие как тире (например, 4–5 недель) или обозначения валют, например, ¢ и €, кодировать не нужно.

Добавляйте комментарии, если и только если не очевидено, что происходит в коде (необходимость комментирования кода часть показывает необходимость рефакторинга — хороший HTML, даже если он сложный, как правило, не требует пояснений).

Там, где текст должен быть полностью в верхнем регистре — например, в заголовке — используйте свойства CSS text-transform и font-variant, а не вводите текст заглавными буквами. Позже вы можете изменить свое решение! Кроме того, если пользователи будут копировать текст, они врядли захотят, чтобы он был в верхнем регистре. В примере ниже, текст отображается в нижнем регистре, но копируется он в верхнем и нижнем регистре.

HTML:

<h4>W3C Web Accessibility Initiative ARIA guidance</h4>

CSS:

h4 {
    font-variant: small-caps;
}

И наконец...

Что бы вы не делали, тестируйте!

Внедрите этап тестирования в свой рабочий процесс и процесс деплоймента.

Проверяйте загрузку страницы на различных устройствах, на больших и малых экранах, в различных контекстах. Попробуйте открыть страницу в текстовом браузере, таком как Lynx, или с помощью скринридера, например ChromeVox. Используйте эмуляторы, такие как режим мобильного устройства в Chrome Dev. Page Speed, Web Page Test и другие инструменты могут быть интегрированы с процесс разработки для автоматизации тестирования.

Больше информации об оптимизации HTML можно прочитать по ссылкам HTML, CSS and JavaScript resources и Web Fundamentals.

 
—
coder

Комментарии

Нет комментариев. Ваш будет первым!