Creating Your First HTML File

Your first HTML file needs an HTML doctype, a document root, a head with a title, and a body with visible content. Copy the example into a file named index.html and open it in a browser.

What You Need to Know

The title appears in the browser tab; the heading and paragraph appear on the page. This difference helps you understand why the head and body have separate jobs.

The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.

Example: See It in Action

Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My First Page</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>I made this page myself.</p>
    </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.
• A meta element gives the browser short information about the document. Different attributes control different hints.
• Lang tells tools which language the text uses, helping pronunciation and language-aware features.
• Charset tells the browser how to decode the page text; UTF-8 is the usual choice.

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 “My First Page”. The page itself shows “Hello, world!” as a heading; those two labels are allowed to be different.

Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.

Try It Yourself

1. Change both the tab title and the big heading, save, and refresh the browser.
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

• Saving the file as index.html.txt and wondering why it opens as plain text.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• Your first HTML file needs an HTML doctype, a document root, a head with a title, and a body with visible content.
• The html element holds the complete page and usually names its language.
• The title appears in the browser tab; the heading and paragraph appear on the page. This difference helps you understand why the head and body have separate jobs.