Document Structure

Browsers are designed to recover from many common HTML authoring mistakes. They attempt to construct a usable document even when the markup is invalid or incomplete.

Example

<p>First paragraph
<p>Second paragraph

When parsing HTML, encountering a new p start tag in this situation causes the previous paragraph to be closed automatically by the parser.

However, browser recovery does not mean invalid markup is good practice. Different errors can produce unexpected DOM structures or inconsistent results.

Best Practices

Write valid and well-structured HTML.
Use elements according to their content models.
Close elements when their end tags are required.
Use an HTML validator to identify markup errors.
Inspect the DOM in browser developer tools when the rendered page differs from expectations.

14. HTML Comments

HTML comments allow developers to add notes to source code. Browsers do not display the comment text as normal page content.

<!-- This is an HTML comment -->
<h1>Welcome</h1>

Comments are useful for documenting sections of code, but they should not contain passwords, API secrets or other sensitive information. Source comments may be visible to users who can inspect the HTML.

15. Common Document Structure Mistakes

Omitting the HTML5 DOCTYPE.
Placing the title element inside body.
Putting visible page content inside head.
Forgetting to declare the appropriate character encoding.
Assuming viewport metadata alone makes a page responsive.
Using an incorrect language attribute.
Assuming the DOM must exactly match the HTML source.
Relying on browser error recovery instead of correcting invalid markup.
Using invalid nesting and expecting every browser to produce the intended result.

16. Practical Exercises

Exercise 1: Create a Complete Document

Create an HTML document containing DOCTYPE, html, head, title and body. Add a heading and two paragraphs.

Exercise 2: Inspect Standards Mode

Open your document in Chrome DevTools. Use the Console to inspect document.compatMode. A standards-mode document normally reports CSS1Compat.

console.log(document.compatMode);

Exercise 3: Inspect the DOM

Open DevTools, select the Elements panel and compare the displayed DOM with your original HTML source. Look for automatically inserted elements where applicable.

Exercise 4: Test Character Encoding

Create a page containing English and Odia text. Declare UTF-8, save the file with UTF-8 encoding and verify that the characters display correctly.