Is there anything wrong with writing parts of a webpage in XHTML with an HTML doctype?

Question

I've just recently started learning HTML/CSS and I've been trying to teach myself sound web programming practices. I'm familiar with XML, so coding up webpages in XHTML was intuitive enough and it just seemed like a sound thing to do. However, I've been reading articles like this one and now I'm ambivalent.

My concerns with coding in either HTML and XHTML stem from the following:

1. img tags do not need to be closed in HTML, and that makes sense to me. But in XHTML, img tags require a close tag which seems kind of funky. I just think it's weird to have a pair of open and close tags with nothing in between.
2. p tags (as in paragraph) do not need to be closed in HTML, and that is funky to me. It makes sense to section off a paragraph between open and close tags as you would in XHTML.

These are the only basic examples I can come up with at the moment, but I'm hoping that they at least show how split I am between HTML and XHTML. So here's my actual question: Is it okay to throw in XHTML code (when I feel that it appropriately clarifies something) when I'm coding up a webpage that should be in HTML (with an HTML DTD)? I'm sure the website would look the same, but if people were to look at my source, would they think I were a terribly unprofessional coder?

Also, I've been sort of blindly looking through tutorials and guides via Google on sound web programming practices and I was wondering if you folks had any advice/resources to share with me. I really want to make sure I'm learning how to do this the right way. I would really appreciate it.

Thanks for reading!

Edit: Wow, such fast responses; you guys are awesome! So I understand that web browsers are going to be pretty lenient when it comes to this sort of stuff. My problem is then a question of vanity and how other professionals feel about writing a sort of mix of XHTML and HTML. Is strictly compliant code the way to go? I honestly just don't want to look like an idiot, haha.

Answer 1

img tags do not need to be closed in HTML, and that makes sense to me.

No tag needs to be closed. All elements need to be closed.

Most elements consist of a start tag, some content, and an end tag.

Since an image element cannot have content, the end tag is not needed. In HTML, elements which cannot have content ("EMPTY elements") have the end tags forbidden.

But in XHTML, img tags require a close tag which seems kind of funky.

XHTML is an XML application rather than an SGML application, and XML doesn't have all the features that SGML does — including the ability to specify that an end tag is forbidden.

I just think it's weird to have a pair of open and close tags with nothing in between.

XML introduces a new kind of tag — a self-closing tag (<foo />) which acts as a start and end tag combined.

If you are writing HTML-Compatible XHTML (which you should be if you choose to use XHTML and want to support browsers which don't support that language — such as Internet Explorer), then you should use that syntax. (I prefer to stick to HTML myself)

p tags (as in paragraph) do not need to be closed in HTML, and that is funky to me.

Many elements in HTML have optional end tags. This allows the end tag to be omitted when it can be implied.

For example:

<p>Hello, world
<p>A second paragraph

Since a p element cannot contain another p element, you can imply (with 100% reliability) that starting a new paragraph will close the previous one.

That said, they are optional, not forbidden. You can write HTML 4.01 with explicit end tags for any element which isn't intrinsically empty.

Is it okay to throw in XHTML code (when I feel that it appropriately clarifies something) when I'm coding up a webpage that should be in HTML (with an HTML DTD)? I'm sure the website would look the same, but if people were to look at my source, would they think I were a terribly unprofessional coder?

It would look unprofessional.

That said, there are only three times when XHTML syntax is not conforming HTML syntax:

Empty elements — such as <img> and <br> need to be explicitly closed in XHTML … but you said you didn't like that syntax.

Scripts and styles — you need to use character references or CDATA markers if you use certain characters in your embedded JS and CSS in XHTML, but these elements are marked as CDATA in the DTD for HTML, so this would be wrong there … but you shouldn't use embedded scripts or styles anyway.

Namespaces — but there is no time when using an XML namespace in the middle of an HTML document would come close to clarifying something.

Answer 2

HTML 5 allows for the use of XHTML syntax.

You can start using an HTML 5 doctype now which will push all browsers into standards mode, but be aware that new features of HTML 5 are only supported in some browsers.

From the Web Hypertext Application Technology Working Group:

Should I close empty elements with /> or >?

Void elements in HTML (e.g. the br, img and input elements) do not require a trailing slash. e.g. Instead of writing <br />, you only need to write <br>. This is the same as in HTML 4.01. However, due to the widespread attempts to use XHTML 1.0, there are a significant number of pages using the trailing slash. Because of this, the trailing slash syntax has been permitted on void elements in HTML in order to ease migration from XHTML 1.0 to HTML5.

The marvellously simple HTML 5 doctype looks like this:

<!DOCTYPE html>

So yes, you can write standards compliant HTML with self closing tags and it will validate against an HTML 5 validator. The industry has widely chosen to adopt HTML5 over XHTML2, and consequently I wouldn't recommend using XHTML for any new projects.

---

Edit: Just as a point of clarification, it is safe to use the HTML 5 doctype now, and it is also safe to assume that HTML 5 will be widely adopted over XHTML 2 given industry support. You can certainly author HTML 5 documents now, however many of the features of HTML5, such as <canvas> (notably lacking support from MS given that it competes with Silverlight) do not have cross browser support and are subject to change.

Answer 3

It is 'okay' in the sense that almost every browser will render it correctly, but only because they're built to handle malformed HTML/XHTML/XML/whatever. However, any element(s) not matching the declared doctype (in your case, the HTML DTD) will prevent your code from validating, and it is, technically, malformed.

On the other hand, the vast majority of websites (even ones that render correctly) do not validate, so it's not a huge issue. I would stick to (strict) XHTML; note jimr's comment concerning self-closing tags (e.g. <img src="foo" />).

Answer 4

No, it's not okay. In theory, at least. If you write XHTML syntax in a HTML document, it's invalid. Browsers will most likely render it the same way, but it's still invalid. Plus, the only thing valid in XHTML and invalid in HTML is a self-closing tag (<br />). Just beacuse in HTML you're not required to close tags, doesn't mean you can't close them. You can write markup like this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at enim sit amet urna placerat porttitor ut quis justo. Quisque posuere nisl ac libero dictum posuere. Suspendisse in magna neque. Donec et vestibulum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nulla dui.</p>

<img src="" alt="">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at enim sit amet urna placerat porttitor ut quis justo.</p>

See? It's valid HTML, and looks good.

BTW: read this.

Answer 5

<DOCTYPE> is a leave-over from SGML and should only appear once, at the top of the document. Adding other DOCTYPE declarations within the document would be a violation of both HTML and XHTML--though most browsers would probably forgive you.

If you must use both in a page, perhaps placing the nested document into an IFRAME would be more consistent with standards since IFRAMEs by definition house a separate window/document context.