Как выглядит красивый HTML-код
Крис Койер (Chris Coyier), автор CSS-Tricks, опубликовал замечательную схему того, как, по его мнению, должен выглядеть красивый и современный HTML-код.
В своей статье он показывает пример, который представлен в трех вариантах:
- PNG-скриншот;
- оригинал в PSD-формате;
- текстовый вариант.
Ниже я хочу привести свой свободный перевод комментариев к скриншоту (читай — рекомендации по написанию HTML-кода):
- HTML5 — веб-стандарт HTML5 с его новыми элементами позволяет создать самый красивый HTML-код.
- DOCTYPE (тип документа) — HTML5 имеет лучший DOCTYPE из всех существующих. Он прост в написании и легок для запоминания.
- Indentation (отступы) — в коде используются отступы (через табуляторы или пробелы), это помогает проследить иерархию кода,
т. е. увидеть структуру родительских и дочерних тегов. - Charset (кодировка) — указывается до какого-либо содержимого страницы.
- Title (заголовок) — заголовок сайта прост и понятен. Сначала в заголовке идет название страницы (если это не главная), затем ставится разделитель, и после него идет название сайта.
- CSS — используется только один файл стилей (типы носителей указываются внутри таблицы стилей) и отдается он только хорошим браузерам. Браузеру IE версии 6 и ниже передается универсальный файл стилей.
- Body (тег
<body>) — к нему добавлен идентификатор, чтобы можно было оформлять разные страницы без дополнительной разметки. - JavaScript — jQuery (самый красивый JavaScript-фреймворк) подключается с сайта Google. Подключается только один файл с JavaScript. Оба файла прописываются внизу кода страницы.
- File Paths (пути к файлам) — для повышения эффективности используются относительные пути к файлам. К таким файлам, как, например, изображения, указываются абсолютные пути, т.к. они могу быть синдицированы,
т. е. использованы в RSS-потоках. - Image Attributes (параметры изображений) — изображения содержат альтернативный текст. Высота и ширина указываются для эффективности рендеринга страницы.
- Main Content First (главный контент — в самом начале) — главное содержимое страницы идет после названия сайта с описанием и меню, но до второстепенной информации, которая обычно размещается в сайдбарах.
- Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы) — используются теги
<header>,<nav>,<section>,<article>,<aside>и т. д. Все они надлежаще описывают содержимое, которое в них находится, нежели тег<div>, используемый ранее. - Hierarchy (иерархия) — используются теги заголовков
<h1>…<h6>, которые показывают иерархию содержимого страницы. - Appropriate Descriptive Tags (семантически правильные теги) — списки оформлены в HTML как списки в зависимости от их содержимого: либо нумерованные
<ol>, либо ненумерованные (<ul>), либо списки определений (<dl>). - Common Content Included (подключение повторяемого содержимого) — повторяемые части страниц подключаются на стороне сервера, неважно какой метод, CMS или язык программирования при этом используется.
- Semantic Classes (семантические классы) — используются семантически правильные названия классов и идентификаторов, они должны описывать содержимое тега. Например, класс
columnгораздо лучше, чемleft. - Classes (классы) — используются и для любых других элементов, которым необходимо применить такое же оформление.
- IDs (идентификаторы) — применяются только к какому-то одному элементу в пределах страницы.
- Dynamic Elements (динамические элементы) — элементы, которые должны быть динамическими, являются динамическими.
- Characters Encoded (символы закодированы) — если это специальные HTML-символы, то они закодированы.
- Free From Styling (независимость от стилей) — контент на странице должен быть доступен независимо от того, применяются к элементу стили или нет (извините, я не совсем понял этот пункт при переводе — прим. Dimox).
- Comments (комментарии) — прокомментированы те участки кода, которые при его изучении могут быть не сразу очевидны для понимания.
- Valid (валидность) — код должен быть валидным в соответствии со стандартами: теги закрыты, используются обязательные параметры, нет запрещенных элементов
и т. д.
P.S. Признаюсь, я грешен =) Я не всегда выполняю некоторые из рекомендаций, однако стремлюсь это делать.
Комментарии (58)
код красивый, но не оптимальный ;-)
А что такое красивый код?
Жаль только, что «костыли» для IE портят картину. Насчет, я думаю, тоже не все согласятся.
А под Free From Styling, наверное, имеется в виду то, что страница будет отображена корректно вне зависимости от того, какие стили подключаются, например, можно же сделать несколько CSS, один для десктопа, один — для мобильных устройств типа iPhone, и при этом HTML менять не придется вовсе.
Отличная статья, вроде бы все выполняю, кроме 1 файлового CSS. Уж здесь мнение разбегается.
1. HTML5.
2. DOCTYPE
Можно, но поддержка в браузерах ограничена. Но лично я — только за.
3. Indentation (отступы) — в коде
Нет. Код должен быть в одну строку.
4. Charset (кодировка) — указывается
Нет. Чарсет указывается в HTTP-заголовке сервером.
5. Title (заголовок) — заголовок сайта прост и понятен.
Это да. Причем сначала именно именно название страницы.
6. CSS — используется только один файл стилей
+100 500 Только один файл.
7. Body (тег) — к нему добавлен идентификатор
Не обязательно.
8. JavaScript — jQuery
Не обязательно. Могу поспорить, кто там самый красивый.
9. File Paths (пути к файлам) —
Полные пути к изображениям?.. Может быть и так.
10. Image Attributes (параметры изображений) —
+100 500 Маст хэв.
11. Main Content First (главный контент — в самом начале) —
Да.
12. Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы)
Можно, но для IE придётся ставить довольно большой костыль.
13. Hierarchy (иерархия) — используются теги заголовков …,
Да.
14. Appropriate Descriptive Tags (семантически правильные теги)
Да.
15. Common Content Included (подключение повторяемого содержимого)и т. д. ) облака тегов. Оно всегда одно подключается на разных стр.
А как иначе-то? Никто, я думаю, не пишет отдельно два (три
16. Semantic Classes (семантические классы) —
Да. Сам пользуюсь недавно, года 3, но не раз оценил удобство при разработке.
17. Classes (классы) —
Разумеется да.
18. IDs (идентификаторы) — применяются только к какому-то одному элементу
Разумеется да. Иначе быть не может. Это же ID. А валидность? А javascript?
19. Dynamic Elements (динамические элементы)
Непонятно, о чем идёт речь.
20. Characters Encoded (символы закодированы) — если это специальные HTML-символы, то они закодированы.
Бред. В utf-8 все символы можно писать текстом, как они есть, без извращений типа & # x00e4; или & # 0228;. К тому же такие символы не индексируются и занимают больше байт! :-)
21. Free From Styling (независимость от стилей) —
Да, сайт должен быть юзабельным с откл. стилями. Меня, к примеру, раздражает тёмный фон и белые буквы, я на таких сайтах сразу отключаю CSS.
22. Comments (комментарии) — закомментированы те участки кода
Только на стадии разработки. В production use никаких каментов и отступов, всё в одну строку.
23. Valid (валидность) — код должен быть валидным
+100 500 Маст хэв.
Плохо, когда чарсет указывается сервером. Если вебмастер не является админом сервера, то настроить HTTP-заголовки он не может.
Знания и только знания. Настроить кодировку можно легко. Для некоторых тегов доступен атрибут charset, для php скриптов и иже с ними (и других) передача заголовка header, и многие сервера позволяют переопределить кодировку в своих настройках, документация)
Думаю, лучше перевести как
Согласен почти со всем. Вот читаешь, и понимаешь что так и поступаешь.и т. п. (это даст больший прирост, чем включение jQuery, mootools из репозитория яндекса, гугла)
Оспорю:
1. JQuery → mootools по красоте кода и возможностям ни на йоту не уступает. Да и пошустрее будет.
2. Внешним источникам css/js предпочитать внутренние. Для быстрого же доступа к сайту использовать google cloud
Добавлю:
1. Javascript → подключение в конце документа перед закрытием body (быстрее будет).
2. Минимальное использование количества подключаемых файлов (касается всего: js, css).
3. Отложенная загрузка изображений (lazy load).
Пиз*дешь и провокация. Он сам не знает что пишет этот Крис Ктотатам!!!