1. W3C Validator
Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:
- не закрыт тег;
- не рекомендованные символы в ссылках;
- используется не рекомендованный тег;
- не указан обязательный атрибут;
- и другое.
2. Вёрстка в формате UTF-8
При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.
Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).
Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:
<meta charset="utf-8">
3. Одинаковые id у нескольких элементов
Значение атрибута id в HTML-коде не должно повторяться.
<!-- не правильно -->
<div id="block"></div>
<div id="block"></div>
<!-- правильно -->
<div id="block-1"></div>
<div id="block-2"></div>
4. Спрайты
Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.
Пример спрайта
Пример на JSFiddle
Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.
Преимущества шрифтов к спрайтам, это сохранение качества при изменении размера иконок и меньший размер. Но недостаток, нельзя использовать больше одного цвета в иконке.
5. Много селекторов
Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.
/* не рекомендуется, большая вложенность */
.page .item .title a {}
/* можно сократить */
.page .item a {}
Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.
Если есть возможность, то выборку рекомендуется сокращать до одного селектора:
/* рекомендуется */
.form-submit a {}
/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}
6. Стили в HTML
HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.
<!-- не правильно -->
<p style="color: red">Ошибка в коде</p>
<!-- правильно -->
<p class="error">Ошибка в коде</p>
7. Неправильное названия классов
Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.
<p class="message green">Текст сообщения</p>
Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс .green и заменять его на .blue.
Чтобы избегать подобных ситуаций, не рекомендуется применять классы для смены цвета, выравнивания текста, изменения регистра. Надо называть сами элементы (шапка, подвал, сообщение), и применять к нему свои стили.
<!-- неправильно -->
<p class="message green">Текст сообщения</p>
<!-- правильно -->
<p class="message message-success">Текст сообщения</p>
8. Пиксели в дробных значениях
Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».
p {
/* не правильно */
letter-spacing: 1.5px;
/* правильно */
letter-spacing: .005em;
}
9. Использование классов вместо id
Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.
#modal a {
color: blue;
}
/* цвет ниже не получится переопределить,
т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
color: #333;
}
/* в этом случае придётся добавить #modal */
#modal .modal-header a {
color: #333;
}
Также не рекомендуется использовать !important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.
10. Меню
Меню должно быть оформлено как список.
<!-- неправильно -->
<p><a href="#">Главная</a> <a href="#">Новости</a> <a href="#">О компании</a></p>
<!-- правильно -->
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">О компании</a></li>
</ul>
11. Пропущенный alt у картинок
В тегах надо указывать атрибут alt (можно пустой).
<!-- неправильно -->
<img src="pic.jpg">
<!-- правильно -->
<img src="pic.jpg" alt="Картинка">
<img src="pic.jpg" alt="">
12. Теги <h1>
На странице должен быть только один заголовок в теге <h1>. В основном, в этом теге находится название страницы.
13. Транскрипция
Названия всех элементов надо писать в английском переводе. Даже если не известно, как слово пишется по-английски, есть много бесплатных сервисов, которые могут перевести. Когда встречаются названия элементов транскрипцией, это выгладит непрофессионально.
/* неправильно */
.tovar {}
.stranica {}
.zapros {}
/* правильно */
.product {}
.page {}
.query {}
14. Clearfix
Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.
Класс .clearfix надо указывать в родительском теге, а не ставить рядом.
<!-- неправильно -->
<div>
<div class="float-left"></div>
<div class="float-right"></div>
<div class="clearfix"></div>
</div>
<!-- правильно -->
<div class="clearfix">
<div class="float-left"></div>
<div class="float-right"></div>
</div>
15. HTML — язык программирования
Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.
Комментарии (50)
aliencash
28.08.2016 17:52+3Спасибо, кэп.
12. Теги На странице должен быть только один заголовок в теге . В основном, в этом теге находится название страницы.
Кстати html5 допускает на одной странице несколько h1 заголовков, каждый пределах ```html
```
G-M-A-X
28.08.2016 20:05Ничто не мешало использовать и в html4 более одного h1.
Просто логически в этом мало смысла.
Если нужно несколько h1, то может стоит использовать h2.
1 h1 нужен больше поисковикам.aliencash
28.08.2016 23:10Ну как же ничто не мешало, код ведь получался несемантичный. Сейчас с появлением section с этим проблем нет.
kahi4
29.08.2016 00:52+2Более того, он рекомендует это делать. w3c. В каждом section должен быть свой h1, что иногда заставляет попотеть и воспламеняет невероятные споры с СЕО-шниками, которых даже стандарты переубедить не могут.
Далее немного конструктивной критики
- про длину селекторов и что браузеру что-то там тяжело — не в 2016 году, да и почему именно 3? Магическое число?
- магические числа. Про них не сказано, зато примеры с ними есть. Они как 2005 были злом, так и остались. Разработчик должен понимать откуда каждое число берется
- у иконочного шрифта есть еще одно огромнейшее преимущество: возможность перекрашивать иконки, чего нет у спрайта
- инлайновые стили не зло. Через js их вполне можно пихать (так построены половина библиотек на react), как всегда — инструментом нужно пользоваться с умом
- пиксели в дробных значениях что-то сверх-упоротое, не встречал такого, однако, справедливости ради, с чего вдруг пиксель — это что-то неделимое? Ныне в css виртуальный пиксель достаточно поверхностно связан с физическим и не является чем-то неделимым.
- id и классы имеют разное предназначение и их нужно использовать так же с умом, по обстоятельствам, правила в виде "id не должно быть в css" беспочвенно.
- Пункт 10. Это с чего вдруг? Так называемая accessibility ныне достигается иными способами, а семантика — я уже давал ссылку, где есть пример того, как должно выглядеть семантичное меню
- Сравнение html с Word это как сравнить машинный код и visual studio. Во-первых, Word это приложение, а html — язык разметки, во-вторых, внутри docx лежит такой же xml, не так уж и далеко ушедший от html. Просто странное сравнение.
sashabeep
30.08.2016 12:23Мой сеошник был очень рад, когда появился SECTION со своими вложенными тегами заголовков
BlenderRU
28.08.2016 18:24Стили в html можно и нужно применять в виде тега
BlenderRU
28.08.2016 19:00+2Почему-то мой комментарий значительно обрезался.
Попробую повторить:
Стили в HTML можно и нужно применять в виде тега style в заголовке для ускорения загрузки страницы, размещая в нем основные используемые классы, переместив ссылки на файлы остальных стилей в конец html-файла. Разница будет заметна прежде всего в CMS, где используется подгрузка всех стилей независимо от их наличия на конкретной странице. Тоже советует и Google Pagespeed.
Насчет пункта «неправильное название классов» — тут тоже неоднозначно, т.к. например при написании шаблона для CMS мы уже опираемся на константные значения цвета и определенное расположение элементов, которые меняться не будут. Использование в классе понятных имен типа цвета или расположения значительно ускоряет процесс написания и читаемости разметки, с последним например согласен Bootstrap, предоставляя нам набор готовых классов для размещения элементов.
В целом статья кажется незавершенной без комментариев автора относительно тех или иных утверждений, например, почему нужно обязательно использовать атрибут alt в тэгах img, или почему меню должно быть написано с использованием ul/li?
Vurtatoo
28.08.2016 18:37Много вопросов почему нужно именно так, а не иначе. Не во всех пунктах раскрыт этот вопрос.
Alexufo
28.08.2016 19:29+1обычно так "кто так делает, горите в аду11!!!".
Да там вот это
/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}
исходит из предпочтений мнимой потери в производительности. То что на каждый чих увешиваться классами, увеличивать для парсера количества строк, а следовательно терять туже производительность — эт типа норм.
Чем меньше css тем лучше. Как для парсера, так и человека. Все эти игры «id быстрее класса» «два класса хуже чем один» просто из вакуума. Как будто кто-то видел эту разницу на практике.
uwayit
28.08.2016 22:40Согласен. А также некоторые пункты, в частности №13, так вообще не являются ни ошибкой, ни чем либо увеличивающим нагрузку на сервер или браузер… Чистое имхо автора… Да, непрофессионально, но это не ошибка (исходя из заголовка статьи).
riot26
28.08.2016 19:40ИМХО в 5 пункте лучше будет вот так:
/* не рекомендуется, большая вложенность */ .page .item .title a {} /* можно сократить */ .item .title a {}
Ведь по «плохой» версии видно, что пытаются стилизировать ссылку заголовка, а не все ссылки item`а. Ну или как написано дальше:
.item-title-link {}
G-M-A-X
28.08.2016 19:46-3>Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.
На этом чуть менее, чем полностью построен bootstrap :)Shifty_Fox
28.08.2016 22:38bootstrap построен на message message-success, а не на message message-green
G-M-A-X
29.08.2016 11:00Вот эта ерунда https://gist.github.com/bryanwillis/279b0f89ef74c39d0aea7ba5037406e3 раньше по ходу была в самом бутстрапе (аутсорсер предоставил верстку с такими классами :) )
Ту да же классы типа italic, fs-11, lh-20
Если не было в самом бутстрапе, то сорри, мне было не до этого, верстка уже была несемантическая.
Из-за оленей сложилось такое впечатление :)
ZoomLS
28.08.2016 23:24>>Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.
Это если используется старый HTTP/1.1, сейчас пришло время HTTP/2, где это уже неактуально.
sumanai
28.08.2016 23:54Одинаковые id у нескольких элементов
Пропущенный alt у картинок
Об этом уведомит W3C Validator из первого пункта.
4. Спрайты
HTTP2 уже поддерживается популярными браузерами и веб-серверами. Как и SVG на замену неказистым иконочным шрифтам.
extempl
29.08.2016 10:05HTTP/2 arrives but sprite sets ain’t no dead
Спрайты, как и минификация css/js и SPA всё ещё имеют смысл. И, в общем-то, будут иметь смысл ещё наверное до тех пор, пока все ресурсы не будут загружаться одновременно.
stardust_kid
29.08.2016 12:55Как и SVG на замену неказистым иконочным шрифтам.
Ага, и баги в мобильных браузерах с его отображением магически решились по вашему велению.sumanai
29.08.2016 15:19У иконочных шрифтов багов не меньше, в том числе и на десктопах.
stardust_kid
29.08.2016 15:24У готовых, проверенных типа Font Awesome, как правило, меньше.
sumanai
29.08.2016 15:58Это не поможет при багах в самих браузерах. FF например рисует их чуть толще остальных браузеров, и FA тут наравне с остальными. Opera Mini как не поддерживала их, и FA тут ничего не смог поделать.
Вообще, почти полностью согласен вот с этой статьёй.stardust_kid
29.08.2016 16:48Имхо, нерационально базировать свою верстку на багах десктопных браузеров. Рендеринг чуть ли не в каждом втором релизе меняют. И он свой для каждой OS. Ну а неправильную отрисовку svg в Safari починят только при следующем обновлении iOS.
А если у вас требуют pixel-perfect во всех известных науке браузерах, то могу только посочувствовать.sumanai
29.08.2016 18:41Имхо, нерационально базировать свою верстку на багах десктопных браузеров. Рендеринг чуть ли не в каждом втором релизе меняют.
И я про что! Шрифты рисуются по разному, в зависимости от типа браузера, ОС, настроек браузера, настроек ОС, может ещё что упустил.
А вот рисовать произвольно SVG браузеры не должны.
Ну а неправильную отрисовку svg в Safari починят только при следующем обновлении iOS.
Тут я не в теме, яблока не имею.
А если у вас требуют pixel-perfect во всех известных науке браузерах, то могу только посочувствовать.
Слава Богам, не требуют.
Xtray
29.08.2016 19:02+1Ага, и от меня спасибо, кэп.
А почему alt обязателен, даже если он пустой?sumanai
29.08.2016 19:14Веб-стандарты.
Xtray
29.08.2016 19:42+1Да я понимаю, что стандарт требует, но как его отсутствие (пустого alt) скажется на работе сайта? На процессор нагрузка возрастет, грузиться дольше будет, со скриптами какими-то проблемы могут быть?
Если картинки используются в качестве декоративных элементов, а единственный минус — что страница не пройдет валидацию — да и фиг с ним же.sumanai
29.08.2016 19:47Если картинки используются в качестве декоративных элементов
Тогда зачем вообще использовать тег img? Сделайте фоном к div, или к псевдоэлементу, тег img нужно использовать только для контентных изображений.Xtray
29.08.2016 20:02+2Сейчас, конечно, незачем. А когда-то без этого было не обойтись.
Я просто хочу понять, чем чревато нарушение этой рекомендации. Если только «валидатор заругает», то ничего страшного. Но может есть что-то о чем я не знаю…
sashabeep
30.08.2016 12:55+1Где-то я почти всё это видел… Вспомнил, в CHM-файле "HTML первые шаги" в 2000 году.
W3C Validator
Это пример самого настоящего инвалидского менеджмента, обычно только те, кто не понимает, что такое верстка в-принципе, только на него и опираются. Прогоните через него N любых ресурсов и вы увидите, что всем он параллелен. Раньше были даже картиночки 88*31. Тоже уехали в топку вместе с "Best viewed with". Стандарты давно плетутся за браузерами.
Совесть — лучший валидатор. При использовании любого html редактора у вас не будет картинок без alt и незакрытых тегов.
UTF-8
По мнению W3 BOM является валидным. Какие глюки из-за него происходят, помнят чуть менее, чем все.
Одинаковые id
Это даже не обсуждается лет 15 как :) Лично видел, как горе-верстальщики делали кучу одинаковых ID вместо использования !important и даже вместо классов просто так, потому что короче писать.
Спрайты
Стоит упомянуть, что всякие модные сборщики и CSS фреймворки умеют их клеить сами
Много селекторов
До сих пор не доказано, насколько сильно влияет на производительность вложенность селекторов. Иногда HTML сложно или невозможно поменять
Стили в HTML
WYSIWYG-редакторы в бекенде — основной поставщик такой красоты в код страницы. Крайне редко в редактор вписываются наборы стилей текущей верстки, а поиграться со шрифтами заказчики всегда горазды
Неправильное названия классов и 13. Транскрипция
Это вообще никак не влияет на работу сайта. Забудьте про это. Хоть .dohlye_kotiki
Про презентационные классы типа green, red и тд… Тоже в топку. Когда у макета есть, например, набор цветовых схем ни один человек не будет себя мучать выдумыванием метафоры на зеленый цвет.
Если продложить доколупываться к презентационным классам, то модификаторы в обожаемом BEM — это они и есть, колонки в bootstrap — это тоже они. И даже обожаемый всеми .clearfix
Clearfix
Использование display:table для :after таких элементов периодически подбрасывает смешные глюки. Например, выделенный текст выделяется не с ширину блока, а с ширину всей страницы. Так что overflow:hidden или вложение чего-то "чистящего" в конец обертки вполне юзабельно до сих пор.sumanai
30.08.2016 18:24Clearfix
Использование display:table для :after таких элементов периодически подбрасывает смешные глюки.
Кстати, кто-нибудь знает, зачем там ставят display:table? Вроде и display:block прекрасно работает.
EvilGenius18
А в чем проблема добавления style=" " напрямую в тэг в HTML? Это всего лишь вопрос традиций, или это негативно влияет на какие-либо аспекты?
dkaito
HTML предназначен для вывода информации. Оформление происходит в CSS. Использование атрибута style никак не влияет на страницу, даже проходит валидацию, но HTML не предназначен для оформления, для этого есть CSS.
szubtsovskiy
Как понимать фразу «HTML не предназначен для оформления», если спецификацией предусмотрен атрибут style, и он поддерживается всеми браузерами? Каким ещё должен быть HTML, чтобы оказаться «предназначенным для оформления»?
Указание стилей в атрибуте style имеет свои недостатки (дублирование кода, сложность изменения, если стиль одинаковый для разных элементов, высокий приоритет правил — не переопределяешь через стили для всей страницы), но в мелких проектах его может быть совершенно достаточно, а иногда и совершенно необходимо (например, когда элемента становится видимым после каких-то действий пользователя — тогда прописать «display: none» в style при верстке гораздо нагляднее).
dkaito
В будущем возможны сложности изменения вёрстки при использовании style="". Особенно когда над сайтом будет работать другой верстальщик. Ему будет проще делать правки в CSS, а не искать нужный код в файлах.
В стандарте не указано, что в HTML нельзя оформлять страницы, но я думаю стоит разделять вывод информации (HTML) и её оформление (CSS).
szubtsovskiy
Так гораздо понятнее.
ksider
более того, предусмотрен тег
Nadoedalo
В современном мире — аттрибут style является нарушением CPS, в частности позволяет unsafe-inline и возможно даже unsafe-eval.
Потому лично я бы не рекомендовал его использовать. Пользуйтесь классами.
Aingis
Можно ‘nonce’ прописать и всё будет в порядке.
UPD. Хотя он годится для тега, а не атрибута.
G-M-A-X
Одноразово пофиг.
А многоразово плохо.
Потом задолбетесь искать все места использования.