Difference in display between HTML and XHTML - html

I thought XHTML documents were supposed to be displayed with exactly the same standards compliance mode as "strict" HTML documents.
However, there is a difference in how they display pre elements: in HTML documents, if the <pre> start tag is followed by a LF (or CRLF), this is ignored. Not so in XHTML.
Example: a HTML file and a XHTML file that have the same content, but are rendered differently.
(Or if you think it's cheating to give a HTML file and a XHTML file exactly the same content, including DOCTYPE, here are two files that follow more classic rules: HTML 4.01 strict and XHTML 1.0 strict.)
So, does that mean that statements like this W3C page's
all line breaks and spaces are rendered exactly as they appear in the HTML. The exception is a newline immediately after the start tag <pre> and immediately before the end tag </pre>, which are discarded.
are only valid for HTML, not for XHTML? I haven't found any indication that XHTML can display things differently if it likes. But all the browsers I've tested do.

The removal of the starting newline is nothing to do with the rendering in HTML, and Dave Raggett's page is just a little imprecise and getting a little out of date. The removal of the starting newline is a property of the HTML parser.
In the in body tree construction phase the HTML5 spec for the text/html mime type says:
A start tag whose tag name is one of: "pre", "listing"
If the stack of open elements has a p element in button scope, then close a p element.
Insert an HTML element for the token.
If the next token is a "LF" (U+000A) character token, then ignore that token and
move on to the next one. (Newlines at the start of pre
blocks are ignored as an authoring convenience.)
Set the frameset-ok flag to "not ok".
An XML parser is simply not allowed to do this by the XML parsing rules, so XHTML does not drop that new line.

Related

Can SVG foreignObject s be HTML5

Must SVG foreignObject contain only XML? That seems to be my reading of the spec, so is it required to put XHTML inside, if I wish to use foreignObject? Or can I just copy my regular HTML5 syntaxed code inside?
The contents of any document must reflect the mime type it's served as.
If you serve the document as image/svg+xml then the whole document must be valid XML including any foreignObject child elements which basically limits you to XHTML. XML fails on error so if you paste in HTML you'll likely just get a syntax error printed than have anything rendered.
If you serve the document as text/html then the whole document is HTML and any SVG in it would be parsed with an HTML parser, no namespaces required etc. Any foreignObject elements in such SVG will be parsed as if they were standard HTML. HTML attempts to render what it can of invalid documents.

Can't find the source of the gap at the top of my website. Double Checked all my tags

My html and body have margins and padding of 0. all my top level elements have the same.
I don't want to hack it with positon.. any tips? (ps I hacked the position up 33px. just in the meantime until i could find a solution that's less hacky.)
http://dextressband.com/landingpage.php
Right after your <title> tag, and in a few other places, you have this little problem:
This entity encodes U+FEFF, which is Unicode BOM. The entity is treated as text, and while it's completely invisible, it still reserves vertical space for itself before your div with main site content.
This usually means something is using a wrong encoding (UTF-8 with BOM where UTF-8 without BOM is expected) - since it's PHP, I'd start with locating the place where those sections of the site is rendered. If it's rendering the site from a file, check that the file is saved as UTF-8 without BOM in your favorite text editor.
Your html is invalid. Be sure the html is not producing this kind of "view source" in Firefox or other browsers that color code errors like this.
UPDATE
Okay, this will sound crazy, but you have a non-printable character in your head that is causing output to start. Follow these directions carefully:
Put your cursor to the right of the "link" in your first stylesheet declaration (where i've put the asterisk...like this:)
Now use your backspace (or delete if you are on a Mac) and delete until you remove the HEAD tag so that the following tag is gone too
Now type and hit enter and type
try loading your page again, because the demononic, non-printing character will be gone now and your html again valid.
btw, for fun
here is a picture of your non-printable character in my ViM session
Your html is missing an html element but you have an html 4.01 strict doctype
You have iframes but an html 4.01 strict doctype.

HTML Validation

My website is almost ready but I notice that my website shows in Firefox and IE look different and in chrome is fine. I have used HTML Validation to check and have 2 errors and 2 warnings. This is the details :
Line 2, Column 13: there is no attribute "XMLNS"
<html xmlns="http://www.w3.org/1999/xhtml">
✉
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the element to incorporate flash media in a Web page, see the FAQ item on valid flash.
Line 4, Column 76: NET-enabling start-tag requires SHORTTAG YES
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
✉
For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.
This warning and related errors may also be caused by an unquoted attribute value containing one or more "/". Example: http://w3c.org>W3C. In such cases, the solution is to put quotation marks around the value.
Line 4, Column 77: character data is not allowed here
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
✉
You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include:
putting text directly in the body of the document without wrapping it in a container element (such as a aragraph), or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes), or using XHTML-style self-closing tags (such as ) in HTML 4.01 or earlier. To fix, remove the extra slash ('/') character. For more information about the reasons for this, see Empty elements in SGML, HTML, XML, and XHTML.
Line 44, Column 12: NET-enabling start-tag requires SHORTTAG YES
<br/>
✉
For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.
This warning and related errors may also be caused by an unquoted attribute value containing one or more "/". Example: http://w3c.org>W3C. In such cases, the solution is to put quotation marks around the value.
As for Line 2, Column 13, I have added in this under header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
However, this error is still there and I really do not know how to tidy it. On top of that, I am not a programmer and very poor in HTML....
Thank you.
You are trying to validate a document with some XHTML features as HTML 4. You are not showing the first line of the HTML document, and this would be all-important. In general, you should show a complete HTML document that reproduces the issue. But in this case, the apparent reason is wrong DOCTYPE. You should replace the existing HTML 4 DOCTYPE by one that declares some version of XHTML 1.0, if XHTML 1.0 is what you are trying to use.

