• МОЙ САЙТ ПЕРЕЕХАЛ!
    В далёком 2007 году я создал свой первый сайт на платформе uCoz. Мир не стоит на месте и нужно двигаться вперёд. С тех пор я освоил программирование на достаточном уровне, чтобы создать личный сайт на собственном хостинге с крутым доменом и полным контролем над всем происходящим. Я стал сильным и независимым, но не забыл тех, кто помог мне подняться. Данный сайт будет существовать и дальше, но информация здесь больше не обновляется.

Делаем красивый HTML

Пояснительная записка:

  • 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/
Категория: Сайты и CEO | Добавил: Bogdan (07.01.2012) | Автор: Chris Coyier W
Просмотров: 3436 | Теги: HTML5 | Рейтинг: 0.0/0
Всего комментариев: 0
avatar
close