Чеклист HTML

Новые требования к качеству сайтов

• Помимо автоматизированного тестирования доступности: шесть вещей, которые я проверяю на каждом своём сайте — Веб-стандарты

Требования к HTML коду сайтов, создаваемых в студии «Зина дизайн».

Инструменты проверки: Mozilla Firefox 3 с плагинами Web Developer и HTML Validator.

1. Кроссбраузерность

1. Сайт одинаково, насколько это возможно, выглядит в браузерах, и страницы сайта выглядят так, как в утвержденном эскизе дизайна:
   • [ ] Internet Explorer 7
   • [ ] Internet Explorer 8
   • [ ] Mozilla Firefox 3
   • [ ] Opera 9
   • [ ] Apple Safari 3
   • [ ] Google Chrome 4

Одной строкой: Internet Explorer 7+, Mozilla Firefox 3+, Opera 9+, Apple Safari 3+, Google Chrome.

Об Internet Explorer 6

2. Корректный XHTML

1. [ ] Проверка на http://validator.w3.org/ (Ctrl+Shift+A в плагине «Web Developer») не находит ни одной ошибки.

3. Доступность (accessibility)

1. [ ] Кодировка страницы UTF-8 и явно указана в <head>:

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2. [ ] Картинки имеют минимально возможный вес и максимально возможное качество.
3. [ ] У всех картинок есть альтернативный текст (Графика → Показать вместо изображений атрибут Alt). Если изображение не является содержательным, значение атрибута пустое (alt="").
4. [ ] Областям с фоновым изображением назначен соответствующий цвет фона (Графика → Скрыть фоновые изображения).
5. [ ] Основной шрифт имеет относительный размер (задан в % или em, но не в px или pt).
6. [ ] У основного текста или области контента задан max-width.
7. [ ] Есть версия для печати:
   • Обязательно — путем подстановки CSS файла при посылке на принтер
   • Желательно — в виде отдельной ссылки «Версия для печати» возле заголовка страницы.

4. Семантика кода

Код XHTML логичный и красивый.

1. При отключенных таблицах стилей (Ctrl+Shift+S в плагине «Web Developer») страница выглядит понятно:
   • [ ] заголовки (размечены h1-h4)
   • [ ] навигация (размечены списками)
2. Иерархия заголовков (Инфо → Оглавление документа, Information → View Document Outline):
   • [ ] h1 только один на страницу
   • [ ] структура заголовков ниспадающая, последовательная, без пропусков.
3. [ ] <title> осмысленно заполнен и совпадает с h1.
4. [ ] Используются контекстонезависимые теги, например: <strong> вместо <b>, <em> вместо <i>, тэги , <acronym> и т. п.
5. [ ] Исходный код (Ctrl+U) не перегружен таблицами и дивами.
6. [ ] Таблицы используются обоснованно:
   • Контуры → Контур таблиц → Таблицы
   • Инфо → Показать вложенные таблицы
7. [ ] Обрабатывать текст Типографом http://www.typograf.ru/

5. Форматирование исходного кода

1. [ ] Иерархия кода выделена отступами в виде 4 пробелов и пустыми строками.
2. [ ] Все оформление вынесено в таблицы стилей в отдельные CSS файлы.
3. [ ] Изображения лежат в папке images, CSS файлы в папке css.
4. [ ] Используется reset.css: http://zina.local/css/zcss/reset.css
5. [ ] Формат имён классов и картинок: причастиеПрилагательныеСуществительное на английском, без транслита. Слова выделяются заглавными буквами, первый символ всегда строчная буква. Пример: shortNews, mainMenu.
6. [ ] Имена привязаны к смыслу/значению, а не к оформлению. Пример:
   • Неправильно: leftColumnWithGrayBorderAtTop (привязано к оформлению)
   • Правильно: secondaryContent (привязно к смыслу блока)
7. [ ] Иерархия блоков и элементов блока поддерживается иерархией селекторов. Нежелательно «клонирование имён», например для news: newsDate, newsHead, newsBody.
8. [ ] Назначение тегу нескольких классов предпочтительнее «обёрток» и клонирования имён.
9. [ ] Стили записаны в компактном виде: margin:10px 5px 0 5px; вместо margin-bottom:5px; margin-left:5px; margin-top:10px;
10. [ ] Последнее свойство в описании класса завершается точкой с запятой.
11. [ ] Порядок модификаторов для ссылок: link, visited, hover, active (love-ha).

6. Адреса разделов и страниц

1. [ ] Все разделы и страницы имеют адреса URL:
   • [ ] английские
   • [ ] подходящие по смыслу
   • [ ] короткие
2. [ ] Все страницы разделов имеют адреса, отображающие вложенность. Например, страница «Руководство», находящаяся в разделе «О компании», должна иметь примерно такой адрес: /company/management

См. также

• Новые требования к сайтам
• Копирайты
• Internet Explorer 6
• http://promodev.ru/checklist/