Can you guys please tell me that the following code is valid or invalid ? can i use div tag inside list?
<ul>
<li> Sample
<ul>
<li> Main </li>
<div>
<p> </p>
</div>
</ul>
</li>
</ul>
No, it's not valid because <div> tag is not allowed inside a <ul> element, you'll need to add it inside a <li> tag to make it valid:
<li> Main </li>
<li><div><p> </p></div></li>
I recommend you to use http://validator.w3.org/check instead of asking here in SO.
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'm using Sublime Text 2 for some find&replace operations. I'm looking for a regex that replaces only the h1 classes tags to bootstrap breadcrumbs, but doesn't affect the content inside them. Each h1 tag has a different text and as there're over 700 files, doing this manually is a hard work!
For example, i'd like to replace this:
<h1 class="xyz">SOME CONTENT</h1>
To this:
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>SOME CONTENT</span>
</li>
</ol>
That "SOME CONTENT" would be the text that I want to keep.
It is possible?
I'm using this code to find the tags and content:
<h1 class="xyz">[^<>]*</h1>
But if i replace to this:
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>[^<>]*</span>
</li>
</ol>
It replaces the text (which I want to keep) with the expression [^<>]*.
Any idea?
Here is another example (I do not think it is necessary to include the closing >):
<h1 class="xyz">([^<]*)</h1>
The capturing group ([^<]*) its saying “Anything that is not a < zero to more times”
And then you should use the captured group with \1 or $1, (I do not know how it works on sublime)
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>\1</span> <!-- or $1, the one sublime text uses -->
</li>
</ol>
You can achieve it like this :
find using :
<h1 class="xyz">([^<>]*)</h1>
replace with :
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>$1</span>
</li>
</ol>
In the search field, you'll need to capture the text you want in a group with brackets :
<h1 class="xyz">([^<>]*)</h1>
And in the replace field, use the captured group with $1 like this :
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>$1</span>
</li>
</ol>
Hope it helps.
When I validate my html on w3 validator, I get the following error:
Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.).
The site is displaying properly (and the anchor is working) on my phone, tablet and desktop, and I don't really understand this error message. Can somebody tell me what I did wrong and how to do this properly?
Here's the part of the code that produces the error:
<section id="skills">
<div class="skills-header">
<p>Pozdravljen Svet! Pišem lahko:</p>
</div>
<div class="skills-container">
<ul>
<li>< html5 ></li>
<li> { css3 }</li>
<li>javascript.js</li>
<li class="break">$(jQuery)</li>
<li class="break"><%= rails 4 %></li>
<li class="break">< div class="bootstrap" ></li>
<li class="break">$ sudo apt-get update</li>
<li class="profile-icon ion-social-linkedin"></li>
<li class="profile-icon ion-social-github"></li>
</ul>
</div>
</section>
<ul> can only contain <li> elements. It's as simple as that really.
<ul> is an "Unordered List", and an <li> is a "List Item". A list should only contain list items...
You may find it is working in your browser, but you shouldn't keep it that way. Some browsers will auto-correct your error and wrap an <li> around your <a> elements, others will just make it look awful.
If you want to correct your code I suggest the following:
<li></li>
<li></li>
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.
I have the following HTML:
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
History
</li>
<li>
Contact
<ul>
<li>
Email
</li>
<li>
Phone
</li>
</ul>
</li>
</ul>
</li>
<li>
FAQ
</li>
</ul>
I want to be able to select nodes based on part of the a tag href using an XPATH expression.
I don't have the full href, only the last part.
So say I want to find the node that links to "History.aspx" I would use something like:
//#href()[. = 'History.aspx']
It looks like you want //a[contains(#href, 'History.aspx')] to get the entire anchor node. if you want just the href path, then //a[contains(#href, 'History.aspx')]/#href.
Hope that helps.