Можно ли div вложить в li

6 Answers 6

Yes it is valid according to xhtml1-strict.dtd . The following XHTML passes the validation:

@buildakicker - is only used in HTML5 (this declaration is possible because HTML5 is no longer SGML-based, and therefore needs no DTD). It would be incorrect use it in other iterations of the HTML spec where a DTD is required.

@DavidWatson Thanks for the clarification there David. I didn't see a DocType declared in his question up there, but do in this answer.

@jasdeepkhalsa Not entirely. There are several attributes in XHTML 1.0 Strict that are no longer valid in HTML5.

As an addendum: Before HTML 5 while a div inside a li is valid, a div inside a dl, dd, or dt is not!

Actually, according to the HTML5 draft, the content model of the dt and dd elements is "flow content", so a div is allowed in both of those. You're right about it not being allowed in dl though.

If you look at xhtml1-strict.dtd, you'll see

If I recall correctly, a div inside a li used to be invalid.

@Flower @Superstringcheese Div should semantically define a section of a document, but it has already practically lost this role. Span should however contain text.

If I recall correctly @mystrdat you are correct. Somebody challenged my recent assertion that you could not do this, and when I looked it up I was wrong. But I strongly recall actually validating markup one time where the error output clearly stated I was not allowed to put divs inside lis.

I see you would want to do this if you wanted to make, say, the whole box of a menu item clickable. I used to insert an 'li' tag in 'a' tags to do this but this seems more valid.

If you want to make a "whole box" of a menu item clickable, you simply need to set its child anchor element to "display:block" or "display:inline-block" with CSS. No need to hack the markup for that purpose.

I'm starting in the webdesign universe and i used DIVs inside LIs with no problem with the semantics. I think that DIVs aren't allowed on lists, that means you can't put a DIV inside an UL, but it has no problem inserting it on a LI (because LI are just list items haha) The problem that i have been encountering is that sometimes the DIV behaves somewhat different from usual, but nothing that our good CSS can't handle haha. Anyway, sorry for my bad english and if my response wasn't helpful haha good luck!

Я не уверен, почему мне нужно использовать ul-li vs просто с помощью divs при перечислении элементов. Я могу сделать так, чтобы оба выглядели одинаково, так где же функциональное преимущество создания неупорядоченного списка против выстраивания divs?

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

Я не уверен, почему мне нужно использовать ul-li vs просто с помощью divs при перечислении элементов. Я могу сделать как посмотреть точно так же

в вашем вопросе есть ключевое слово: "посмотрите". Можете ли вы также сделать их тип то же самое для слепых с использованием шрифта Брайля читатель? Можете ли вы сделать их звук то же самое для слепых людей, используя текст-в-речь синтезатора? Можете ли вы еще сделайте их выглядеть одинаково для визуально люди с ограниченными возможностями, использующие пользовательские таблицы стилей CSS на стороне клиента?

это слово, "look", очень опасное слово – когда вы используете его по отношению к HTML, все тревоги должны сработать в вашей голове. HTML-это язык для описания семантической структуры документа гипермедиа. Семантическая структура не есть "взгляд", это абстрактное понятие.

даже если вас не волнует весь этот семантический фокус, и вы не заботитесь о слепых людях, подумайте это: Google, Yahoo, MSN и Co. у вас нет глаз, они не "смотрят" на ваш визуализированный CSS.

используя семантически правильную разметку, вы встраиваете дополнительную информацию в текст. Используя ul / li, вы сообщаете потребляющему приложению, что информация представляет собой список, а не просто "что-то" (кто знает, что), которое является текстом внутри произвольного элемента.

прямой ответ на ваш вопрос: Функциональным преимуществом является то, что divs мало значат сами по себе, тогда как ul lis явно означает "это не упорядоченный список элементов."

термин "семантика" относится к тому, как вы используете неотъемлемое значение существующих структур для создания явного значения. Код HTML состоит из тегов, которые означают определенные вещи сами по себе. И есть установленные правила / рекомендации/способы их использования, чтобы ваш опубликованный HTML-документ передает то, что вы хотите, чтобы он означал.

