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

HTML & CSS
1

How come adding messes everything up?

And how would I fix it so it works?

Without DOCTYPE html> http://withoutdoctypehtml.blogspot.com/

With: DOCTYPE html> https://usingdoctypehtml.blogspot.com/

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
      <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title>
      <data:blog.pageTitle/>
    </title>
    <b:skin><![CDATA[
      
body {
background: #000000;
}

    ]]></b:skin>
  </head>
  <body>
    <b:section class='main' id='main' showaddelement='yes'/>
    <table align='center' height='100%'>
      <tr>
        <td valign='middle'>
          <table>
            <tr>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                ---------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
            </tr>
            <tr>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
            </tr>
            <tr>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
              <td style='color: #0059dd;line-height:1;font-size:30;font-weight:bold;padding: padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;'>
                --------
                <br/>
                <span style='color:#000000; display:inline-block; width: 300px; height: 24px;background-color:#E2AB58'>
                </span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
2

It should be the very first thing on the page, not on the second line.

3

This comes up then:

Error parsing XML, line 2, column 6: The processing instruction target matching “[xX][mM][lL]” is not allowed.

4

You should choose which you want.
HTML(5) or XHTML

5

How do I know which to use?

6

Is that a separate code, and where does that go?

7

If you are asking it probably doesn’t make much difference.

I like XHTML because it is more “strict” and it suits my feelings about how code should be.
But it is meant to allow “extensibility” more than to be only a stricter form of mark-up.
(something I doubt many actually took advantage of)
And it has some issues such as browser support, and the need to be served as XHTML and not “broken” HTML.
(something else I doubt many actually did correctly)

I like HTML(5) OK, but it feels “sloppy” to me. It has taken a while for me to get past the cringe reaction.

That said, it is widely supported now and it does have some useful features.

So I’d say even if you don’t need what HTML(5) offers over XHTML if you are starting out I think using it would be the better decision for you.

Here is my template in it’s current form.
The self-closing aren’t needed, nor the type, but meh.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Template</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
</style>
<script type="application/javascript">
// script needed before the DOM is loaded here
</script>
</head>
<body>
<h1>Template</h1>
<script type="application/javascript">
// script that needs the DOM to be loaded here
</script>
</body>
</html>
1 Like
8

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
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.