HTML HTML Fundamentals Practice: Explain an Existing Source File

Reading someone else's HTML is a powerful skill. Start from the doctype and head, find the main heading, and then trace the nested sections from top to bottom. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.

What You Need to Know

Check what each attribute changes, and identify which files the page references. Learn to distinguish source order from layout added by CSS.

Try solving the task before checking the example. It is fine to make mistakes: each browser refresh gives you another chance to see what the markup actually does.

Example: See It in Action

Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.

<!doctype html>
<html lang="en">
    <head><title>Read This Source</title>
    </head>
    <body>
        <main>
            <h1>School News</h1>
            <p>Friday update</p>
        </main>
    </body>
</html>

Let’s Understand the Example

• The html element holds the complete page and usually names its language.
• The head contains useful page information for the browser, such as its title and character encoding.
• The title names the page in the browser tab. It is different from the heading shown on the page.
• Lang tells tools which language the text uses, helping pronunciation and language-aware features.

Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.

What Should You See?

The browser tab should show “Read This Source”. The page itself shows “School News” as a heading; those two labels are allowed to be different.

Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.

Try It Yourself

1. Explain the example to a friend without using the words tag or element incorrectly.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Reading a page purely from left to right without noticing which elements contain others.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• Reading someone else's HTML is a powerful skill.
• The html element holds the complete page and usually names its language.
• Check what each attribute changes, and identify which files the page references. Learn to distinguish source order from layout added by CSS.