Сегодня утром, когда я писал 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
в CSSclasses
определяют несколько классов для элемента, а в HTML они определяютattributes
.Объясните (или попросите браузер проанализировать) следующий код:
Является ли
family
определение второго класса или атрибутом элемента HTML? Как вы, вероятно, видите из парсера этого сайта, он думает, что это атрибут.Так что, если я хочу
<div class="pet family">
, нет никакого способа определить два класса, что является одной из двух основных причин, по которой я бы в любом случае использовал класс вместо id.Проблема 2: прямая совместимость!
Использование
<div>
s на данный момент заставляет нас (по крайней мере некоторых из нас) правильно делать отступы и комментировать наш код, что является хорошей практикой для всех языков программирования.Вместо этого, превращение блоков HTML в переменные вызовет у начинающих программистов большую путаницу в отношении того, что есть, а что нет, что-то конкретное в HTML .
Кроме того, это приведет к забавному побочному эффекту: вы должны начать сравнивать свой старый код с новыми тегами HTML5, просто чтобы убедиться, что они не придумали то же имя, которое вы указали для классов вашего div ...
Та же проблема относится к
variables
использованиюreserved words
на некоторых языках. PHP решил это с помощью знака доллара, поэтому подобный подход в HTML привел бы к чему-то не намного лучше, чем текущее использование<div class="something">
.источник
<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"
объявить два класса, что снова становится одним и тем же.Мы используем
<div>
все, что не нравится вашему воображению, потому что это облегчает обработку и рендеринг в браузере.В качестве контрпримера, XML позволяет создавать любое имя тега, которое вы хотите. Возможность создавать произвольные имена тегов требует затрат на обработку. Синтаксические анализаторы XML должны создавать словарь тегов, используемых в документе, как часть / во время синтаксического анализа документа.
Используя
<div>
браузеры, вы узнаете, что там есть контейнер и что он может игнорировать контейнер или передать его другому инструменту в цепочке, который может что-то делать с контейнером.источник
<div>
означает меньше сложности, что всегда хорошо. HTML по своей сути состоит из двух типов конструкций: блочного уровня и встроенной разметки. Наличие большего количества способов выражения того же самого только добавляет к беспорядку, который является HTML.Вы предлагаете разрешить веб-авторам добавлять произвольные имена элементов в HTML для личных (нестандартизированных) целей. Это имеет большую проблему: это сделает опасным добавление новых элементов в стандарт HTML, потому что различные авторы уже могут использовать одно и то же имя элемента в личных целях - тем самым задним числом изменяя семантику страницы. Люди не получают удовольствия, когда новые версии браузеров ломают существующие веб-страницы, так что это не нужно.
Та же проблема с использованием произвольных имен атрибутов в личных целях. Вот почему HTML5 обязывает префикс «data-» для атрибутов частного использования, поэтому они не будут конфликтовать с новыми атрибутами в стандарте.
Div и span определены как семантически нейтральные элементы, что означает, что вы можете использовать их в личных целях, не опасаясь, что семантика изменится в будущих браузерах. Конечно, для добавления имени класса требуется еще несколько символов, но прямая совместимость того стоит.
источник
Ваш собственный пример показывает одно свойство, почему div не так уж смешны.
Вы правильно не закрыли
img
тег. Некоторые теги, такие какimg
,br
,hr
, и другие не имеют никакого содержания, и, следовательно , не должны быть закрыты. Парсер это знает.div
Тег, с другой стороны, как предполагается, будет закрыто, так как она содержит контент. Если вы только что создали свой собственный тег, парсер не будет знать, следует ли ему ожидать закрытия тега или нет.Причина, по которой некоторые элементы должны быть закрыты, а другие нет, связана с наследием SGML, которое хорошо описывается в этом блоге: http://www.colorglare.com/2014/02/03/to-close-or-not- к close.html
источник
Это вопрос определенности. Если вы используете XHTML, который является чистым XML и, следовательно, полностью определен, то вы можете использовать свое собственное пространство имен, например, через префикс
q:
:Если бы вы использовали XML для преобразования в (X) HTML, вы могли бы совершенно свободно генерировать из своего свободного тега «HTML» настоящий HTML-код
<div class="hero-img">
.В некотором теге атрибут пространства имен с вашим собственным (фиктивным) URL:
источник
q
здесь совершенно бессмысленный префикс (и недопустимый XML), если только вы не объявили xmlns где-то в документе. Вы также можете повторно объявить одно и то же пространство имен с разными префиксами или установить пространство имен по умолчанию для определенного раздела документа, и до тех пор, пока значения xmlns равны, эти разные префиксы будут обрабатываться одинаково при применении CSS или в DOM.Одним из ключевых элементов HTML является наличие предопределенных тег-элементов. Поэтому.
Класс div = это способ обойти это «ограничение».
И именно поэтому вы не видите этих «подразумеваемых» конструкций.
источник
Целью элемента div является только структура. Это позволяет группировать элементы вместе под одним общим элементом. Это не имеет ничего общего с пробелами, скоростью, рендерингом, семантикой или чем-то еще. Это помогает вам с CSS с точки зрения стиля и javascript с точки зрения селекторов. Если вы измените его на любой другой элемент, вы измените цель.
Создание собственного именованного элемента, как вы показываете, имеет проблему в том, что поисковые системы и другие инструменты не будут знать, что имел в виду ваш элемент. Что такое «hero-img» и чем он отличается от моего «изображения-героя» и как мой API должен справляться с этим при посещении вашей страницы? Как браузер должен обрабатывать этот элемент? Это уровень блока или встроенный? Слишком много вопросов.
источник
Как правило, теги div полезны для применения разделов или разделов на веб-странице. Вы можете использовать тег div в качестве контейнера, к которому могут быть применены другие элементы. Это также поможет в применении CSS и некоторых скриптов для определенного элемента.
источник