Есть ли разница между <div/"> и <div></div>?

Перейдите на проблему на моей веб-странице, где нижний колонтитул на главной странице неправильно отображался для одной конкретной страницы. На этой странице у меня был

<div style="clear:both" /> внизу.

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

<div style="clear:both"></div>

Я не понимаю, почему его писать таким образом должно привести к другому результату. Разве они не семантически эквивалентны? Я проверил и дважды проверил, что это единственное изменение, которое я сделал. Перевертывание назад и вперед между ними изменило бы поведение нижнего колонтитула.

Итак, мой вопрос... не эквивалентны? Какая разница между ними?

Edit: Нечетная часть, они оба делают то, что я хочу, чтобы материал над ними на странице. Я имею в виду, в случае самозакрывающегося тега div, если я полностью удалю его, страница определенно реагирует, поэтому он должен делать с ним ЧТО-ТО, а не просто игнорировать его полностью.

Ответы

Ответ 1

<div /> не является допустимой разметкой. Самозакрывающийся тег не разрешен.

Вам нужно использовать полную версию <div></div>.

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

Ответ 2

В соответствии с спецификацией HTML 4.01, раздел 7.5.4 (" Группировка элементов: элементы DIV и SPAN):

Начальный тег: требуется, конечный тег: требуется

Таким образом, самозакрывающийся тег <div> (например, первый пример, который вы указали: <div />) недействителен.

Ответ 3

Если я правильно помню - <div /> недействителен. Используйте <div></div>, если вы хотите, чтобы он работал повсюду. Закрывающий тег необходим, поэтому выполнение таких действий, как <div class="Clear" />, не будет работать.

Все элементы группировки будут вести себя одинаково. Вы увидите такое же поведение как с DIV, так и с SPAN.

EDIT: нашел эту ссылку, глядя на ссылку в ответе, отправленную @Donut - ее матрицу, которая показывает, какие элементы имеют необязательный требование закрытия тега (среди прочего.) Посмотрел интересно, поэтому я думал, что разместил его здесь, чтобы поделиться со всеми остальными.

Ответ 4

Это зависит от используемого DOCTYPE.

Для XHTML, который является XML, эти два тега эквивалентны. Вы передадите это браузеру, включив в качестве первой строки на своей странице один из следующих DOCTYPE:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Для HTML 4.01, который предполагается всем (?) браузерам, когда нет DOCTYPE, определенные теги должны быть выражены как open-close. Большинство тегов уровня блока требуют этого, включая теги без разметки как <SCRIPT>. Если вы посмотрите на документацию WDG HTML, вы увидите, требуется ли конкретный тег open-close или может быть выражен как пустой тег, через элемент синтаксиса:

Syntax      <DIV>...</DIV>

Ответ 5

self terminating tags действительны в XML, но не в этом случае для HTML

Ответ 6

Первый вариант недействителен html; второй - это. <div /> действительно смущает IE, поэтому всегда выбирайте <div><div/>.

Ответ 7

Вы не сможете разместить контент в "<div />".

Ответ 8

<div /> действителен в зависимости от вашего DOCTYPE Это действительный XHTML Transitional и XHTML Strict

DEMO: http://wecodesign.com/demos/stackoverflow-1411182.htm

ВАЛИДАЦИЯ: http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

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

<style type="text/css">
.clear-fix {
    float: none !important;
    height: 0 !important;
    overflow: hidden !important;
    clear: both !important;
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
</style>

<br class="clear-fix" />

Некоторые могут опросить мое использование !important здесь; однако, вот почему он существует! Мы знаем, что когда мы что-то проясняем, мы хотим, чтобы он выполнял конкретную задачу независимо от того, что.

Возьмем, например:

<style type="text/css">
    .hidden {display: none;}
    #foo {display: block;}
</style>

<p id="foo" class="hidden">You can still see me</p>

В этом конкретном случае вы добавили бы !important в свой скрытый класс, потому что он довольно ясно, что он должен скрывать материал независимо от того, что