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
Related
Is the following W3C Compliant:
<div>
<h3>Heading</h3>
This is the text for this section.
</div>
Or does the text require a container element?
<div>
<h3>Heading</h3>
<p>This is the text for this section.</p>
</div>
The first example doesn't sit right with me, but a content editor asked me and I realized I don't really know if it's okay.
Both examples are valid.
Technically in the first one, the text is inside a container, the outer <div>.
Anyway it is perfectly valid to put text directly inside the <body>, which means the following HTML document will pass validation with no errors or warnings:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>Heading</h3>
This is the text for this section.
</body>
</html>
The more relevant question is whether it is semantically correct. To put it simply, paragraph text should be surronded by a <p> tag. More generally each type of content SHOULD be written inside the semantically relevant tag.
I will advise you to use the second approach.
When you use the correct Heading Tag it helps boost your page SEO wise.
Moreover, paragraph tag, P, helps some browser to render your page in “reading mode”.
Finally, a div is a block-displayed element. This CSS code looks a bit weird: div {color: blue}. But, p { color: red; } make more sense for a lot people.
Technically, both are conforming HTML (unless you validate it against the strict HTML4.x/XHTML1.x scheme which has no connection to reality anymore). Hovewer, the second approach would be probably more convenient from the styling/scripting perspective, where it's always better to have a possibility to address any piece of content directly. The first example has an implicit paragraph, and explicit is usually better than implicit.
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">
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).
I would like to go to the DIV of a particular page from a different page. Is that possible?
I tried Hello
but it just goes to file.html#home
thanks
C.
I have in my file.html but it keeps getting redirected to file.html#home instead.
file.html will need an element with an id="product" attribute. name is deprecated for <a> tags and shouldn't be used.
<div id="product"></div>
With HTML 5, you need to simply add an id attribute to your <div> with a value of product. This needs to be a unique id attribute within the page (for all elements):
<div id="product">
See the working draft.
In HTML 4.01 you need to use an anchor tag with a name just above your target div, or any other element with an id attribute in the other page:
<a name="product"></a>
<div>...
See the HTML 4.01 spec.
Note: The name attribute has been deprecated in the XHTML 1.0 spec.
So, this would be a better option, as it would work for HTML 4.01, XHTML 1.0 and HTML 5:
<div id="product">
Don't use an anchor. That is outdated. Just give the DIV the id product:
<div id="product">...</div>
div is a block element and span is an inline element so according to xhtml 1.0 validation it is not right but still several websites uses this method for styling is it all right ? or it will cause some problem please help me ?
It is not right + You never need to do this => thus never should.
Websites that do that wont be 'strict xhtml compliant' but in reality HTML like this will work just fine in any modern browser. That doesn't mean you should do it though - because theres no need to.
As of today 11th March 2014, modern browsers WILL give you problem as they render block element differently from inline element.
I encountered this incident myself, read my experience and solution: http://diophung.blogspot.sg/2014/03/web-developer-conform-to-w3c-standards.html
It's wrong, and embarrassing for not knowing such standard (your web designers will laugh at you) !
Nesting div within span may cause serious problem in firefox when you need to get the offsetTop(offsetLeft) of the span.
However this performs normal in chrome(v57.0.2987.98).
so I agree with the answer of Konerak:
"the browser will try to interpet it in their own
(unspecified/unpredictable) way. It might work out fine, it might
break. It might work now, break later. "
It all depends on the browser itself.
The specification about the offsetTop/offsetLeft is here:
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop
The following is my testing code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="margin:100px">
<span id="span-divWrapper">
<div id="div-nestedInSpan" style="border:1px solid black;">I am the div nested in span</div>
</span>
</div>
<button onclick="showDivOffsetTop()">show div offsetTop</button>
<button onclick="showSpanOffsetTop()">show span offsetTop</button>
<script type="text/javascript">
var div = document.getElementById("div-nestedInSpan");
var span = document.getElementById("span-divWrapper");
var showDivOffsetTop = function(){
alert(div.offsetTop);
}
var showSpanOffsetTop = function(){
alert(span.offsetTop);
}
</script>
</body>
</html>