I'm validating my website using the W3C HTML validation, and I'm getting errors for adding a line break in an ordered list.
E.g.:
<ol>
<li>Stuff</li><br/>
<li>Stuff2</li><br/>
</ol>
with successful validation would print
Stuff Stuff2
but it should be
Stuff
Stuff2
Without the line breaks it validates fine, but the list elements aren't on individual lines.
Is there a way that the site validates WHILE line breaking each stuff element?
I feel WOW on <br/> between <li>. <li> itself puts things in next line always..and you don't have anything in <ol> except <li>,
If you want some extra gap between <li>'s than use margin in CSS.
And how you say that:
with successful validation would print
Stuff Stuff2
This will not going to happen with <li> though.
You cannot have anything other than <li> inside a <ol> or <ul>. Something in your CSS may be messing up your lists.
Related
I'm just writing to inquire what would be more correct for xHTML and a CSS question.
For the HTML:
Say I have a list of:
Apples,
Bananas,
and Carrots
Would this be more correct:
<ul> <li> Apples </li> <li> Bananas </li> <li> Carrots </li> </ul>
Or would this be:
<ol> <li> Apples </li> <li> Bananas </li> <li> Carrots </li> </ol>
For CSS, after an element has been floated, which attribute can be used to restore flow to block alignment?
Thank you so much.
The ul element stands for "unordered list" which implies it was ordered to begin with (the proper English approach would be no for non-ordered). The ol element stands for "ordered list". Is this list intentionally ordered or not? If you order them alphabetically then I'd considered using the ul element since it's more of a technicality and not some life-or-death importance.
You can work with display and float together. Generally speaking you should look in to the CSS display property. As flexbox support has improved and the bugs have been ironed out I've migrated to using it and reserving float for neat tricks like applying it to an image nested within a bunch of paragraph elements.
Also something people who make six figures have no idea about: XHTML and HTML5 aren't opposed. My platform uses the XML parser while the code is HTML5. A parser takes text and determines how to interpret it for processing. The XML parser is very strict (though not perfectly strict and each browser engine varies, currently Gecko's has been superior) while the HTML parser doesn't mind if there are hobos all over your front lawn and will likely invite even more while it knows you're watching.
I was creating an un-ordered list and came to a point where I wanted to insert another list, that is, nest the lists. I'm using MS Expression Web (very good free tool) and it allows me to indent an <li> in the list by using the tab key. It puts another <ul> in and then puts in an <li> for the nested list.
However, when I switch to code view (which I use most of the time) the nested <ul> is flagged as not being allowed inside a <ul> by HTML 5.
If I view the page in FF, the nested list looks just as I would expect it to look. The bullets on the main list are black dots, the nested list is indented, and the bullets are circles.
If I change the <ul> tags to <ol> the nested list is numbered starting at zero.
So, I did a search to find out what tags can be included inside a <ul> or <ol> and came up with a lot of contradictory information - even here.
So, if HTML 5 does no allow almost any other tags inside a list (I've tried a lot of them to see what the parser says and they were flagged also such as <p>, <div>. etc.) - is there a tag with which I can create a classic outline with multiple levels?
Such as:
1 - Chapter One
a - Setting:
i - The City
ii - etc.
b - etc.
When I search on html outline -- I get references to the outline property to create outlines around elements - so there are borders and outlines??
Is there a "legal" way to produce an outline such as show above?
I can't believe there is no way of creating such an outline (legally)- I mean, outlines are a mainstay in documentation. Heck, table of contents are very often, if not just about always, nested outlines.
Is there a way to do it?
I have not found any way to create an outline except using nested lists.
I ran the following through a couple of validators and there were no errors or warnings.
So, I guess this answers my question.
<ul> <!--beginning of outer list -->
<li>
First line of outline, outer list
</li>
<li>
Second line of outline, outer list
<ul> <!--beginning of first nested list-->
<li>
First line of first nested list
</li>
<li>
Second line of 1st nested list
<ul> <!-- beginning 2nd nested list -->
<li>
First line of 2nd nested list
</li>
</ul> <!-- end of 2nd nested list -->
</li> <!-- end of list item in which 2nd nested list exists
</ul> <!-- end of 1st nested list-->
</li> <!-- end of of list item which contains 1st nested list -->
<li>
Third line of Outline, non nested
</li>
<ul> <!-- end outer list -->
Produces the following:
First line of outline, outer list
Second line of outline, outer list
First line of first nested list
Second line of 1st nested list
First line of 2nd nested list
Third line of Outline, non nested
According to the HTML5 Standard:
It is suggested that newlines be inserted after the DOCTYPE, after any comments that are before the root element, after the html element's start tag (if it is not omitted), and after any comments that are inside the html element but before the head element.
What is the reasoning behind this recomendation? Is there a difference between writing
<!DOCTYPE html>
<html>
<head>...
and
<!DOCTYPE html><html><head>...
?
It just helps improve readability, the code is processed exactly the same way.
There are some issues with parsing self-closing tags that can be a bit odd in certain situations.
For example, in HTML5 it is perfectly valid to write an unordered list like so:
<ul>
<li>Hello
<li>World
</ul>
The <li> tag implies </li><li> if there is no closing </li> present immediately before it. What's weird about this is the new lines in your code actually affect the way your list renders to the browser.
Unfortunately you cannot see this in jsfiddle, but you can see how the spacing issues affect a normally written list differently due to spacing, like this:
<ul>
<li>Hello</li><li>World</li>
</ul>
Differs from
<ul>
<li>Hello</li>
<li>World</li>
</ul>
Here's a little demo: http://jsfiddle.net/LGq9k/1/
I would imagine that the weird spacing oddities are the reason they suggest generally-accepted syntactical spacing and line breaks should be used, but who knows?
I am using the wonderful Slickmap template to start creating a tree for a friend but cannot work out how to have multiple lines of text within the same <li> tag. Basically the first 5 items should be within the same box and then the last two in separate boxes. I've tried all variants of <br> I can think of including adding a after the <br> but nothing seems to work. Is it possible and if so how?
<ul>
<li>Acceptance</br>
IPC-DRM-PTH</br>
IPC-A-610</br>
IPC-9191</br>
IPC-DRM-SMT</br>
Posters</br>
</li>
<li>Mission Statement</li>
<li>Principals</li>
</ul>
Example web page
The </br> should be <br>. Then you're fine.
The </li> means "close this li (list item) element". A br element does not need a closing tag. Since it cannot contain any content, it's closed implicitly. You may see <br/> sometimes though. This basically comes down to an br element that is immediately closed afterwards. Note the position of the forward slash.
See also HTML 5: Is it <br>, <br/>, or <br />?
So I'm trying to do a pretty simple contenteditable list with HTML that looks like this:
<article contenteditable="true">
<p>Text in doc</p>
<ol>
<li><p>Text in first LI</p><p>Has another para</p>
<ol>
<li><p>Text in nested LI</p></li>
<li><p>Text in nested LI2</p><p>And then some</p></li>
</ol>
</li>
<li><p>Text in second LI</p></li>
</ol>
</article>
In Webkit based browsers if you have a play around with it you find that it works pretty reasonably, inserting paragraphs when you hit enter, deleting list items if you hit backspace on them and things like that.
However if you try and delete the first item in the list (whilst there are still other things in the list), things get weird. You pretty much can't do it. And in fact what it does is move the text to the previous paragraph and leave you with an empty list item that you can no longer get to.
Maybe this is a defect in Webkit, but Firefox works the same way... In any case, can anyone suggest a workaround? I was thinking if I had some javascript that detected if it was the first character of the list then it would at least stop some of the unintuitive behaviour but you can still highlight across the item and hit del and still have an unreachable 1.
I have also tried making them divs and using the bleeding edge chrome, same behaviour.
See http://jsfiddle.net/2Unmz/14/ though it does act differently there than it does in my browser directly.
Despite it being the recommended method of nesting lists (http://developer.mozilla.org/en/HTML/Element/ol), it seems that you should end the list item before embedding another list inside it. This HTML works much more how I'd expect:
<p>Text in doc</p>
<ol>
<li><p>Text in first LI</p><p>Has another para</p></li><!-- Ending the LI now -->
<ol>
<li><p>Text in nested LI</p></li>
<li><p>Text in nested LI2</p><p>And then some</p></li>
</ol>
<!-- This is where it used to be -->
<li><p>Text in second LI</p></li>
</ol>
</article>
So looks like it's not a good idea to do nested lists as mozilla.org suggests if you want contentEditable to do logical things with your document.