Пояснительная записка: - HTML5 - веб-стандарт HTML5 с его новыми элементами позволяет создать самый красивый HTML-код.
- DOCTYPE - HTML5 имеет лучший DOCTYPE из всех существующих. Он прост в написании и легок для запоминания.
- ТАБУЛЯЦИЯ - в коде используются отступы (клавиша Tab), это помогает проследить иерархию кода, т.е. увидеть структуру родительских и дочерних тегов.
- КОДИРОВКА - указывается до какого-либо содержимого страницы.
- ЗАГОЛОВОК СТРАНИЦЫ - заголовок сайта прост и понятен. Сначала в заголовке идет название страницы (исключение может стать главная страница), затем следует разделитель, и после него идет название сайта.
- CSS - используется только один файл стилей (типы носителей указываются внутри таблицы стилей) и отдается он только хорошим браузерам. Браузеру IE версии 6 и ниже передается универсальный файл стилей.
- BODY - к нему добавлен идентификатор, чтобы можно было оформлять разные страницы без дополнительной разметки.
- JAVASCRIPT - jQuery (самый красивый JavaScript-фреймворк) подключается с сайта Google. Подключается только один файл с JavaScript. Оба файла прописываются внизу кода страницы.
- ПУТИ ФАЙЛОВ - для повышения эффективности используются относительные пути к файлам. К таким файлам, как, например, изображения, указываются абсолютные пути, т.к. они могу быть синдицированы, т.е. использованы в RSS-потоках.
- ИЗОБРАЖЕНИЯ - изображения содержат альтернативный текст. Высота и ширина указываются для эффективности рендеринга страницы.
- ОСНОВНОЙ КОНТЕНТ - главное содержимое страницы идет после названия сайта с описанием и меню, но до второстепенной информации, которая обычно размещается в сайдбарах.
- ОПИСАТЕЛЬНЫЕ ТЕГИ - используются теги <header>, <nav>, <section>, <article>, <aside> и т.д. Все они надлежаще описывают содержимое, которое в них находится, нежели тег <div>, используемый ранее.
- ЗАГОЛОВКИ - используются теги заголовков <hl>...<h6>, которые показывают иерархию содержимого страницы.
- СЕМАНТИЧЕСКИЕ ТЕГИ - списки оформлены в HTML как списки в зависимости от их содержимого либо нумерованные (<ol>), либо ненумерованные (<ul>), либо списки определений (<dl>).
- ПОДКЛЮЧЕНИЯ - повторяемые части страниц подключаются на стороне сервера, неважно какой метод CMS или язык программирования при этом используется.
- СЕМАНТИЧЕСКИЕ КЛАССЫ - используются семантически правильные названия классов и идентификаторов, они должны описывать содержимое тега. Например, класс column гораздо лучше, чем left.
- КЛАССЫ - используются и для любых других элементов, которым необходимо применить такое же оформление.
- ИДЕНТИФИКАТОРЫ - применяются только к какому-то одному элементу в пределах страницы.
- ДИНАМИЧЕСКИЕ ЭЛЕМЕНТЫ - элементы, которые должны быть динамическими, являются динамическими.
- СПЕЦИАЛЬНЫЕ СИМВОЛЫ - если это специальные HTML-символы, то они закодированы.
- СВОБОДА ОТ СТИЛЕЙ - контент на странице должен быть доступен независимо от того, применяются к элементу стили или нет.
- КОММЕНТАРИИ - прокомментированы те участки кода, которые при его изучении могут быть не сразу очевидны для понимания.
- ВАЛИДАЦИЯ - код должен быть валидным в соответствии со стандартами теги закрыты, используются обязательные параметры, нет запрещенных элементов и т.д.
Перевод: Dimox.name
Источник: http://css-tricks.com/what-beautiful-html-code-looks-like/ |