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

13

Сегодня утром, когда я писал 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, потребовалось бы десять лет, чтобы стать стандартом, что составляет миллион лет в Интернете.

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

Джордан Дэвис
источник
На самом деле есть два
Lie Ryan

Ответы:

7

Проблема 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">.

mavrosxristoforos
источник
Были бы какие-нибудь проблемы с парнем, который изобрел «класс», указав, что <z:name1 attr1=foo attr2=bar> ... <z/name2 attr3=boz ... </z>это будет семантически эквивалентно, <div class="name1" attr1="foo" attr2="bar">...</div><div class="name2" attr1="boz"> ... </div>но займет намного меньше времени для отправки через модем 14.4K?
суперкат
Я думаю, нет. Но это был бы просто другой синтаксис для написания одной и той же вещи, без какого- <div class="">либо улучшения концепции . Опять же, зачем определять это z:name1или z/name2это тег HTML, classа не его id? И здесь снова появляется проблема пустого пространства. Поэтому необходимо z:"name1 name2"объявить два класса, что снова становится одним и тем же.
mavrosxristoforos
Есть много возможностей синтаксиса. Моя точка зрения заключалась в том, что в эпоху, когда многие люди использовали модемы 14,4 КБ или более медленные, должна была существовать форма, которая хотя бы учитывала проблемы с пропускной способностью.
суперкат
Я определенно понимаю это. Как веб-разработчик, я все еще пытаюсь свести к минимуму все, чтобы создавать более быстрые сайты и многое другое. Я верю, что это хороший подход во многих аспектах, хотя он и есть.
mavrosxristoforos
5

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

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

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


источник
Я почти уверен, что если бы браузеры просто использовали упомянутый подразумеваемый метод div, затраты на обработку были бы чрезвычайно малы. И польза от чтения и записи будет огромной.
Джордан Дэвис
3
<div>означает меньше сложности, что всегда хорошо. HTML по своей сути состоит из двух типов конструкций: блочного уровня и встроенной разметки. Наличие большего количества способов выражения того же самого только добавляет к беспорядку, который является HTML.
« облегчает обработку и рендеринг в браузере ». Это не совсем так. Браузер должен анализировать нераспознанные теги, и все методы DOM и селекторы CSS по-прежнему должны работать с ними так, как вы ожидали, и браузеры по-прежнему будут применять CSS к нераспознанным элементам. Единственное, что браузер не делает с нераспознанными тегами, это применяет стили по умолчанию (стили пользовательского агента) и поведение.
Ли Райан
3

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

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

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

JacquesB
источник
2

Ваш собственный пример показывает одно свойство, почему 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

Пит
источник
2

Это вопрос определенности. Если вы используете 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://..."
Joop Eggen
источник
1
+1 за простое решение. Ему даже не нужно включать префикс пространства имен, и он может просто объявить NS по умолчанию для всего документа и предоставить XSLT для преобразования его в (X) HTML.
DougM
1
Пространство имен XML определяется не префиксом, а значением объявления этого префикса xmlns. qздесь совершенно бессмысленный префикс (и недопустимый XML), если только вы не объявили xmlns где-то в документе. Вы также можете повторно объявить одно и то же пространство имен с разными префиксами или установить пространство имен по умолчанию для определенного раздела документа, и до тех пор, пока значения xmlns равны, эти разные префиксы будут обрабатываться одинаково при применении CSS или в DOM.
Ли Райан
@LieRyan хорошая мысль. Я должен был упомянуть это. Предполагается, что факт был известен. Добавлено
Joop Eggen
0

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

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

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

Питер Б
источник
Расскажите об этом всем инженерам Google, определяющим новую спецификацию веб-компонентов ... Я понимаю, что вы имеете в виду, но в конечном итоге в ближайшие несколько лет произойдет взрыв элементов, созданных разработчиками. Моя идея просто более удобна для пользователя. Точка взята, хотя.
Джордан Дэвис,
0

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

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

обкрадывать
источник
0

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

Ишан шах
источник