Пролог.
Слишком часто в веб-разработке люди превращают хорошие советы в плохую практику; или, что еще хуже, неправильно интерпретируют и переиначивают рекомендации спецификации в "никогда не делайте иначе". Чаще всего результатом этого является раздутый код и эквивалент хождения вокруг пылающего пекла.
Например: в HTML
Это происходит слишком часто. Возьмите четыре простых тега:
STRONG, EM, B и I
Простым примером этого является то, как HTML теги <em> и <strong> следует использовать вместо <i> и <b>, когда их семантическое значение “акцент” и “больше акцента” более грамматически уместно.
Предполагается, что HTML связан с семантикой, указывающей, что есть или могло бы быть в профессионально написанном документе по структурным или грамматическим причинам. С этой целью все четыре из этих тегов имеют отдельные значения и варианты использования! Когда вы выделяете название юридического лица в юридическом документе жирным шрифтом или название книги курсивом, когда оно не является цитируемым, вы НЕ применяете “акцент” или “больше акцента” к этому тексту!
Пример, который мой друг привел около 15 лет назад, хорошо это иллюстрирует. Я вспоминаю об этом каждый раз, когда речь заходит об этом:
<blockquote>
<p>
<i>GURPS,</i> <b>Steve Jackson Games'</b> была впервые выпущена в 1985 году. Для данной концепции существует несколько лицензионных адаптаций игр других компаний, таких как <i>GURPS Bunnies and Burrows.</i> Однако , <b>SJ Games</b> не имеет никакого отношения к <b>Wizards of the Coast</b>, производителям <i>Dungeons and Dragons</i> RPG. <em>Нет <i>GURPS</i> контент с открытым исходным кодом.</em> <strong>Не занимайтесь плагиатом <b>SJ Games</b>!</strong>
</p>
<p>
-- <cite>RoosterBoy</cite>
</p>
</blockquote>Тег <i> для названий продуктов, <b> для соответствующих юридических лиц, <em> для выделения, <strong> для еще большего выделения. Если вы этого не понимаете, вас бы вернули в 5-й класс до середины 1980-х годов за то, что вы не сдали экзамен по русскому языку.
"Таблицы для макета - это халтура" не означает "никогда не используйте таблицы".
Мы видим тот же самый ущербный образ мышления, когда люди сверху, снизу, слева и справа делают свою жизнь несчастной и отталкивают пользователей, превратив "не используйте таблицы для верстки" в "никогда не используйте таблицы". Затем они несут бесконечную чушь о таких вещах, как "время рендеринга" или "время загрузки", и прочий подобный вздор.
Вот вам совет, если 386SX/25 под управлением windows 3.1 по dialup мог обрабатывать таблицу в IE 4, пожалуйста, закройте свой рот о "времени рендеринга" или "времени загрузки" в эпоху, когда дешевый китайский смартфон за 80 долларов имеет четырехъядерный процессор 1.5ghz и широкополосную пропускную способность!
Таблицы существуют для табличных данных. Да, использовать их только потому, что "вах-вах, глазастые колумнисты" - это глупость, и ее следует избегать. Но это не значит, что нужно злоупотреблять другими тегами для того, для чего они не предназначены - например, для неупорядоченных списков - когда у вас действительно есть табличные данные!
Я думаю, что во многом это происходит из-за того, что люди всё ещё придерживаются дурацкого образа мышления, связанного с презентационной разметкой - просто посмотрите на мусорные невежественные, некомпетентные и неумелые "фреймворки", такие как bootcrap или failwind, использующие классы для воссоздания худшего из HTML 3.2, а также на то, что большинство разработчиков не используют семантику, поскольку они не могут понять, что в таблицу входит больше тегов, чем просто <tr> и <td>! Не говоря уже о семантических отношениях, которые создают такие вещи, как атрибуты scope и axis.
Возьмем для примера правильно сформированную таблицу корзины:
<table class="shoppingCart">
<caption>Shopping Cart</caption>
<thead>
<tr>
<th scope="col">Qty</th>
<th scope="col">Iten</th>
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<th scope="row">AMD Ryzen 5 3600</td>
<td>174.99</td>
<td>174.99</td>
</tr><tr>
<td>1</td>
<th scope="row">Gigabyte Gaming X X570 Motherboard</th>
<td>139.99</td>
<td>139.99</td>
</tr><tr>
<td>2</td>
<th scope="row">G'Skill Ripjaws 32gb (2x16) DDR4 3600 memory kit</th>
<td>159.99</td>
<td>319.98</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="3">
Shipping<br>
<em>Free for orders over $100 USD
</th>
<td>Free</td>
</tr><tr>
<th scope="row" colspan="3">Grand Total (USD)</th>
<td>634.96</td>
</tr>
</tfoot>
</table>Нет никаких причин не использовать для этого таблицы! Но есть люди, которые глубоко убеждены, что "таблицы - это зло", потому что они либо повторяют то, что им сказали, и/или не смогли узнать о семантической разметке... а именно для этого HTML и существует в первую очередь. Тем более, когда альтернативы не могут сделать правильные семантические ассоциации для невизуальных объектов отображения, которые обеспечивает атрибут SCOPE, говорящий, на какой ветви должна быть применена <th>. Ассоциации, которые помогают всем невизуальным пользовательским интерфейсам - не только речи или шрифту Брайля, но даже поиску - лучше передавать эту структуру всем пользователям, а не только зрячим. Вот почему утверждения о том, что таблицы "недоступны", часто являются признаком невежественных разработчиков, которые думают, что для таблицы нужны только теги TR и TD.
Побочное замечание: используя семантику, для подавляющего большинства макетов нет причин писать классы на каждом блоке TR, TD и TH внутри... чего нельзя сказать об альтернативах вложенных DIV'ов и злоупотреблении списками. Таким образом, таблица - это не только правильная семантическая разметка, но и типично LESS-разметка!
Также HTML 5 теперь позволяет использовать TFOOT после TBODY, а не перед ним, что я приветствую. Затем я кричу "вы идиоты" в W3C за то, что обратный способ теперь является недействительным кодом... когда TFOOT перед TBODY был сделан для РЕЗУЛЬТАТА!
Продолжение следует...
Перевод с английского:
medium.com
