253  /  331

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

Просмотров: 2058 (Статистика ведётся с 06.02.2017)

Семантика

Использование семантики облегчает восприятие 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-pos">Бухгалтер</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: url(images/sprite.svg);
        }
    
        .crm-lead-log {
            background: url(images/arrow_left.svg);
        }

    Хорошо:

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

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

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