Is Div Inside List Allowed

Is div inside list allowed?

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

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<ul>
<li><div>test</div></li>
</ul>
</body>
</html>

Can I use a div inside a list item?

Yes you can use a div inside a li and it will validate.

<!ELEMENT li %Flow;>
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

can we give div within li

There are a lot of people that say a division inside a list item is incorrect, but according to the W3C validator it is perfectly fine. You'll never catch me putting divisions inside a list item though. Lists are too malformed to be putting additional block-level elements inside them.

Is OK to place a div inside th tag?

According to the HTML5 specification, that's absolutely fine. The content model is a normative description of what is allowed to be a child/descendant of the element. For the <th> element, only the following tags are permitted:

Content model:


Flow content, but with no header, footer, sectioning content, or
heading content descendants, and if the th element is a sorting
interface th element, no interactive content descendants.

The <div> tag is an example of flow content, so this should validate.

In the future, I'd like to recommend the W3C's validator service, which gives you a quick check to see whether your HTML is valid. In this instance, it passes:

<!DOCTYPE html>
<html>
<head><title> </title></head>
<body>
<table>
<tbody>
<tr>
<th>
<div></div>
</th>
</tr>
</tbody>
</table>
</body>
</html>

Can you put li elements inside a div

If you search for "HTML Validator" you can quickly run some code through one to see if it is valid or not. Div tags aren't valid as first level child elements of a ul tag. Whatever you are trying to achieve can be accomplished by styling the li tags with CSS.

Is it correct to use DIV inside FORM?

It is totally fine .

The form will submit only its input type controls ( *also Textarea , Select , etc...).

You have nothing to worry about a div within a form.

What are the allowed tags inside a li?

TL;DR: an <li> can contain any element that is valid in <body>.

In the HTML 4.01 spec for lists you’ll find the relevant extract of the DTD:

<!ELEMENT LI - O (%flow;)* -- list item -->

This specifies that an <li> may contain flow content, which is the collection of all block and inline elements.

The HTML5 spec for an <li> is the same in that it also allows any flow content.

Can I use div as a direct child of UL?

No. The only element that may be a child of <ul> is <li>.

HTML 4:

<!ELEMENT UL - - (LI)+                 -- unordered list -->

(See also how to read a content model definition in a DTD)

HTML 5:

Content model:
Zero or more li elements.

Is putting a div inside an anchor ever correct?

Depending on the version of HTML you're catering to:

  • HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".

  • HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.

    Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

    However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.



Related Topics



Leave a reply



Submit