Как выглядит красивый HTML-код
Крис Койер (Chris Coyier), автор , опубликовал замечательную схему того, как, по его мнению, должен выглядеть красивый и современный HTML-код.
| ... Рекомендую сервис автоматической проверки ссылок - единственный сервис, где можно проверить ссылочного донора на спамность. Bсе биржи ссылок и сервисы в одном интерфейсе. . ... |
В он показывает пример, который представлен в трех вариантах:
- 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. Признаюсь, я грешен =) Я не всегда выполняю некоторые из рекомендаций, однако стремлюсь это делать.
© Dimox, , 2009. |
Ваш отзыв