HTML empty DIVs not well rendered by browsers - html

I receive XHTML documents that sometimes contain the following code:
<div align="center" />
My problem is that browsers (Firefox 38.0.1, Chrome 43.0.2357.65) display this code as an opening <DIV> tag and not, as I expected, as an empty div (<DIV></DIV>). The rest of the document is, therefore, completely messed up.
Is it a browser bug or an XHTML feature? The code looks perfectly legal (although meaningless, but I am not the producer) and is accepted by XML parsers (Perl XML::LibXML, https://validator.w3.org/check).
You can check what it looks like in your browser with the following XHTML code (validated by https://validator.w3.org). The last DIV is displayed as bordered text, which it shouldn't.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Foo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="border: 1px solid black; color: red;">
<div />
<div>Should be red and inside the border.</div>
</div>
<div>Should be outside the border and not red.</div>
</body>
</html>
It is the same with an XHTML Strict Doctype.

The solution is, don't do this!
In HTML, a <div> tag is a start tag, no matter if it contains a / or not. The / is viewed as an error and is discarded.
In XHTML, this would be a complete div, yes. However, XHTML files are only XHTML files if they are served up with the application/xhtml+xml MIME type.
It does not matter what the contents of the file are; if the file is served up with a MIME type of text/html, it's a HTML file as far as the browser is concerned.
Plain files with a file name extension of .xhtml are treated as XHTML, .html is treated as HTML. If you are using systems like PHP or ASP.NET etc, you will need to send the appropriate HTTP header for the MIME type, otherwise it will use the default (usually text/html).

Related

Del tag work incorrect with self closed paragraph

In the following html code del tag strikethrough next tag:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<div>
<del><p /></del>
<strong>Why is this text marked strikethrough?</strong>
</div>
</body>
</html>
How to fix this issue?
Fix1: this issue occured locally with the .html files. Rename file to .xhtml fix this issue.
Fix2: on the server side possible to return correct content-type from webserver.
You are serving your XHTML document as text/html so browsers will parse it according to HTML parsing rules.
The / in <p /> will be treated as an error and discarded, and further error recovery will put the strong element inside the paragraph.
You need to serve the XHTML with a application/xhtml+xml content-type HTTP response header for browsers to parse it properly.
XHTML is more-or-less dead, especially for use client-side in browsers. Write HTML 5 instead.

XHTML 1.0 Strict - div align="center" still working?

I'm playing around with the doctypes to find the best one for me. I'm thinking about to use XHTML 1.0 strict, because it shouldn't accept the deprecated elements and attributes.
To test the behaviour, I created an html page with the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div align="center">
Some Text
</div>
</body>
</html>
When I open this with Firefox the div has 100% width (which is ok) and it's text is aligned to center (which is not ok, the align attribute isn't supposed to work anymore).
Can someone explain why this is happening? Am I doing something wrong or are some deprecated attributes still accepted in strict mode?
Doctype switching triggered Standards Mode has nothing to do with enforcing lack of support for deprecated/removed attributes. Most of the effects it has are on disabling the emulation of bugs (such as incorrect handing of width and assuming integer values are pixel values) in CSS support.
Use a validator to detect when you are using a deprecated HTML feature.

Is it OK to use a self closing DIV tag? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are self-closing tags valid in HTML5?
For example:
<div id="myDiv" />
Something would then be done to populate this div using Javascript.
Is this valid HTML?
No. HTML 4.x doesn't have any concept of self closing tags.
It is valid in XHTML.
Div's are not valid self closing tags. To have an empty div it would be better to do this:
<div id="myDiv"></div>
According to the XML declaration and the XHTML 1.0 and 1.1 document definitions, this is fine: the null-end tag (>) may be used when immediately following the null-end start tag closer (/), and your code is equivalent to <div id="myDiv"></div>.
It's a different matter entirely whether any particular consumer will be able to process this correctly.
The SGML declaration used by HTML 4.01 allows tag shortening, but it has a different syntax for the null-end tags; there you can write <div id="abc"/this is a non-empty div/. Again, mileage may vary as for browser support. (My money is on "none".)
Future versions of HTML (HTML5? if that name is still alive) are no longer implemented as SGML languages, and therefore they simply allow what they say they do, without recourse to a formal grammar.
I ran these two blocks of code through the W3C validator. Copy and paste the code into the input under the Validate by Direct Input tab to see the results for yourself.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" >
</head>
<body><div id="Mydiv" /></body>
</html>
The code block with Doctype of transitional HTML 4.01 failed the validation process.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body><div id="Mydiv" /></body>
</html>
When I added the XHTML 1.0 transitional doctype, changed the meta tag to a self closing tag, and added in the html xmlns line, the validation passed.
So to answer the first half of your question, it is valid HTML under the XHTML 1.0 Transitional doctype. Whether or not you can use javascript to properly populate it, I am not sure.
Self Closing Tags in XHTML as implemented by browsers:
What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
Self Closing tags in html5:
Are (non-void) self-closing tags valid in HTML5?
No, it's valid XML (not HTML), and as far as I know, will only be accepted if the document is send with an application/xml mimetype.
However, it may work with XHTML, and the XHTML Doctype declaration.

DOCTYPE tag problem

is it possible to use DOCTYPE tag in line 2 or 3 or ... and css works good ? (not line 1)
tag :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Yes. As long as it comes before your <html> tag, you should be fine. This might happen, for instance, if you put an XML declaration above it. The xml declaration, however, must occur at the very beginning of the file.
Example:
<?xml version='1.0' charset='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>This is an example</title>
</head>
<body>
<h1>This is an example</h1>
<p>
You might even put an xml stylesheet declaration up above your
DTD declaration, which would look like this:
<code><?xml-stylesheet type="text/xsl" href="transform.xsl"?></code>
</p>
<p>But you still can't put any HTML above your DOCTYPE. Sorry.</p>
</body>
</html>
Seems like you are very persistent about doing strange things with your doctype. It's best you always use it AND put it on the first line of your document. If you go arround the web you'll find that almost every website has it like that.
Is there a reason why you don't want to do so?
IE6 will fall into quirks mode if you put anything (including an XML declaration) before the Doctype. So - "no".
Most browsers will fall into quirks mode (AFAIK) if any content appears before it. Don't use hosts who prevent you from using valid markup.
by standards, the DOCTYPE should be the first line. why would you not want to put it there anyways?

Non-standard tag behavior in Opera

I'm working with a publishing system that uses custom tags. These are interpreted on the server. The problem is, that they cause big problems with Opera, when viewed locally (custom tags are not interpreted).
Opera is handling these tags differently from other browser. It looks like it is closing the tag at the end of the document (even if the tag contains closing slash). I'm just wondering, if such behavior is considered bug or feature.
Also, if you have any idea how to hack such code so that I can debug HTML+CSS for Opera locally (without interpreted custom tags), please let me know. Thank you.
Try the folowing code to see it in action (live example):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Non-standard tag behavior in Opera</title>
<style type="text/css" media="all">
div { background: yellow; padding: 1em; }
nonstandardtag { border: 1px solid red; }
</style>
</head>
<body>
<div>
<nonstandardtag>content of non-standard tag</nonstandardtag>
main tag content
</div>
<div>
<nonstandardtag />
main tag content
</div>
</body>
</html>
I use opera for more than 5 years. It is the browser that approaches the standard the best. Most of the sites that look bad in Opera are "optimized" for IE.
But an obvious question is, why do you need to use nonstandard tags? You can use the div and span tags for almost any nonstandard solution.
Short: it's not a bug. Despite the DOCTYPE, your page is not interpreted as XHTML (and this is intentional).
HTML simply doesn't support the self-closing tag syntax the same way as XML.
In HTML, in practice <foo /> is the same as <foo> or <foo /="">. In theory it's same as <foo></foo>>.
You need to tell browser to interpret page as X[HT]ML. DOCTYPE is not enough. To do this locally, file has to have .xml or .xhtml extension. When you serve file over HTTP, you must set Content-Type header to application/xhtml+xml or similar XML type (for static files usually .xhtml file extension does the job).
Your live example is served as text/html, so it won't be interpreted as XHTML, and won't work as you expect.
BTW: XHTML doesn't allow non-standard elements. If you want to add your own elements anyway, you should at least use your own namespace.
This seems to be fixed in Opera 10. So I guess it was not a feature.
One, you don't need non-standard elements. Two, whatever you claim with your doctype, this isn't XHTML but HTML (as you make clear with the <meta http-equiv="Content-Type" content="text/html…. That obviously means that browsers use their HTML parsers, and those don't (and shouldn't) support XML's shorthand syntax <element/> for empty elements.
Short answer: there are no guarentees or requirements on what a User Agent may do if you feed it malformed data.