HTML Style Guide and XHTML

What Is It?

A consistent style makes HTML easier to read. XHTML is a stricter XML way of writing HTML; beginners can use normal HTML.

What the Tags Mean

• <!DOCTYPE html>: modern HTML declaration.
• Lowercase tags: a useful writing habit.
• Quoted attributes: easier to read.
• Void tags: tags such as br and input have no closing tag in HTML.

Example 1

Save each example as index.html and open it in your browser. Each code block is a complete page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Style Guide and XHTML</title>
 
</head>
<body>
<p class="note">Use lowercase names and quoted values.</p>
<br>
<input type="text" aria-label="Short note">
</body>
</html>

What you see: This is ordinary HTML. The input and br do not need closing tags.

Example 2: Another Use

Indent nested elements so you can see what belongs inside what.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Style Guide and XHTML</title>
 
</head>
<body>
<section>
  <h2>My notes</h2>
  <p>Keep the code tidy.</p>
</section>
</body>
</html>

Simple Tip

Writing <div /> does not close a div in normal HTML. Write <div></div>.

Try It Yourself

Indent a small page so its structure is easy to follow.