Иногда новички во фронтенде не понимают истинного предназначения разметки (HTML) и стилей (CSS). Однажды в комментариях к одной из публикаций Форвеба возник вопрос:
Что в 2017 лучше использовать для вёрстки таблиц, HTML-таблицы или CSS-гриды?
Что не так с этим вопросом? Давайте разберёмся.
Разметка — про семантику
С точки зрения компьютера текст это просто последовательность символов. HTML создан для того, чтобы дать компьютеру больше информации о структуре текста. Семантичная разметка — такая разметка, которая позволяет компьютеру исходную последовательность символов разобрать на смысловые единицы вроде секций, заголовков, списков, таблиц, форм.
Стили — про внешний вид
Голый текст это хорошо, но ещё лучше, когда его можно оформить — задать размер шрифта и интерлиньяж, ограничить ширину, выделить заголовки, покрасить ссылки в нужный цвет. За всю эту внешнюю красоту отвечают стили (CSS), и они чаще всего никак не влияют на семантику, то есть на смысл текста. Они лишь дают возможность изменить его внешний вид.
Хороший пример — CSS Zen Garden. Один и тот же HTML-документ, смысл которого не меняется, оформлен более чем двумястами разными способами.
Если разметка не отвечает за визуальное представление, что в HTML делают элементы вроде <i>
или <strong>
?
Дело в том, что эти элементы тоже несут смысл. Например, так определяется элемент <strong>
в спецификации HTML:
Элемент
<strong>
означает важность, серьёзность или срочность его содержимого.
Заметьте, ни слова не сказано о выделении содержимого жирным начертанием шрифта. Жирное начертание для <b>
и <strong>
, фоновое выделение для <mark>
и другое подобное оформление задаётся стандартыми стилями браузера (user-agent stylesheet). Эти стили никак не относятся к семантике разметки. Более того, в разных условиях одни и те же HTML-элементы могут быть визуально представлены по-разному (например, элементы форм на Windows и macOS). Несмотря на разный внешний вид, кнопка на Windows и кнопка на macOS несут один и тот же смысл.
Разделяйте семантику и представление
Вернёмся к вопросу из начала статьи:
Что в 2017 лучше использовать для вёрстки таблиц, HTML-таблицы или CSS-гриды?
Таблицы нужно размечать как таблицы, то есть тегами <table>
, <td>
и так далее. Как они будут выглядеть на экране у пользователя — дело ваше, вы полностью контролируете их внешний вид через стили. Ничего не мешает разметить HTML-таблицу и стилизовать её CSS-гридами или флексами.
Запомните: HTML — про семантику, CSS — про внешний вид.