How come adding <!DOCTYPE html> messes everything up?

The <?xml version="1.0" encoding="UTF-8" ?> line is optional in XHTML5 and should be omitted as it doesn’t actually serve any purpose.

The <!DOCTYPE html> line should not be there in XHTML5 as it is only needed in HTML5 to set standards mode rather than quirks mode and XHTML5 only has standards mode so you don’t need a tag to set it.

HTML5 files should always start with <!DOCTYPE html> to ensure they use standards mode.

For HTML5 the MIME type used to serve the page needs to be text/html and for XHTML5 it needs to be application/xhtml+xml - that’s how the browser knows which of the two it is being given to display.

3 Likes