One W3C validation errors I really want to correct

This would be my first website and I do not want to leave it these errors. Can someone please help me with these ones?
Error 1:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
error: character "&" is the first character of a delimiter but occurred as data.
WHEN i &, then my AJAX code stops working
I have no clue how to correct this one.
Error 2:
…ems"><a href="brushdescription.php?id=<?php echo $popularbrushesrow['bd_brushi…
error: character "<" is the first character of a delimiter but occurred as data
Again the same error but for < this time
UPDATE:
I am using this doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< and & are some of the predefined entities in XML, which need escaping when validating the page as XML or XHTML.
< should be replaced with < (less than)
& should be replaced with & (ampersand)
However, if using these characters in JavaScript you can (instead) enclose the script in a <![CDATA[]]> section, which instructs the parser to not interpret the code as markup and will also not result in a validation error.
Try wrapping your Javascript with <![CDATA[]]> tags like so:
<script>
//<![CDATA[
// Javascript goes here.
//]]>
</script>
Also, you should look into separation of concerns. Try to move your logic out of you view. If your Javascript is in your HTML page, try to include it from a separate file.
From Wikipedia:
HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS) are complementary languages used in the development of webpages and websites. HTML is mainly used for organization of webpage content, CSS is used for definition of content presentation style, and JS defines how the content interacts and behaves with the user. Historically, this was not the case though. Prior to the introduction of CSS, HTML performed both duties of defining semantics and style.
Use HTML, not XHTML (or, if you insist on using XHTML, see the guidelines on how to write XHTML that can be parsed as HTML).
I can't see how you could have generated that error. Some more context would be useful.
For the first error, consider switching from XHTML to HTML5. There's really little reason to use XHTML. Use this:
<!DOCTYPE html>
The W3C validator is for client-side code, but it seems you are trying to validate server-side code, hence the PHP tag. Send the rendered code for validation and the second error will go away. The rendered code is the one visible in the browser under "View source". You can supply the URL if it's already online somewhere.
By XML rules, “The ampersand character (&) and the left angle bracket (<) MUST NOT appear in their literal form, except when used as markup delimiters, or within a comment, a processing instruction, or a CDATA section. If they are needed elsewhere, they MUST be escaped using either numeric character references or the strings " & " and " < " respectively.” So “&&” is to be written as &&.
However, this is such works only when the document is processed as “real XHTML” due to having been sent with an XML content type, e.g. with the HTTP header Content-Type: application/xhtml+xml. Doing so implies that old versions of IE will choke on it and modern browsers will refuse to render the document at all if it contains any well-formedness error. People don’t normally do that – they just use XHTML because someone told them to do so, and their documents are sent with an HTML document type, which means among other things that script element content is processed differently. This explains why a fix that satisfies the validator makes the page break.
In the XHTML 1.0 specification, the (in)famous appendix C says: “Use external scripts if your script uses < or & or ]]> or --.” This is the simple cure if you need to use XHTML. Just put your script in an external file and “call” it with <script src="foo.js"></script>.

Why JSPX does not like empty elements?

this <div id="adiv"></div> will in JSPX somehow be translated into <div id="adiv" />. The way I got it to work is to add empty comments inside like <div id="adiv"><!-- --></div>. I dont understand why this is happening and is there a better to solve this issue?
That's by JSP specification:
JSP.6.2.3 Semantic Model
...
To clearly explain the processing of whitespace, we follow the structure of the
XSLT specification. The first step in processing a JSP document is to identify the
nodes of the document. Then, all textual nodes that have only white space are
dropped from the document; the only exception are nodes in a jsp:text element,
which are kept verbatim. The resulting nodes are interpreted as described in the
following sections. Template data is either passed directly to the response or it is
mediated through (standard or custom) actions.
In theory, it should not harm if you use a XHTML doctype to present the document in the client side instead of a HTML doctype. However, even the XHTML spec requires some elements to be not self-closing. Another workaround would be using <jsp:text /> instead of a comment.
<div id="adiv"><jsp:text /></div>
JSP(X) is however an old view technology. Its successor, Facelets, does a better job in this.
See also:
JSP Document/JSPX: what determines how tabs/space/linebreaks are removed in the output?
Why don't self-closing script tags work?