Есть ли разница между <div /> и <div></div>? - PullRequest
Новая
       6

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

32 голосов
/ 11 сентября 2009

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

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

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

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

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

Так что мой вопрос ... это не эквивалентно? В чем разница между ними?

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

Ответы [ 8 ]

37 голосов
/ 11 сентября 2009

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

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

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

31 голосов
/ 11 сентября 2009

Согласно спецификации HTML 4.01 , раздел 7.5.4 («Элементы группировки: элементы DIV и SPAN):

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

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

16 голосов
/ 11 сентября 2009

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

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

РЕДАКТИРОВАТЬ: Найдена эта ссылка при просмотре ссылки в ответе, опубликованном @Donut - это матрица, которая показывает, какие элементы имеют необязательное требование закрывающего тега (среди прочего). Выглядело интересно, поэтому Я решил опубликовать это здесь, чтобы поделиться со всеми остальными.

11 голосов
/ 11 сентября 2009

Это зависит от используемого вами 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>. Если вы посмотрите HTML-документацию WDG , вы увидите, требует ли определенный тег открытия-закрытия или может быть выражен в виде пустого тега через элемент «синтаксис»: 

Syntax      <DIV>...</DIV>
4 голосов
/ 11 сентября 2009

самозавершающиеся теги действительны в XML, но не в этом случае для HTML

1 голос
/ 16 августа 2011

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

1 голос
/ 11 сентября 2009

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

0 голосов
/ 16 августа 2011

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

ДЕМО : 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 к вашему скрытому классу, потому что совершенно очевидно, что он должен скрывать вещи , независимо от того, что

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...