Прежде чем мы приступим к объяснению, почему же атрибут align лучше не использовать, давайте расскажем, откуда вообще у нас возник этот вопрос.
Мы не только пишем контент для сайтов, но часто сами его на сайте и верстаем. Если мы пишем что-то с нуля, то никаких проблем нет: верстаем красиво и понятно. Но если обновляем какой-то старый материал, иногда сталкиваемся с архаичными вариантами верстки. И вот тут копирайтеры, вероятно, чтобы сэкономить время, копируют куски html-верстки, которые неплохо выглядят. Это допустимо, особенно в рамках одной и той же статьи, но проблема возникает тогда, когда захочется использовать "удачные" приемы на новом материале. В одном из таких материалов я и обнаружил атрибут align, который еще со времен HTML4 числится как deprecated (устаревший) (пункт 15.1.2 Alignment).
Работает — не трогай. Нет?
Вообще да, но в случае с align, к сожалению, не всегда. Давайте посмотрим на описание этого атрибута в справочнике MDN.
Описание атрибута align на MDN
Атрибут помогает выравнивать содержимое, но работает не со всеми элементами (поддерживаемые перечислены в центральной колонке). Зачем запоминать элементы, с которыми он работает, если проще использовать более универсальные решения с использованием CSS?
Более того, если элементы и стили повторяются, постоянное прописывание атрибута align, чтобы выровнять содержимое, явно не лучшее по эффективности решение — проще прописать стили прямо у элемента или даже один раз создать css класс, чтобы использовать в нужных местах.
Описание атрибута style на MDN
Атрибут глобальный, то есть может применяться с любым HTML элементом, и очень "мощный", то есть перепишет все стили, заданные, например, через атрибуты class или id, которые тоже используются для оформления документа.
Покажем на примерах, почему средства CSS все же лучше
Мы сверстали 2 таблички и выровняли содержимое атрибутом align и с помощью CSS. Вот что получилось.
Таблица с содержимым по центру, используя атрибут align
Вот. Код можно редактировать, так что поэкспериментируйте с атрибутом align, например, добавив его ко всей таблице, а вывод прочитайте под этим блоком. Чтобы таблица была чуть более читабельной, мы добавили еще один устаревший атрибут border, результат применения которого выглядит, мягко говоря, несовременно.
See the Pen Пример таблицы с атрибутом align by ctr99ru (@ctr99ru) on CodePen.
Получается, если добавить атрибут align к тегу table в надежде отцентровать все содержимое сразу, мы не получим желаемый результат, зато сама таблица переместится в центр экрана. Чтобы все-таки отцентровать содержимое таблицы, придется добавить align="center" к каждому разделу (thead, tbody, tfoot). А если таблиц несколько... В общем, очень неудобно.
Совсем другое дело, если это реализовать посредством CSS.
Таблица с содержимым по центру, используя атрибут style
Чтобы содержимое таблицы встало по центру, нужно добавить всего лишь одно CSS-свойство text-align ко всей таблице. Чтобы границы таблицы были поопрятнее, мы добавили и им чуть-чуть оформления в том же атрибуте style.
See the Pen Пример таблицы с контентом по центру посредством CSS by ctr99ru (@ctr99ru) on CodePen.
Итак, что получилось. Нам не пришлось добавлять стили к каждой части таблицы (верхушке, телу и подвалу), потому что всего лишь одно CSS свойство text-align (примененное прямо ко всей таблице) дало возможность выровнять содержимое по центру. Более того, в том же атрибуте мы можем прописать и другие стили для таблицы, как мы, например, сделали для границ. Удобно.
А если таких таблиц несколько, нам на помощь придут атрибуты class и id, которые мы упоминали выше. CSS-свойства для них, как правило прописывают в отдельном файле со стилями, чтобы не мешать структуру документа с оформлением.
Подведем итоги: чем же заменить устаревший атрибут align?
Надеюсь, наши примеры вас убедили. Если вам важно, чтобы элементы на странице вели себя предсказуемо, оформляйте структуру страницы с помощью HTML, а стилизуйте через CSS.
Атрибут align можно заменить на CSS свойство text-align, прописанное через атрибуты style, class или id.