HTML семантика. Что это такое правильный HTML?
HTML семантика. Что это такое правильный HTML?


Пролог.

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

Например: в 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

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:

Старт! Горячий старт на просторы интернета
Старт! Меню