Create Your First HTML Document

What HTML does

HTML describes the meaning and structure of a document. A browser reads tags and creates a document tree. A heading says that text introduces a section; it does not mean “make this text large.” CSS controls presentation later. Start with the information a visitor needs and choose elements that describe it.

Read an element

In <p>Hello</p>, the opening tag begins a paragraph and the closing tag ends it. The text between them is content. Some elements contain other elements. Keep nesting deliberate: a paragraph can contain a link, but a heading should not be placed inside a paragraph. Indentation makes the structure easier for a person to inspect.

Build the page in order

The doctype requests modern HTML rendering. The html element declares the document language. The head contains metadata, including a readable browser-tab title and character encoding. The body contains the information people read. Use main for the primary content and give the page one descriptive h1. The h1 and browser-tab title have different jobs.

Try it and inspect it

Run the example in the HTML preview. Change the business name and the paragraph, then run again. The preview shows a document; it does not check whether the claims in your text are true. Open the page with styles disabled or read the source from top to bottom. Its information should still make sense.

Use it in real work

A service introduction, event announcement or documentation page starts with the same structure. Write a title that distinguishes this page from other pages. Add details a visitor can act on before adding decoration. Save a local .html file when you want to open the document outside this lesson.

Read the example

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Studio services</title></head>
<body><main><h1>Design for small teams</h1><p>Explore our services.</p></main></body>
</html>

Line-by-line explanation

1. lang="en" identifies the language.
2. title labels the browser tab.
3. main contains the primary content.
4. h1 names the page topic; p explains it.

Expected output

A heading reading “Design for small teams”, followed by a paragraph.

Common mistakes to avoid

• Using a heading solely to change text size
• Forgetting a meaningful document title
• Closing nested elements in the wrong order

Summary & next step

• Can you now recognize an element and its attributes?
• Can you now build a document with one clear main heading?
• Can you now explain the difference between content and presentation?

Complete the exercise and pass the knowledge check to complete this lesson. Guest progress stays on this browser and does not sync across devices.

Related BizAIPro tools