1️⃣
Разметка
  • 1. 1. Введение
  • 1. 2. Введение в HTML
  • 1. 3. Подходы к разметке
  • 1. 4. Работа со спецификацией
  • 1. 5. Проверка валидности
  • 1. 6. Часто используемые теги и типовые ошибки
  • 1. 7. Методика семантической разметки
    • 1. 7. 1. Определяем DOCTYPE
    • 1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта
    • 1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы
    • 1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов
    • 1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
    • 1. 7. 6. Шаг 5. Размечаем фразовые элементы
  • 1. 8. Использование тега br
  • 1. 9. DOCTYPE
  • 1. 10. Как работает атрибут target
  • 1. 11. Правильное использование ссылок и кнопок
  • 1. 12. Как делать пустые ссылки?
  • 1. 13. Как правильно скрывать элементы?
  • 1. 14. Когда применять список терминов (dl)?
  • 1. 15. Как использовать ссылки mailto: и tel:
  • 1. 16. Именование сущностей
  • 1. 17. Разметка по БЭМ
    • 1. 17. 1. Введение
    • 1. 17. 2. Предыстория
    • 1. 17. 3. Частые проблемы из-за неправильной CSS-архитектуры проекта
    • 1. 17. 4. Основные понятия
    • 1. 17. 5. Свод правил БЭМ-а
    • 1. 17. 6. БЭМ для CMS
    • 1. 17. 7. Названия классов по БЭМ
    • 1. 17. 8. БЭМ — это про компоненты
    • 1. 17. 9. Темизация
    • 1. 17. 10. Плюсы и минусы БЭМ
    • 1. 17. 11. Алгоритм выделения блоков
    • 1. 17. 12. Типовые интерфейсные решения
    • 1. 17. 13. Блоки и элементы
    • 1. 17. 14. Миксы блоков и элементов
    • 1. 17. 15. Модификаторы блоков и элементов
    • 1. 17. 16. Типовые ошибки
  • Дополнительные материалы
Powered by GitBook
On this page

1. 1. Введение

HTML-разметка страницы пишется по определённым правилам, которые описываются в специальных документах — спецификациях. Спецификации разрабатываются сообществом разработчиков браузеров и профессионалов отрасли.

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

Что же такое семантика? Это, собственно, и есть следование правилам, которые описываются в спецификациях. Семантическая разметка — разметка, в которой все элементы используются согласно их назначению.

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

В процессе разметки страницы мы будем размечать все содержательные сущности документа подходящими по смыслу тегами. Декоративные (не содержательные) сущности в разметку входить не должны.

Как происходит типичный процесс написания разметки:

  • Получаем графический макет.

  • Пишем по нему разметку в текстовом редакторе.

  • Периодически открываем файл с написанной разметкой в браузере и видим результат.

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

Далее в этом руководстве мы рассмотрим алгоритм, которому можно следовать при разметке большинства типовых веб-страниц. Для удобства все шаги будем разбирать на практических примерах из реальных макетов. Мы рассмотрим содержательное назначение основных тегов для семантической разметки, типовые ошибки в их применении, специфику работы с ними.

Next1. 2. Введение в HTML

Last updated 1 year ago