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?
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.
So I am just learning to HTML , as I wanted to become a web developer.
I used the <pre> tag for the proper alignment in my code.
But the alignment seems to come little fuzzy.
But the output of 3 and 4 i.e Reason to live and Happiness are not properly align with respect to the above quotes.
<p>For me you are:</p>
<pre>
1.Love
2.Life
3.Reason to Live
4.Happiness
</pre>
I've tested your code and it seems to line up fine, you could always put the content in a list like the below:
<ol>
<li>Love</li>
<li>Life</li>
<li>Reason to Live</li>
<li>Happiness</li>
</ol>
If this isn't what you need, please could you show us how it appears for you?
I have tested your code, it works fine
You can share how it appears in your machine.
What is the difference of
<ol class="specialClass">
<li>Hello World!</li>
</ol>
versus
<div class="specialClass">
<ol>
<li>Hello World!</li>
</ol>
</div>
I couldn't find an answer that explicitly answered this. I plan on experimenting and researching it further, but it'd be nice to get an answer to directly explain it (if possible) or a link to an explanation.
If you put anything else under the div tag, the formatting will apply to everything before the end tag. Whereas, with the ordered list, the formatting only applies to the list text/blocks.
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>
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