Стандарты оформления кода html

Руководство по оформлению кода HTML/CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Код HTML/CSS нужно оформлять красиво, а значит особенности верстки – обязательная часть программы обучения веб-разработке. Сайт proglib.io рассказал, как освоить нужные знания с нуля.

С хорошо оформленной и структурированной разметкой намного удобнее работать как самому верстальщику, так и его коллегам. Нужные участки кода будут находиться гораздо быстрее, а внести в них изменения и дополнения станет проще. До сих пор не утихают споры о том, как же правильно писать код. Перечислим основные правила, которые следует соблюдать при создании разметки HTML.

Делайте отступы

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

Тег div является вложенным элементом относительно section .

В свою очередь теги h1 и p выравниваются относительно тега div , не создавая «лесенки».

Это правило не распространяется на строчные теги ( i , u , a , b , span ) внутри абзаца. Например, тег span не нужно начинать с новой строки и делать от него отступы.

Выравнивайте теги по одной вертикальной линии

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

Комментируйте код

Когда в разметке идет подряд много закрывающих тегов, ставьте комментарий (название класса) рядом с ним. Тогда вам не придется гадать, какой именно класс закрывается.

Начало каждого блока желательно начинать с короткого комментария с названием секции. Это очень удобно и позволит вам легко ориентироваться в структуре документа.

Всегда пишите в нижнем регистре

Весь код должен быть написан в нижнем регистре. Это относится к названиям элементов и атрибутов, значениям атрибутов, селекторам, свойствам и их значениям (кроме текста). Текст внутри тегов можно писать с заглавной буквы в начале предложений, а для остального существует свойство text-transform: uppercase; .

Используйте кодировку UTF-8

UTF-8 – один из самых распространенных стандартов кодирования, который позволяет наиболее компактно хранить и передавать символы Юникода. Убедитесь, что ваш редактор использует UTF-8. Всегда указывайте кодировку в шаблонах и документах HTML с помощью . Опускайте кодировку для файлов CSS, поскольку для них UTF-8 задана по умолчанию.

Используйте валидный HTML

Валидная разметка – это код, который написан в соответствии с определенными стандартами. Их разработал Консорциум Всемирной Паутины – World Wide Web Consortium (W3C). При помощи таких инструментов, как W3С HTML Validator, можно проверить качество кода HTML и CSS. Написание валидного HTML оттачивает знание ограничений языка разметки и понимание технических требований.

Используйте семантическую разметку

Семантическая верстка (разметка) – это подход к созданию веб-страниц, основанный на расстановке тегов HTML в соответствии с их семантикой. Проще говоря, используйте теги по назначению: для заголовков,

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

Для людей с ограниченными возможностями создается специальный софт, который ориентирован на семантическую разметку. Постарайтесь указать альтернативное содержимое для картинок, видео или анимаций, заданных с помощью canvas . Это поможет людям со слабым зрением понять, о чем говорится в аудио- или видеозаписи.

Не указывайте протокол при добавлении внешних ресурсов

