Here's the complete source of an HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
one<br>
two<br />
three<br></br>
four
</body>
</html>
Can anyone explain why an extra blank line appears between the "three" and the "four" when I view the page in IE8 or chrome?
I thought standards were supposed to make all browsers look the same and as far as I can see this page conforms to the XHTML transitional standard
Because the XHTML spec HTML Compatability Guidelines specify that br must should be self closing. Apparently Chrome and IE8 are not follwing the spec and closing the open one for you, thus creating a second line break.
Some good answers already, but just to point out that HTML5 actually specifies that <br></br> should be parsed as two <br> start tags when parsing as text/html.
See An end tag whose tag name is "br" in http://dev.w3.org/html5/spec/tokenization.html#parsing-main-inbody
Firefox 3.x only does this in quirks mode, but Firefox 4 does this in Standards mode as well.
Although valid, this is highly unusual code. What is much more likely is developers mistakenly using <br> or </br> when they mean <br/>. For this reason most browsers will interpret both as <br/>.
The extra line between three and four is because there are two <br /> tags between them. The first one moves content onto the next line and the second one moves it one more line down. This is expected behaviour.
Edit Sorry, thought it was strict for the following.
Also, <br /> tags are empty tags and so, must be closed. Because of this, I don't think that <br> is technically xhtml compliant. It should be <br />.
I.E appears to interpret and both as "link break" and adds a like break for each.
In XHTML — they are the same — and if you serve the document as application/xhtml+xml there will be no difference in browsers (assuming the browser supports XHTML, which IE 8 and lower do not).
If you serve the document as text/html, it will be treated as HTML, not XHTML, and in HTML <br> is an element where the end tag is forbidden. If you include an explicit end tag then some browsers will error correct to assume that </br> is a <br> start tag.
There are various additional rules that must be followed if you are claiming your XHTML is text/html. These are described in the compatibility guidelines. This particular one is for elements that can never have content.
Serving as text/html was a hack intended to be a short term measure during the transition to XHTML proper. Various things (including lack of support from Microsoft) prevented this transition from ever finishing, and the HTML 5 movement has given up on the idea and moved back to optional and forbidden end tags (but adding in /> as syntactic sugar).
Related
I'm working on some oracle code to generate an HTML eMail. It's mostly working, but I took the resulting HTML and placed it in Dreamweaver CS6 to use the validation. I get a few errors:
1) No Character encoding declared at document level [HTML 4.01]
2) element "U" undefined [HTML 4.01]
The html code is generated automatically by a rich text editor widget. Should I use something other than HTML 4.01? I'm not too savvy with HTML Header code.
Here's the HTML code that is generated from my test.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saint Susanna Parish Mailing</title>
</head>
<body>
<p>This is normal text</p>
<p>
<strong>This is bold</strong>
</p>
<p>
<u>This is Underscored</u>
</p>
<ol>
<li>
<span style="color:#ff0000;">This is numbered</span>
</li>
</ol>
<ul>
<li>This is bulleted</li>
</ul>
<p style="text-align: center;">This is centered</p>
<p>
<span style="font-size:18px;"><span style="font-family: times new roman,times,serif;">This is a new font</span></span>
</p>
<p style="text-align: right;">This is right justified</p>
<p> </p>
</body>
</html>
Thanks for looking at this.
I think the encoding can -and must- be specified in the mail headers, so I would ignore that warning.
The article The Importance of Content-Type Character Encoding in HTML Emails says:
[The client] will display the email based on what Content-Type has been set.
However, email clients read the Content-Type value that is set in the
email header and they completely ignore the META tag that is within
the HTML.
So that suggests that you should add the proper header, and can safely ignore the validator's warning, although it can't hurt at all to add the meta tag as well.
If you want a second opinion, you can try the W3C Markup Validation Service, although that one might also complain about missing content types. After all, these validators don't know what headers you are going to supply.
Different rules apply to HTML mail anyway. Clients ignore basically everything that is outside of the body. They also filter out all kinds of attributes, won't allow JavaScript and fully ignore external stylesheets and inline style tags.
The <u> tag was deprecated in HTML 4.01 but not obsolete. In that case the validator seems to be wrong, so I would ignore that warning as well. I wouldn't underline text at all though, because obviously that text could easily be mistaken for a link. If you need to, and you don't want to use <u>, you can use an inline text-decoration style.
Some suggestions:
U can do a lot of control by using classes etc - declared in a style.css file that u call first as well.
<!DOCTYPE HTML> - HTML 5
<b> and </b> can replace strong to save characters
<link rel="stylesheet" type="text/css" href="../style.css" title="Standard Style">
Is it necessary to close an img tag?
<img src="" alt="" />
versus
<img src="" alt"">
I'm purely wondering as someone learning HTML who has never learned the proper way, but has seen both methods used. I tend to use the first i.e. close all my tags.
In XHTML, all elements must be closed. In HTML, some (like <img>) are optional.
(X)HTML5 has both syntaxes: HTML and XHTML. Then, it's your choice if you use HTML5 or XHTML5.
If you doubt, you can always use W3C Validator to check if your code is valid.
You don't need the "/" at the end . This is W3 standard for tags in HTML5. If using XHTML, you should close it.
I don't see why you would ever intentionally exclude the closing slash. It makes the tag more readable and your HTML will pass a lot more validators.
However, if you're 4.01 strict, it doesn't look to be required: http://www.w3.org/TR/REC-html40/struct/objects#h-13.2
Is it possible to have two or more iframes ?
I put two empty "iframe" tags with display:none style.
But i can see only one.
if i'm commenting one in source code, then i can see another one...
<iframe id="ab" style="display: none;" />
<iframe id="cd" style="display: none;" />
and in inspector (chrome) i can see only one ;(
btw, they are both direct body childs.
Instead of using the “self-closing” syntax (/ before the >), use end tags for the iframe elements, i.e. </iframe>.
Markup like <iframe id="ab" style="display: none;" /> is in principle conforming in XML, hence in XHTML, and gets interpreted properly by modern browsers when in XHTML mode (for documents served as XHTML). In HTML mode, they see the “self-closing” tags just as start tags, so the result is a mess (and it’s even surprising that anything gets displayed).
I encountered this page https://www.google.com/accounts/ServiceLogin, a Google service login page that (beyond just omitting a doctype), contains 6 instances of </img>
For example,
<img src="https://www.google.com/accounts/google_transparent.gif"
alt="Google">
</img>
Why would they ever do that? What benefit/functionality/grandfathering do they possibly achieve?
Anything I've ever read about HTML and XHTML has made it pretty unequovical:
In HTML 4.01 and prior, <img> tags are never to be closed ( <img src="img.gif" alt="text" >).
In XHTML, <img> tags are to be closed using self-closing syntax ( <img src='img.gif' alt="text" />)
In HTML5, (my understanding is that) either syntax (open or self-closed) is acceptable, but still never </img>.
I'd say this is a bug. In at least one case it seems to be just producing totally invalid code:
<img class=logo
src='https://www.google.com/intl/en/images/logos/accounts_logo.gif'
alt="Google" />
</img>
You can see the img tag is self closing and being closed by a separate closing tag. Clearly unintended. And its inconsistent which is a little weird too. I'd suggest e-mailing them and asking. :)
I've found the only (proposed) way this code is ever actually compliant, though it does not apply in Google's case (since they lack a DOCTYPE).
XHTML 2, which was proposed and then scrapped, implements a </img> tag as a way to replace the alt attribute.
So, instead of this in XHTML 1.0/1.1:
<img src="monkeys.gif" alt="Monkeys throwing feces" />
You'd have this
<img src="monkeys.gif">Monkeys throwing feces</img>
Where 'Monkeys throwing feces' only displays if monkeys.gif fails to load.
This would make <img> behave as other content embedding tags, like <object>.
In the spec's words,
The img element is a holder for
embedding attributes such as src.
Since these attributes may be applied
to any element, the img element is not
strictly necessary, but is included to
ease the transition to XHTML2. Like
the object element, this element's
content is only presented if the
referenced resource is unavailable.
Maybe their HTML-generator closes every <tag> with a corresponding </tag>, which is just a programmatically lazier alternative to writing <tag/> for such single tags.
Ran into a problem on my web page where the footer in the master page wasn't displaying correctly for one particular page. On that page, I had a
<div style="clear:both" /> at the bottom.
After banging my head at it for a while, I saw that all I needed to change to get the footer to show up properly was to change that line to:
<div style="clear:both"></div>
I don't understand why writing it this way should produce a different result. Aren't they semantically equivalent? I checked and double-checked that this was the only change I made. Flipping back and forth between the two would change the behavior of the footer.
So my question is... are those not equivalent? What's the difference between them?
Edit: The odd part is, they both do what I want to the stuff above them in the page. I mean, in the self-closing div tag's case, if I remove it entirely the page definitely reacts, so it must be doing SOMETHING with it and not just ignoring it completely.
<div /> is not a valid markup. A self-closing tag is not permitted.
You need to use the full version <div></div>.
A self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.
According to the HTML 4.01 spec, section 7.5.4 ("Grouping elements: the DIV and SPAN elements):
Start tag: required, End tag: required
So a self-closing <div> tag (like the first example you specified: <div />) is not valid.
If I remember right - <div /> is invalid. Use <div></div> if you want it to work everywhere. The closing tag is required, so doing things like <div class="Clear" /> won't work.
All grouping elements will behave the same way. You'll see the same behavior with both DIV and SPAN.
EDIT: Found this link while looking at the link in the answer posted by #Donut - its a matrix that shows which elements have an optional closing tag requirement (among other things.) Looked interesting, so I thought I'd post it here to share with everyone else as well.
It depends on the DOCTYPE that you're using.
For XHTML, which is XML, the two tags are equivalent. You would signal this to the browser by including one of the following DOCTYPEs as the first line in your page:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
For HTML 4.01, which is what all (?) browsers assume when there's no DOCTYPE, certain tags must be expressed as open-close. Most of the block-level tags require this, including such non-markup tags as <SCRIPT>. If you look at the WDG HTML documentation, you'll see whether a particular tag requires open-close or can be expressed as an empty tag, via the "syntax" item:
Syntax <DIV>...</DIV>
self terminating tags are valid in XML, but not in this case for HTML
The first option is not valid html; the second is. <div /> really confuses IE, so always go for <div><div/>.
You would not be able to put content in a "<div />".
<div /> is valid depending upon your DOCTYPE It's valid XHTML Transitional & XHTML Strict
DEMO: http://wecodesign.com/demos/stackoverflow-1411182.htm
VALIDATION: http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
If you want to use a single tag and not have a useless empty <div> on the page, try using a <br /> for your clears.
<style type="text/css">
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
line-height: 0 !important;
font-size: 0 !important;
}
</style>
<br class="clear-fix" />
Some may question my usage of !important here; however, this is the reason why it exists! We know that when we clear something, we want it to do a specific task no matter what.
Take for example:
<style type="text/css">
.hidden {display: none;}
#foo {display: block;}
</style>
<p id="foo" class="hidden">You can still see me</p>
In this particular case, you would add !important to your hidden class, because it's pretty clear that it's supposed to hide stuff no matter what