Is it ok to use <li> tags without parent tags?
i.e.
<li> some copy
or must it be..
<ul> (substitute your favorite list type)
<li> some copy
</ul>
Links on the subject:
Spec
XHTML
Validator
If by OK you mean "correct, follows standards and will validate" then no. Per the spec, only OL and UL can contain LI. (MENU and DIR are deprecated)
If by OK you mean "will render" then yes.
Also, to be "OK" by the first definition, you must also close your LI tags. Every tag must either be self-closing (/>) or have a corresponding closing tag. Here's a quick and simple explanation of correct XHTML (and honestly, good HTML should conform to these as well. No reason not to.)
Proper HTML (not to mention strict XHTML) should be:
<ul>
<li>whatever</li>
</ul>
No, using a li element without a parent ul or ol element would be invalid.
No, that would definitely be invalid (X)HTML. I mean, you could, and the browser might render it correctly if you're lucky (IE in particular, as it tends to be especially lenient), but there's far from any guarantee. You should always enclose <li> tags with either <ul> (unordered list) or <ol> (ordered list). Why wouldn't you want to anyway?
No, while it might work in some browsers, it is invalid HTML.
I checked the validation of the code below at Markup Validation Service of W3C :
<li>item 1</li>
<li>item 2</li>
and the result is :
document type does not allow element
"LI" here; missing one of "UL", "OL",
"DIR", "MENU" start-tag
li = list item, if it's without parents where's the list?
http://www.w3schools.com/TAGS/tag_li.asp
http://www.w3.org/TR/html401/struct/lists.html
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.
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?
As it's valid markup, I have done the following;
<div class="list">
Link 1
Link 2
</div>
My question is, does it have to be written as this;
<ul class="list">
<li>Login to Broker Site</li>
<li>Register</li>
</ul>
what are the + and - of doing one than the other? And are these both correct according to semantic web?
Thanks.
It totally depends on the greater context, but seeing as it seems to be a navigational sub-menu, a ul is indeed the most semantically correct element to use.
The clue is in the class name you chose.
As you see it as a list then use a list. This is a lot more semantic and is helpful for screen readers, which will then treat the contents as a list of links.
This is probably a rookie question, but I need to know what I need to know :)
Why do some HTML tags end with a forward slash?
For example this:
<meta name="keywords" content="bla bla bla" />
What's that last forward slash for? What happens if I remove it?
Also some other tags have this as well... I have removed some without anything happening.
In XHTML <foo /> is shorthand for <foo></foo>. In HTML the syntax is obscure and marked as "don't do this" as browsers don't support it.
If you are writing XHTML but pretending it is HTML (so that browsers (such as Internet Explorer 8) which don't support XHTML can handle it), then elements defined as EMPTY in the specification must be represented that way (and elements which are not must not).
HTML 5 became a recommendation five years after this answer was written and changes the rules.
In the early days of HTML, it wasn't uncommon to find code like the following:
<ul>
<li>item 1
<li>Item 2
<li>Item 3
</ul>
The problem with this approach is that it lead to HTML that was very tedious to parse because it was often difficult to understand the intent. As such, developers that parsed HTML had to rely on some [often] unreliable assumptions.
To alleviate this problem, the standards committee mandated that XHTML be well formed. As such, all tags were required to have both a start tag and an end tag, replacing the above HTML with the following:
<ul>
<li>item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
This worked well for tags that contained inner text or child elements, but it didn't work well for tags that stood alone (e.g., the <br> tag). To overcome this issue, while complying with the rule stating that all tags must have a corresponding closing tag, the standards committee sided with a trailing forward slash (e.g., <br />). It should be noted, however, in XHTML, the following is also legal: <br></br>.
that's the xhtml syntax for an element that doesn't have a closing tag
In XHTML syntax, <tag /> is equivalent to <tag></tag>
So, according the W3C spec, the 'start' attribute in an ordered list is deprecated.
If you want to continue a list that's been broken up by a series of heading, you might have:
<ol start="15">
But that would not be allowed. The questions is how else could you/would you do it other than that which works in current browsers? Mission impossible?
The start attribute may be deprecated for HTML4.01, but it has returned for HTML5. Is there a browser compatibility issue?
EDIT: SitePoint says no. So the only real issue is validation. You can use HTML 4.01 Transitional, or HTML5, but not Strict, if you're really concerned about validation.
Otherwise, you're stuck with having the other lines in the HTML and hiding them.
<style type="text/css">.hidden { display: none }</style>
<ol>
<li class="hidden"></li>
<li class="hidden"></li>
<li class="hidden"></li>
<li class="hidden"></li>
<li>Starting at 5</li>
</ol>
You can do it with CSS counters, but they are not supported in all browsers. The start attribute is your best bet after all.