Опускайте название протокола ( http:// или https:// ) в ссылках на картинки и другие внешние ресурсы, файлы стилей или скрипты. Это делает ссылку относительной и предотвращает, например, использование незащищенного контента на защищенном сайте, а также незначительно уменьшает размер файлов.

Не используйте необязательные теги и лишние обертки

Для уменьшения размера файлов и лучшей читаемости старайтесь избегать использования необязательных тегов и лишних оберток (wrapper). В спецификации HTML5 есть их список.

Изучите правила оформления CSS

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

Изучите нюансы синтаксиса CSS

Ставьте точку с запятой после каждого объявления. Это необходимо для беспрепятственного добавления новых свойств и уменьшения путаницы. Используйте пробелы после двоеточий в объявлениях. Это поможет вам лучше ориентироваться в документе CSS. Начинайте каждый селектор или объявление с новой строки. По возможности объединяйте свойства отдельных блоков в группы и обозначайте их комментариями, разделяя переносом строки. Не указывайте единицы измерения для нулевых значений, если на это нет причины. Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места ( color: #ааа; ).

Используйте препроцессоры

Препроцессор CSS добавляет ранее недоступные возможности с помощью новых синтаксических конструкций. Основная его задача – упростить и ускорить разработку, а также поддержку стилей в проектах. Препроцессоры преобразуют написанный с использованием специального языка код в чистый и валидный CSS. С их помощью улучшается читабельность и структурированность кода, а также увеличивается производительность труда верстальщика.

Используйте автопрефиксер

Префиксы нужны, чтобы «подружить» свойства CSS c различными браузерами. Изначально они были придуманы, чтобы помочь разработчикам браузеров адаптировать спецификацию под свои нужды. Чтобы не заниматься этим самостоятельно, используйте утилиту нового поколения autoprefixer для добавления префиксов к экспериментальным свойствам из CSS-3.

Будьте последовательны!

Следует придерживаться определенного стиля написания кода. Чистый и красивый код говорит об уровне профессионализма верстальщика и его отношении к работе.

Источник

Кодстайл HTML — правила хорошего тона при вёрстке

«Магия, не трогать!», «Когда я писал этот код, только Бог и я понимали, что он означает. Теперь понимает только Бог» — смешные, но реальные комментарии, которые встречались разработчикам в коде. Чтобы коллегам по проекту было проще разобраться в вашем коде, он должен быть не только свободным от «костылей», но ещё читабельным и однообразным. В этом помогает кодстайл — общие правила написания кода. Они могут отличаться от продукта к продукту, тем не менее мы постараемся объяснить наиболее общепринятые моменты.

Теги

Обычные теги. Теги оформляются строчными буквами. Давайте посмотрим на примерах.

В примере выше теги div и Img прописаны с заглавных букв — такое написание не соответствует общим правилам, а читать код становится сложнее. Нужно опустить всё в нижний регистр.

Атрибуты. Это же правило распространяется на атрибуты тегов.

Самозакрывающиеся теги. Есть два варианта написания самозакрывающихся тегов — тех, которые не нужно закрывать повторным тегом.

Оба варианта допустимы с точки зрения валидации, но в коде лучше придерживаться единообразия. Если вы выбрали вариант без слеша (/), то и другие теги в проекте нужно оформлять без него. Также стоит упомянуть, что вариант без слеша является более новым и убирает ненужный символ, поэтому многие выбирают его. Но если вы планируете использовать XML, то лучше использовать слеш.

Атрибуты

Атрибуты оформляются через один пробел с использованием одного типа кавычек. Как правило, ставят двойные кавычки («»).

Давайте разберем, как можно улучшить код. Во-первых, нужно нужно проставить один пробел между атрибутами и именами тегов, после тегов src, alt и названия a. Во-вторых, нужно поправить тип кавычек у атрибутов alt и width.

Порядок атрибутов

Нет четких правил оформления именно порядка атрибутов. Но для удобства можно придерживаться правила, что класс задаётся всегда после оформления имени тега.

Отступы

Начинающие разработчики часто забывают про отступы, без которых сложно отследить вложенность элементов. Разберём на примере.

Можно ли тут сходу определить, какой тег в какой завёрнут? К сожалению, нет. Чтобы поправить нашу разметку, воспользуемся правилом: к каждому новому вложенному тегу добавлять ещё один отступ.

Отступ может быть равен двум или четырём пробелам — число пробелов в одном отступе можно настроить в среде разработки. Чаще всего для отступов используют два пробела, потому что так код получается более компактным. Чтобы поставить отступ, вы можете нажать нужное количество раз кнопку space (пробел) или же tab.

Проверить себя поможет расширение indent-rainbow, которое будет подсвечивать отступы.

Теперь расскажем о правилах, которые не совсем относятся к кодстайлу, но являются хорошими практиками в HTML.

Кнопки

Как правило, по умолчанию у кнопок указан тип submit, то есть кнопка для обработки формы. Но если кнопка находится вне формы, то нужно указывать button — так мы отключаем событие отправки формы, которой у нас нет. Даже если кнопка находится в форме, рекомендуется указывать тип submit в разметке, так как в разных браузерах может быть по умолчанию другой тип.

Секции

У тега section должен быть заголовок — это правило, о котором часто забывают. Если заголовка нет в макете, то он делается скрытым. Подробнее об этом можно прочитать на developer.mozilla.

Изображения

Указывать название (alt) и размеры (width и height) для изображений. Alt является обязательным атрибутом и, в основном, служит для того, чтобы при «битой» картинке пользователь мог понять, что именно должно было отобразиться на странице.

Атрибуты width и height являются необязательными, но указав их, мы можем предотвратить:

• «скачок» страницы при медленной загрузке, так как пространство под картинки уже будет зарезервировано до их получения;
• модификацию сетки при «битом» изображении, так как при таком сценарии будет использован alt, который явно по размерам будет уступать изначальному размеру изображения.

Проверять вёрстку на валидность позволяет валидатор. Если не знаете, как его настроить, помогут онлайн-сервисы, например — validator.w3.

Источник