Если вы перечисляете что-то в своем документе, добавьте упорядоченный список (UL) или неупорядоченный список (OL). С другой стороны, элемент Page division (DIV) используется для создания определенного и отдельного фрагмента контента.

на div элемент "делит."Когда вы смотрите на страницу, есть определенные части, такие как тело контента, нижний колонтитул, заголовок, навигация, меню, формы и т. д. И вы можете использовать div теги для создания этих подразделений. Часто части страниц соответствуют визуальному макету, поэтому использование явных разделов страниц (DIVs) для разрезания макета в CSS является естественным. Сюда div теги становятся структурными.

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

чтобы запутать вопросы: Google использует h3 и div чтобы "разделить" их список поиска результаты. ul > li > h3 + div

поэтому, когда вы отключаете все стили (Shift+Cmd/Crtl+S В Firefox с панелью инструментов WebDeveloper),divs должно пойти прочь, и штабелирует естественно. Ваш голый HTML должен по-прежнему отображать красивую страницу с четкой иерархией: сверху вниз, сначала самый важный контент и списки с маркерами и номерами для перечисленных элементов. И это хорошая идея, чтобы добавить ссылку в верхней части (для невизуальных пользователей), что позволяет перейти к: основной контент, важные формы или основные заголовки (как оглавление).

наконец, имейте в виду, что вы создаете документ. Без всех визуальных эффектов он все равно должен быть убедительным документом.

вы должны использовать соответствующие теги для контента, который вы хотите поместить внутрь. Это не только означает, что ul/li более подходит для списков. Это также означает, что вы должны рассмотреть содержимое своего списка и посмотреть, является ли его неупорядоченным/упорядоченным или списком определений.

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

Если вы используете div вместо этого, lynx не сможет отобразить страницу читаемым способом.

Мне лично нравится ли для семантики. При просмотре источника вы сразу видите, что у вас есть список чего-то, если они обернуты li. Коллекция div не предоставляет семантического значения, и обычно единственная семантика в списке вводится классами css, такими как"listItem". Что, очевидно, указывает на то, что ли должен был использоваться в первую очередь.

Если у вас есть цикл в логике презентации, я всегда предпочитаю li над div.

и на самом деле не так важно, как я не могу сказать вам в последний раз, что я действительно прочитал "список" вещей на веб-сайте, газете или журнале-онлайн или в печати.

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

и и они услышали "вот список . "когда это просто мешанина вещей, а не на самом деле список.

не так - это плохо, но всякий раз, когда тег злоупотребляет (как часто), он разбавляет семантический смысл тега до такой степени, что он совершенно бесполезен. Я узнал об этом недавно от подрядчика, которого мы наняли, чтобы помочь с CSS/UI нашего веб-приложения, и разница, которую он внес в читаемость / ремонтопригодность HTML-кода очень заметно для меня.

мне просто интересно, что вы думаете о DIV-tag внутри FORM-tag?

мне нужно что-то вроде этого:

это общая практика, чтобы использовать DIV внутри FORM или мне нужно что-то другое?

Это совершенно нормально .

на form будет отправлять только элементы управления типа ввода (*также Textarea , Select , etc. ).

вам не о чем беспокоиться div внутри form .

вполне приемлемо использовать DIV внутри тег.

если вы посмотрите на значение по умолчанию CSS 2.1 таблица стилей, div и p находятся в

можно использовать в форме - нет проблем . но если вы собираетесь использовать как метки input нет . label гораздо лучший вариант:

неправильно иметь в качестве прямого дочернего элемента

ваш вопрос не касается того, что вы хотите поместить в теги DIV, поэтому, вероятно, вы получили некоторые неполные/неправильные ответы. Правда в том, что вы можете, как сказал Ройи, поместить теги DIV внутри своих форм. Например, вы не хотите делать это для меток, но если у вас есть форма с кучей флажков, которые вы хотите разложить на три столбца, то обязательно используйте теги DIV (или SPAN, HEADER и т. д.) чтобы добиться того, чего вы пытаетесь достичь.

