Конфиг «HTML» представляет собой «голову и тело» (head и body). В «головк» теги, описывающие код программы, а bodу содержит информацию о функциях программы или сайта, их разметке. Оба представленных компонента взаимосвязаны друг с другом и имеют решающее значение. Наполнение head и body напрямую влияет на дизайн и саму работу страницы, ее быстродействие, функционал и комфорт для конечного посетителя. Также от них зависит скорость работы разрабатываемого сайта, его релевантность и общая привлекательность как для людей, так и поисковых алгоритмов.

Документ HTML состоит из текста, который имеет свою лексику и структурирован особым, понятным для компьютера образом. Вряд ли вы увидите, как HTML документ выполняет свои функции в одиночку. Чаще всего он дополняется различными CSS-правилами, «текстовиками» «JavaScript-ами», изображениями, и остальными составляющими. При использовании (а используют чаще CMS) CMS «body» документа автоматически подстраивается. Поэтому случается, что девелоперы «сидящие» на CMS не знают ни о структуре тела HTML/CSS, ни о применении и построении скриптов Java.

Характеристики, body и title в HTML

Страница состоит из трёх связующих, дополняющих друг друга, компонентов. Это: HEAD, BODY и TITLE. Веб-браузер отображает все то, что видит из протокола, но взаимодействует только с той потоковой информацией, которая корректно прописана и распределена во всех трех вышесказанных компонентах (Голова, тело, заголовок).

Видимая часть заполняется корректно, если описывающие теги коррелируют с body- тегами, а необходимые файлы «извне» присутствуют и находятся в рабочем состоянии. «Tag» заголовка невидимый, но он служит кратким представлением каждой страницы для «веб-серфера» и поисковой машины. Исходя из вышеперечисленного, становится понятно, что для полноценной и правильной работы веб-страницы, важно не допускать ошибок в трех обсуждаемых элементах.

Итак, фактически, файл html — это обыкновенный текстовый файл, который свободно открывается в блокноте. Но этот простой текст оформляется исходя их строго определенных законов и закономерностей. Наполнение ресурса, по сути, подвергается изменениям в удобном для программиста текстовом редакторе, но саму разработку сайта предпочтительно вести в специально предназначенной для этого платформе, которая помогает создателю, и делает часть работы за него. Это значительно быстрее практичнее. Причина этому в том, что HTML только фактически текст, но по факту это контент, а значит, в нем заложены все структурные составляющие сайта, которые написаны исходя из правил отображения в видимой области просмотра браузеров.

Правила хорошего тона

Ниже представлены некоторые, рекомендуемые к выполнению, правила форматирования HTML и CSS.

1. Ссылки крайне не рекомендуется писать с кавычками.

Там, где «URL», не следует использовать: «‘’…’’».

1. Новая строка выделяется для блочных, списочных и табличных элементов. А для дочерних элементов обязательно предусматриваются отступы.

Блочные элементы рекомендуется переносить на новые строки, а для вложенных в блочный или табличный пак элементов следует ставить отступы.

1. Не нужно использовать имена классов и идентификаторов вместе с обозначением типа описываемого элемента.

Исключением является работа к классами-помощниками.

1. Сокращайте, где можно, записи свойств.

CSS дает программистам сокращать формы записи. Это увеличивает удобство в понимании и чтении кода, а также в самом его написании.

1. Точка запятой ставится после каждого правила и объявления.
2. Старайтесь, насколько это возможно, пользоваться исключительно валидным CSS-кодом.

Исключениями могут послужить разве что: код, всецело зависящий от браузера. Чтобы проверить валидность, есть возможность «заюзать» программу: W3C CSS Validator.

1. Названия классов и их идентификаторы должны иметь логику и смысл.

Т.е в имени класса лучше всего стараться отобразить какую функцию он выполняет, зачем внедрен. Также можно просто прибегнуть к шаблону, дав ему шаблонное имя. Когда имя отображает смысл, элементы и классы проще к чтению и пониманию. Шаблонные же имена используют для простых или повторяющихся элементов, без своего «особого» и особенного назначения.

1. Длинна имени не класса не должна превышать или не достигать заданной.

Проще говоря это значит, что названия должны отображать суть элемента, его предназначение, но не должны быть слишком длинными и громоздкими. Это улучшает читаемость и общий вид кода.

1. Настройки и правила в коде разделяются между собой пустой строкой.
2. Если значение равно нулю – не нужно указывать единицу измерения без видимой на то причины. Также не нужно «начинать» с нуля в написании дробных чисел, просто не используйте ноль (пример: .6em).
3. Используйте префиксы идентификаторов и имен классов.

Такое правило поможет, в последующем, избежать ошибок из-за написания имен, а также упростит чтение сайта и его дальнейшее обслуживание, доработку.

1. При описании объекта или каком-либо объявлении, ставьте пробел после двоеточия.

Один пробел ставится только после двоеточия (не до него).

1. Селектор и объявление размещаются на разных строках.

То есть каждый новый селектор или объявления пишутся с новой строки.

Вывод

Использование программистами и веб-разработчиками подходящей и относительно популярной CMS (системы управления контентом) снимает большую часть (70-80%) забот и «головной боли». Как уже говорилось, иногда создатель далеко и не обученный программист со знанием HTML и всеми «вытекающими» из него аспектами (знание и умение работать с элементами, tag-ами, правилами).

В случае, когда сайта все же делается «вручную», без использования CMS, следует внимательно и скрупулезно писать код, придерживаться главных аспектов и правил языка гипертекста, внимательно следить за синтаксисом. Надеюсь, эта статья поможет усовершенствовать внешний вид и структуру кода, поможет делать красивые и, со временем, профессиональные сайты.