Как выглядит красивый HTML-код

Крис Койер (Chris Coyier), автор CSS-Tricks, опубликовал замечательную схему того, как, по его мнению, должен выглядеть красивый и современный HTML-код.

Как выглядит красивый HTML-код

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

1 PNG-скриншот;

2 оригинал в PSD-формате;

3 текстовый вариант.

Ниже я хочу привести свой свободный перевод комментариев к скриншоту (читай - рекомендации по написанию HTML-кода):

1 HTML5 - веб-стандарт HTML5 с его новыми элементами позволяет создать самый красивый HTML-код.

2 DOCTYPE (тип документа) - HTML5 имеет лучший DOCTYPE из всех существующих. Он прост в написании и легок для запоминания.

3 Indentation (отступы) - в коде используются отступы (через табуляторы или пробелы), это помогает проследить иерархию кода, т.е. увидеть структуру родительских и дочерних тегов.

4 Charset (кодировка) - указывается до какого-либо содержимого страницы.

5 Title (заголовок) - заголовок сайта прост и понятен. Сначала в заголовке идет название страницы (если это не главная), затем ставится разделитель, и после него идет название сайта.

6 CSS - используется только один файл стилей (типы носителей указываются внутри таблицы стилей) и отдается он только хорошим браузерам. Браузеру IE версии 6 и ниже передается универсальный файл стилей.

7 Body (тег <body>) - к нему добавлен идентификатор, чтобы можно было оформлять разные страницы без дополнительной разметки.

8 JavaScript - jQuery (самый красивый JavaScript-фреймворк) подключается с сайта Google. Подключается только один файл с JavaScript. Оба файла прописываются внизу кода страницы.

9 File Paths (пути к файлам) - для повышения эффективности используются относительные пути к файлам. К таким файлам, как, например, изображения, указываются абсолютные пути, т.к. они могу быть синдицированы, т.е. использованы в RSS-потоках.

10 Image Attributes (параметры изображений) - изображения содержат альтернативный текст. Высота и ширина указываются для эффективности рендеринга страницы.

11 Main Content First (главный контент - в самом начале) - главное содержимое страницы идет после названия сайта с описанием и меню, но до второстепенной информации, которая обычно размещается в сайдбарах.

12 Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы) - используются теги <header><nav><section><article><aside> и т.д. Все они надлежаще описывают содержимое, которое в них находится, нежели тег <div>, используемый ранее.

13 Hierarchy (иерархия) - используются теги заголовков <h1>…<h6>, которые показывают иерархию содержимого страницы.

14 Appropriate Descriptive Tags (семантически правильные теги) - списки оформлены в HTML как списки в зависимости от их содержимого: либо нумерованные <ol>, либо ненумерованные <ul>, либо списки определений <dl>.

15 Common Content Included (подключение повторяемого содержимого) - повторяемые части страниц подключаются на стороне сервера, неважно какой метод, CMS или язык программирования при этом используется.

16 Semantic Classes (семантические классы) - используются семантически правильные названия классов и идентификаторов, они должны описывать содержимое тега. Например, класс columnгораздо лучше, чем left.

17 Classes (классы) - используются и для любых других элементов, которым необходимо применить такое же оформление.

18 IDs (идентификаторы) - применяются только к какому-то одному элементу в пределах страницы.

19 Dynamic Elements (динамические элементы) - элементы, которые должны быть динамическими, являются динамическими.

20 Characters Encoded (символы закодированы) - если это специальные HTML-символы, то они закодированы.

21 Free From Stypng (независимость от стилей) - контент на странице должен быть доступен независимо от того, применяются к элементу стили или нет (извините, я не совсем понял этот пункт при переводе - прим. Dimox).

22 Comments (комментарии) - прокомментированы те участки кода, которые при его изучении могут быть не сразу очевидны для понимания.

23 Vapd (валидность) - код должен быть валидным в соответствии со стандартами: теги закрыты, используются обязательные параметры, нет запрещенных элементов и т.д.

P.S. Признаюсь, я грешен =) Я не всегда выполняю некоторые из рекомендаций, однако стремлюсь это делать.

Другие статьи по рубрике «Web-мастеринг»

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!