элемент HTML (или элемент разделения документа HTML) является универсальный контейнер для содержимого потока, который является не представлять что угодно. Его можно использовать для группировки элементов для укладки цели (с использованием атрибутов class или id) или потому, что они разделяют значения атрибутов, такие как lang. Он должен использоваться только тогда, когда нет других семантический элемент (например, or ) уместен.

вы можете использовать div внутри формы, если вы говорите об использовании div вместо таблицы, то google о Tableless web design

как сказали другие, все хорошо, вы можете сделать это просто отлично. Для меня лично я стараюсь сохранить форму иерархической структуры с моими элементами с div быть внешним самым родительским элементом. Я стараюсь использовать только table p ul и span внутри формы. Просто мне легче отслеживать отношения между родителями и детьми внутри мой веб-страниц.

абсолютно нет! Он будет визуализировать,но не будет подтверждать. Используйте ярлык.

Это неправильно. Она недоступна. Вы видите это на некоторых сайтах, потому что некоторые разработчики просто ленивы. Когда я нанимаю разработчиков, это одна из первых вещей, которые я проверяю в работе кандидатов. Формы противные, но не торопитесь и научитесь делать их правильно

нет, это не

теги всегда злоупотребляют для создания веб-макета. Его символическая цель-разделить раздел / часть страницы, чтобы добавить или применить к ней отдельный стиль. [w3schools док] [консорциума W3C]

это сильно зависит от того, что ваш some и another есть.

HTML5, имеет более логически бирки значения, вместо иметь простые теги макета. The section , header , nav , aside у всего есть свой смысловой смысл. И используются против

Я знаю, что в HTML5 нельзя вкладывать div в li, хотя можно, и это работает. Значит ли это, что я не должен его использовать? Каков стандарт вложения div в dls?

3 ответа

Эта информация неверна - элементы div считаются flow content и очень хорошо разрешены внутри li элементов. Возможно, вы перепутали его с элементами ul / ol , которые могут содержать только li соответственно.

Что изменилось в HTML5, так это то, что в нем больше нет блочных и встроенных элементов. Вместо этого существует более сложное разделение элементов на несколько категорий .

Чтобы узнать, что разрешено внутри элемента в соответствии с HTML5, см. Описание конкретного тега, где раздел " Модель содержимого " сообщает вам, какой контент разрешен внутри этого конкретного элемента.

РЕДАКТИРОВАТЬ: устранение путаницы в комментариях об элементах списка

(согласно уровню жизни HTML на 30.07.2019)

Существует несколько типов списков, наиболее распространенными из которых являются неупорядоченные ( ul ) и упорядоченные ( ol ) списки. ul и ol - это элементы-контейнеры, которые содержат только элемент списка ( li ) в качестве дочерних элементов - другие элементы не допускаются *. Сам элемент li может содержать произвольное содержимое потока .
_{* (технически они также могут содержать "вспомогательные" элементы}

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

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

"Элемент dl представляет собой список ассоциаций, состоящий из нуля или более групп" имя-значение "(список описания). Группа" имя-значение "состоит из одного или нескольких имен (элементы dt, возможно, как дочерние элементы дочернего элемента div), за которыми следует одно или более значений (элементы dd, возможно, как дочерние элементы дочернего элемента div), игнорируя любые узлы, кроме дочерних элементов dt и dd, а также элементы dt и dd, которые являются дочерними элементами дочерних элементов div. Внутри одного элемента dl не должно быть быть более чем одним элементом dt для каждого имени ".

Есть даже пример вложения div внутри dl, который обертывает элементы dt и dd.

Автор статьи

Куприянов Денис Юрьевич

Юрист частного права

Страница автора

Читайте также:

  
• Если пристав не может взыскать деньги с должника что делать
  
• Когда русь тур вернет деньги за туры в китай
  
• Операции с наличными деньгами при использовании программно технических средств
  
• Как перевести деньги в швейцарию
  
• Как узнать лицевой счет нижегородэнергогазрасчет