Why is the following code valid when I am using a <div> inside a <li>?
<ul>
<li class="aschild">
<div class="nav">Test</div>
</li>
</ul>
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">
Inside a <li> you can have anything you could naturally put inside a <div>. They are no different in this sense.
It should be valid in HTML4, XHTML and HTML5 as well.
This is NOT valid though (so the sources you found about "no divs in lists" could refer to this situation):
<ul>
<li></li>
<div></div>
<li></li>
</ul>
So: Lists (ul, ol) can only have lis as their children. But lis can have anything as their children.
Because <li> is a block element, not an inline element like <span> or <a>.
An <li> is a block element, and will work perfectly fine with other block elements inside.
Yes, you can. As much as you want.
if you take a look with your developer tools and inspect katespade website's code you will find that you can add as many div inside a Li tag but you cannot add the tag as a child in <ul> or <ol>.
<ul>
<li> <div class="example1>
<span>lorem ipsum </span>
</div> </li>
<li> </li>
</ul>
here is an example on this katespade's web app
Katespade
Related
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
I try to tidy the following html code, and I get an strange result. li elements are not aligned.
Is it correct to have al ul tag and text inside an a
<a> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
Why It could happens?
ul tag is a block element tag - a tag is a inline-block element tag - it is not recommended to put block elements within inline-block elements.
If you had a basic navigation it would look like
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
As explained earlier - within the ul tag you can assign the a tags to navigate to other links/webpages.
The accepted ways of providing indentation to your code is by using 2-space or 4-space indentation (Every time you open a child tag in the next line give it 2/4 space ). Although in HTML indentation does not matter, your code will work perfectly fine with whatever way you wish to do indentation.
tidy code (2-space indentation):
<a href="Link_to_anything"> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
I have added href attribute , as the purpose of the <a> tag is to link the contents inside to another web page or part of a web page
DEFINITION:
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination.
The anchor tag can hold most tags inside it like <img>, <p>, <h1> to <h6>,etc. You can perfectly add <ul> tag within the <a> tag
Here is the HTML of my tool. Each <li is a button for a page. Once I click the page number, that element will no longer have the child <a. So in the below example, page 2 is selected.
<span class="pagingWidget"
<ul>
<li>
<a class="paginate-page" href="javascript:;">1</a>
</li>
<li>2</li>
<li>
<a class="paginate-page" href="javascript:;">3</a>
</li>
<li>
<a class="paginate-page" href="javascript:;">4</a>
</li>
</ul>
</span>
I want to create an object that will always select the page element that is selected. So I want span.pagingWidget > ul > li, that does NOT have a child of <a. Is that possible with the negation CSS pseudo-class?
Unfortunately, what you're attempting to do is not possible through CSS alone.
The closest thing to what you're describing is the :empty pseudo class but that is used to select elements that are completely empty.
I have code :
<ul>
<li>home</li><span class="divider"> | </span>
.....
</ul>
and
<ul><li>one</li> | <li>two</li> | <li>three</li></ul>
But validator say it wrong. What should I do?
The allowed elements inside a <ul> is simply <li>:
Permitted contents
Zero or more li elements
http://www.w3.org/TR/html-markup/ul.html
If you want to add borders / piping, use CSS. Like this example (for simplicity)
<ul>
<li style="border-right:solid 1px #000;">Home</li>
<li style="border-right:solid 1px #000;">About Me</li>
</ul>
As you get more familiar with CSS, you'll find better ways to do that... and also not inline.
All tags directly beneath a <ul> tag must be <li> tags. These <li> tags can contain spans, but the <ul> itself should not.
It seems like with html like
<ul id="projectsList" class="list-style-1">
<li>
<a href="/projects/view/1">
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</a>
</li>
</ul>
firefox adds markup to make it
<ul class="list-style-1" id="projectsList">
<li>
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</li>
</ul>
I narrowed the problem to the meta list items if I comment out the meta list, it works http://jsfiddle.net/MSegC/2/
I want to use the <a> as a block level element as I want the user to be able to click the whole box to enter the link
A is not a block level element in html (at least in html 4) so the short story is you can't use it like this :). That's why FF breaks' it for you.
http://htmlhelp.com/reference/html40/block.html
You should do what you want with an onclick event on the containing block.
Another option seems to be to force the doctype of the page to be html5 since in html5 it is possible for a to be a block level element.
http://davidwalsh.name/html5-elements-links
As previously mentioned, <a> is not a block-level element, but you can make it into one by setting the display property to either block or inline-block.
display:block; should make it act like any other block-level element.
display:inline-block; is a half-way house between making it a block-level and an inline element. If display:block; makes your page layout go nuts, then use inline-block instead.