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 >

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>