Почему мы должны использовать div?

Сегодня утром, когда я писал html и haml, мне пришло в голову, что использование div'ов смешно. Почему div не подразумевается? Представьте себе, если это:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

было это:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

Если предполагать часть элемента «div class», HTML будет более семантическим и бесконечно более читаемым с соответствующими закрывающими тегами!

Это похоже на HAML, где мы имеем:

.content Hello, World!

Который становится:

<div class='content'>Hello, World!</div>

Мне кажется, единственное, что должно было бы произойти, чтобы это работало в браузерах, - это то, что браузеры могут начать интерпретировать каждый элемент без существующего определения элемента html как подразумевающего <div class="<element name>">.

Это может быть полностью обратно совместимо; для селекторов CSS, jQuery и т. д. «div.hero-img» все еще может работать и быть необходимым синтаксисом для выбора элементов.

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

Так почему мы должны использовать div?

Если вы посмотрите на список элементов Mozilla html5 , каждый элемент имеет семантическое значение, а затем мы дойдем до <div>следующего:

«Представляет универсальный контейнер без особого значения».

..и затем они перечисляют произвольные элементы, которые они добавляют в html5, как <details>.

Конечно, если бы эта концепция подразумеваемых div была добавлена ​​в спецификацию html, потребовалось бы десять лет, чтобы стать стандартом, что составляет миллион лет в Интернете.

Так что я полагаю, что должна быть веская причина, пока этого не произошло. Пожалуйста, объясни мне это!

Проблема 1: Пробелы

Я полагаю, что это не придумало вообще. Хотя одна из причин, по которой этого не произошло и, вероятно, не должно происходить, заключается в том, что white-spacesв CSS classesопределяют несколько классов для элемента, а в HTML они определяют attributes.

Объясните (или попросите браузер проанализировать) следующий код:

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

Является ли familyопределение второго класса или атрибутом элемента HTML? Как вы, вероятно, видите из парсера этого сайта, он думает, что это атрибут.

Так что, если я хочу <div class="pet family">, нет никакого способа определить два класса, что является одной из двух основных причин, по которой я бы в любом случае использовал класс вместо id.

Проблема 2: прямая совместимость!

Использование <div>s на данный момент заставляет нас (по крайней мере некоторых из нас) правильно делать отступы и комментировать наш код, что является хорошей практикой для всех языков программирования.

Вместо этого, превращение блоков HTML в переменные вызовет у начинающих программистов большую путаницу в отношении того, что есть, а что нет, что-то конкретное в HTML .

Кроме того, это приведет к забавному побочному эффекту: вы должны начать сравнивать свой старый код с новыми тегами HTML5, просто чтобы убедиться, что они не придумали то же имя, которое вы указали для классов вашего div ...

Та же проблема относится к variablesиспользованию reserved wordsна некоторых языках. PHP решил это с помощью знака доллара, поэтому подобный подход в HTML привел бы к чему-то не намного лучше, чем текущее использование <div class="something">.

Мы используем <div>все, что не нравится вашему воображению, потому что это облегчает обработку и рендеринг в браузере.

В качестве контрпримера, XML позволяет создавать любое имя тега, которое вы хотите. Возможность создавать произвольные имена тегов требует затрат на обработку. Синтаксические анализаторы XML должны создавать словарь тегов, используемых в документе, как часть / во время синтаксического анализа документа.

Используя <div>браузеры, вы узнаете, что там есть контейнер и что он может игнорировать контейнер или передать его другому инструменту в цепочке, который может что-то делать с контейнером.

Вы предлагаете разрешить веб-авторам добавлять произвольные имена элементов в HTML для личных (нестандартизированных) целей. Это имеет большую проблему: это сделает опасным добавление новых элементов в стандарт HTML, потому что различные авторы уже могут использовать одно и то же имя элемента в личных целях - тем самым задним числом изменяя семантику страницы. Люди не получают удовольствия, когда новые версии браузеров ломают существующие веб-страницы, так что это не нужно.

Та же проблема с использованием произвольных имен атрибутов в личных целях. Вот почему HTML5 обязывает префикс «data-» для атрибутов частного использования, поэтому они не будут конфликтовать с новыми атрибутами в стандарте.

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

Ваш собственный пример показывает одно свойство, почему div не так уж смешны.

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

Вы правильно не закрыли imgтег. Некоторые теги, такие как img, br, hr, и другие не имеют никакого содержания, и, следовательно , не должны быть закрыты. Парсер это знает.

divТег, с другой стороны, как предполагается, будет закрыто, так как она содержит контент. Если вы только что создали свой собственный тег, парсер не будет знать, следует ли ему ожидать закрытия тега или нет.

Причина, по которой некоторые элементы должны быть закрыты, а другие нет, связана с наследием SGML, которое хорошо описывается в этом блоге: http://www.colorglare.com/2014/02/03/to-close-or-not- к close.html

Это вопрос определенности. Если вы используете XHTML, который является чистым XML и, следовательно, полностью определен, то вы можете использовать свое собственное пространство имен, например, через префикс q::

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

Если бы вы использовали XML для преобразования в (X) HTML, вы могли бы совершенно свободно генерировать из своего свободного тега «HTML» настоящий HTML-код <div class="hero-img">.

В некотором теге атрибут пространства имен с вашим собственным (фиктивным) URL:

xmlns:q="http://..."

Одним из ключевых элементов HTML является наличие предопределенных тег-элементов. Поэтому.

Класс div = это способ обойти это «ограничение».

И именно поэтому вы не видите этих «подразумеваемых» конструкций.

Целью элемента div является только структура. Это позволяет группировать элементы вместе под одним общим элементом. Это не имеет ничего общего с пробелами, скоростью, рендерингом, семантикой или чем-то еще. Это помогает вам с CSS с точки зрения стиля и javascript с точки зрения селекторов. Если вы измените его на любой другой элемент, вы измените цель.

Создание собственного именованного элемента, как вы показываете, имеет проблему в том, что поисковые системы и другие инструменты не будут знать, что имел в виду ваш элемент. Что такое «hero-img» и чем он отличается от моего «изображения-героя» и как мой API должен справляться с этим при посещении вашей страницы? Как браузер должен обрабатывать этот элемент? Это уровень блока или встроенный? Слишком много вопросов.

Как правило, теги div полезны для применения разделов или разделов на веб-странице. Вы можете использовать тег div в качестве контейнера, к которому могут быть применены другие элементы. Это также поможет в применении CSS и некоторых скриптов для определенного элемента.