## A Tale of Two Documents

### XML Syntax ← DO THIS!
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>My Document</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>My Document</h1>
        <ul>
            <li>coffee</li>
            <li>tea</li>
        </ul>
        <img src="images/mug.jpg" alt="mug" />
    </body>
    </html>
| ### SGML/HTML Syntax (Not Preferred)
    <!DOCTYPE html>
    <HEAD>
        <TITLE>My Document</TITLE>
        <META CHARSET=utf-8 >
    <BODY>
        <H1>My Document</H1>
        <UL>
            <LI>coffee
            <LI>tea
        </UL>
        <IMG SRC=images/mug.jpg ALT=Mug >
Markup Document (XML syntax) Validate with Nu Html Checker | Markup Document (SGML/HTML syntax) Validate with Nu Html Checker

### Cleaner version of SGML/HTML Syntax

Again, XML syntax is preferred!

Of course, you can use the SGML/HTML syntax and write HTML that looks better. Just because the syntax allows you shorten things and leave out things, doesn't mean you have to.
Like this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>My Document</title>
        <meta charset="utf-8" >
    </head>
    <body>
        <h1>My Document</h1>
        <ul>
            <li>coffee
            <li>tea
        </ul>
        <img src="images/mug.jpg" alt="Mug" >
    </body>
    </html>

- Markup Document (SGML/HTML syntax)
- Validate with Nu Html Checker