45  /  380
Справочник

Правила оформления HTML

Просмотров: 31601
Дата последнего изменения: 02.11.2023
Роберт Басыров
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет

Семантика

Использование семантики облегчает восприятие html-кода страницы и понимание логического и функционального назначения каждого тега. В HTML существует довольно много тегов, которые в своем названии несут четкую семантику: <a>, <p>, <i>, <menu>. Не стоит с помощью CSS таким тегам менять их базовый смысл. Идеально для верстальщика было бы удобно использовать теги с произвольными названиями.

<users>
	<user>
		<avatar></avatar>
		<name></name>
	</user>
</users>

HTML5 предлагает механизм для создания произвольных тегов (Web Components). Но реализация этого механизма не самая простая (нужно писать JavaScript) и поддержка в браузерах неполная. Единственный нормальный способ писать семантический код - использовать атрибут class. Он позволяет описать смысл тега естественными словами, не требователен к уникальности (в отличие от атрибута id) и поддерживает возможность указать несколько классов к одном тегу.

Основы верстки

  • Используйте теги div (для блочных элементов) и span (для строчных и строчно-блочных элементов).
  • Остальные теги используйте только согласно их базовому смыслу.
  • Теги <b>, <i>, <s>, <p>, с <h1> по <h6>, <ul>, <li> - используются только для форматирования текста. Как правило, эти стили находятся в шаблоне сайта и в стилях компонентов не присутствуют.
  • Для привязки CSS-свойств к тегу используйте только атрибут class.
  • Если нажатие на элемент приводит к открытию новой страницы, используйте тег <a>. В противном случае используйте <span> или <div>.
  • Отступы между логическими блоками никогда не делайте пробелами или тегом <br>.
  • Структуру html-тегов необходимо делать по сетке дизайна. "Колонки" и логические блоки одного уровня обязательно помещайте в контейнер.

    Плохо:

    <span class="task-detail-sidebar-info-link">сменить</span>
    <div class="task-detail-sidebar-info-title">Ответственный</div>
    <div class="task-detail-sidebar-info-user">
    	<a href="#" class="task-detail-sidebar-info-user-photo"></a>
    	<a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a>
    	<div class="task-detail-sidebar-info-user-post">Бухгалтер</div>
    </div>

    Лучше:

    <div class="task-detail-sidebar-info">
    	<div class="task-detail-sidebar-info-head">
    		<div class="task-detail-sidebar-info-link">сменить</div>
    		<div class="task-detail-sidebar-info-title">Ответственный</div>
    	</div>
    	<div class="task-detail-sidebar-info-user">
    		<a href="#" class="task-detail-sidebar-info-user-photo"></a>
    		<div class="task-detail-sidebar-info-user-title">
    			<a href="#" class="task-detail-sidebar-info-user-name">Иван Петров</a>
    			<div class="task-detail-sidebar-info-user-post">Бухгалтер</div>
    		</div>
    	</div>
    </div>
  • Удаление логических блоков не должно рушить дизайн.
  • Всегда есть вероятность, что на реальном сайте количество текста будет больше, чем нарисовано в макете. Верстка должна быть адаптивной к появлению дополнительных строк и к длинным строкам без пробелов.
  • Текстовый элемент не может быть на одном уровне с тегом.

    Плохо:

        <div class="task-detail-group">Задача в проекте: <div class="task-detail-link">добавить</div></div>

    Хорошо:

    <div class="task-detail-group">
    		<span class="task-detail-group-label">Группа:</span>
    		<span class="task-detail-group-name">Название группы</span>
    </div>
  • Каждый компонент должен иметь родительский контейнер. Для этого элемента в CSS необходимо указать шрифт (font-family), а также размер текста (font-size), чтобы избежать конфликтов со стилями шаблона сайта.

Особые случаи

  • Внимательно относитесь к элементам inline-block, перевод строки между ними будет отображен как пробел. Чтобы не писать теги в одну длинную строку, можно воспользоваться следующим приемом:
    <div class="inline-block-items"><?
    	?><span class="inline-block-item">Inline Item 1</span><?
    	?><span class="inline-block-item">Inline Item 2</span><?
    	?><span class="inline-block-item">Inline Item 3</span><?
    	?><span class="inline-block-item">Inline Item 4</span><?
    ?></div>

    Визуально теги разбиты и отделены отступами, а в результирующем HTML-коде будет одна строка. Другой прием с помощью HTML-комментариев:

    <div class="inline-block-items"><!--
    	--><span class="inline-block-item">Inline Item 1</span><!--
    	--><span class="inline-block-item">Inline Item 2</span><!--
    	--><span class="inline-block-item">Inline Item 3</span><!--
    	--><span class="inline-block-item">Inline Item 4</span><!--
    --></div>
  • Элементы с обтеканием (float)
    • Неприятной особенностью свойства float является то, что такой блок может "вывалиться" из блока-родителя. Это происходит из-за того, что float-элемент удаляется из потока и родитель не выделяет место под него. Решить эту проблему можно несколькими способами:
      • Поставить родителю overflow: hidden/auto.
      • Поставить родителю float.
      • Добавить в родителя элемент с clear. Чтобы не добавлять в HTML-код лишний элемент, можно задать его через :after.
    • Элементы с обтеканием обязательно должны находится в контейнерах, чтобы не влиять на соседние логические блоки.
  • Для повторяющихся элементов в строчку (пункты меню, список фотографий) отдавайте приоритет inline-block вместо float.

Тип документа

Создавайте новую верстку по стандарту HTML5. В старых шаблонах по возможности избавляйтесь от XHTML (слешей в конце тегов <br />, <img />).

<!DOCTYPE html>

Альтернативные атрибуты (alt, title)

Очень часто разработчики забывают указывать альтернативные подписи к иконкам, кнопкам или другим графическим элементам. Наличие атрибутов title и alt в верстке поможет решить эту проблему.

Разделение ответственности

Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму. Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение - в скрипты.

Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.

Формы

  • В верстке всегда должен присутствовать тег <form>.
  • Подписи полей должны быть слинкованы к соответствующим элементам формы.
  • Должно быть показано, как выводится ошибка и/или сообщение об успешном выполнении операции.
  • Переключение между элементами формы по клавише Tab.
  • Интерактивность: смена фокуса должна визуально подсказывать пользователю активный элемент.

Картинки

  • Используйте SVG вместо растровых изображений.
  • В случае, если SVG использовать затруднительно, используйте формат PNG.
  • Объединяйте картинки в спрайты. Это ускорит отображение страницы.
  • Называйте файлы с указанием имени модуля и блока, к которому относится изображение. Для разделения слов используйте дефис (-).

    Плохо:

    .crm-lead-history {
    	background-image: url(images/sprite.svg);
    }
    
    .crm-lead-log {
    	background-image: url(images/arrow_left.svg);
    }

    Хорошо:

    .crm-lead-history {
    	background-image: url(images/crm-lead-sprite.svg);
    }
    
    .crm-lead-log {
    	background-image: url(images/crm-lead-arrow-left.svg);
    }

26
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии