So far we changed content inside a page. Now place it in a complete plain-text file with a .html extension:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book club home</title>
</head>
<body>
<h1>Welcome to our book club</h1>
<p>We meet every Saturday.</p>
</body>
</html>The outer structure
<!DOCTYPE html> is a document type declaration. It requests modern HTML standards mode. It is not a body element and has no closing tag. The html element is the root: the other elements belong inside it.
lang="en" identifies English as the main language. Use zh-CN for simplified Chinese. This helps tools such as screen readers choose a pronunciation. It does not translate the text or set its encoding.
Document information and visible content
head contains information about the document. meta is a void element. Its charset="UTF-8" declares the character encoding; your editor should also save the actual file as UTF-8. Keep this declaration early in head.
The title element sets the document title, typically used by browser tabs and bookmarks. This is different from the title attribute in the previous lesson: here title is an element with its own contents and closing tag.
body contains visible page content, including h1 and p. A title element does not create a heading inside the page. Keep one head and one body in your beginner documents, both directly inside html.
Change one thing at a time
Edit title in the Lab and inspect the tab-title display above the preview. Next, change only h1 and inspect the white page. These two texts can differ. Copy the complete source into index.html, save and open it locally. Indentation makes nesting easier to read; it does not determine page layout.
Later short code blocks may show only content to place inside body. Labs and reference solutions supply complete documents for copying and running.
Page experiment: HTML document structure
Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.
The tab display uses title; the large page heading comes from h1. Edit each separately.
The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.
KNOWLEDGE QUIZ
Build it yourself: HTML document structure
Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.
- Create a complete English document with doctype, html, head, body and a UTF-8 declaration.
- Set title to “My learning log”, h1 to “Day one”, and add a paragraph about learning.