Write a page with HTML elements

Course

Level 1 · Web Introduction

Module

HTML foundations

Expected effort

60–100 minutes

Estimate assumptions: You can open a folder in VS Code and a local HTML file in a current version of Edge, Chrome, or Firefox. The estimate includes reading, writing the page, checking it in the browser, and correcting likely errors. Optional extension work is not included.

Outcome

You will write a complete HTML document and use common elements to add a heading, paragraphs, a list, and a link.

Why this matters

HTML gives a web page its content and structure. A clear model of tags, elements, attributes, and nesting makes later work with semantic HTML, CSS, and JavaScript easier to inspect and debug.

What you will practice

• Distinguish an opening tag, a closing tag, and a complete HTML element.
• Explain the purpose of the html, head, title, meta, and body elements.
• Use headings, paragraphs, lists, and links for their intended content.
• Write nested elements with valid closing-tag order and readable indentation.

What is new and what is reused

• New: HTML tags, elements, attributes, nesting, void elements, and the structure of an HTML document.
• Reused: Opening a folder in VS Code, creating and saving a file, opening a local file in a browser, and reloading a page.

Starting point

Before you start

• VS Code and a current version of Edge, Chrome, or Firefox.
• Permission to create a new folder and file on your computer.
• No starter files are required.

Current state

You have an empty folder. The folder does not contain a web page yet.

First action

Create a folder named html-elements, open that folder in VS Code, and create a file named index.html.

First checkpoint

VS Code shows index.html in the Explorer, and the empty file is open in the editor.

Help trigger

Ask for help if VS Code does not show the folder, the file name ends in .txt, or the browser displays the HTML code as text instead of rendering a page.

Required result

You have completed the lesson when:

• index.html contains a complete HTML document;
• the browser tab shows the title HTML elements;
• the page contains one main heading, a paragraph, a second-level heading, a list, and a descriptive link;
• every element that requires a closing tag has one; and
• reloading the browser shows your latest saved change.

Read one HTML element

Start with this paragraph:

<p>HTML describes the content of a web page.</p>

The code contains three parts:

Part	Code	Purpose
Opening tag	<p>	Starts the paragraph element
Content	HTML describes the content of a web page.	Supplies the text in the paragraph
Closing tag	</p>	Ends the paragraph element

The opening tag, content, and closing tag together form the element. A tag is the markup between angle brackets, such as <p> or </p>.

Most elements use this pattern:

<element-name>Content</element-name>

The / makes the second tag a closing tag. The opening and closing tags must use the same element name.

Some elements do not have a closing tag

A void element cannot contain text or another element, so it does not use a closing tag. The document in the next section uses the void element <meta charset="utf-8">.

Create the HTML document

An HTML file needs a document structure around its visible content. Add this code to index.html:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML elements</title>
  </head>
  <body>
  </body>
</html>

Each part has a specific role:

• <!doctype html> tells the browser to render the document in standards mode. It is a declaration, not an HTML element.
• <html> is the root element. It contains the complete HTML document.
• lang="en" states that the page content is in English.
• <head> contains document information that the browser and other tools use.
• <meta charset="utf-8"> lets the document use UTF-8 text characters.
• <title> sets the text shown in the browser tab.
• <body> contains the content shown in the browser window.

The lang and charset values are attributes. An attribute adds information to an element. Write attributes in the opening tag as a name and a quoted value:

<element-name attribute-name="value">Content</element-name>

Open the document in a browser

1. Save index.html in VS Code.
2. Open the html-elements folder in File Explorer.
3. Open index.html in Edge, Chrome, or Firefox.
4. Find HTML elements in the browser tab.

The page area is empty because the body element does not contain visible content yet. An empty page area is the expected result at this point.

If it does not work

• If the tab does not show HTML elements, save the file and reload the browser.
• If the browser shows the code as text, confirm that the file is named index.html, not index.html.txt.
• If the browser reports that it cannot find the file, open index.html again from the folder where VS Code saved it.

Checkpoint: The document structure works

What now works

The browser opens index.html and shows HTML elements in the tab. The page area is empty.

Files changed

index.html

What remains

Add visible content inside the body element.

Next action

Return to VS Code and place the cursor between the opening and closing body tags.

If it does not work

Check the file name, save the file, and confirm that title is inside head.

Add visible content

Replace the empty body element with this code:

index.html — body element

<body>
  <h1>My first HTML page</h1>
  <p>I am learning how HTML elements describe content.</p>

  <h2>Topics on this page</h2>
  <ul>
    <li>Headings</li>
    <li>Paragraphs</li>
    <li>Lists</li>
    <li>Links</li>
  </ul>

  <p>Visit <a href="https://example.com">Example Domain</a>.</p>
</body>

Save the file and reload the page in the browser. The page now shows text, a bulleted list, and a link.

The example uses these common elements:

Element	Use it for
<h1>	The main heading that identifies the page topic
<h2>	A heading for a section inside the page topic
<p>	A paragraph of text
<ul>	An unordered list in which sequence does not matter
<ol>	An ordered list in which sequence does matter
<li>	One item inside a ul or ol element
<a>	A link to another location; its href attribute contains the destination
<strong>	Text with strong importance
<em>	Text with stress emphasis

Choose an element for the role of its content, not for its default appearance. CSS will control the appearance in a later module.

Use headings in order. The h1 identifies the page topic, and the h2 identifies a section within that topic. Do not select a heading level because its default text size looks suitable.

Use link text that identifies the destination. Example Domain is more useful than click here because the link still makes sense when read without the surrounding sentence.

Check

Confirm all of these results in the browser:

1. The main heading appears before the first paragraph.
2. The four list items have bullet markers.
3. The Example Domain link opens https://example.com.
4. Changing one list item in VS Code, saving the file, and reloading the browser shows the new text.

If it does not work

• If a change does not appear, save index.html and reload the browser tab.
• If content appears outside the expected order, compare each opening tag with its closing tag.
• If the list has no list items, confirm that each li element is inside the ul element.
• If the link does not open the destination, confirm that href is inside the opening a tag and that its value is quoted.

Nest elements in a clear order

The ul element contains four li elements. The last p element contains an a element. An element inside another element is a nested element.

Indent nested elements by two spaces so the document structure is easier to inspect. Indentation does not create the relationship. The opening and closing tags create it.

Close a nested element before you close the element that contains it:

Valid nesting

<p>Visit <a href="https://example.com">Example Domain</a>.</p>

Do not overlap the element boundaries:

Invalid nesting

<p>Visit <a href="https://example.com">Example Domain</p></a>.

The browser can try to repair invalid HTML, but its repaired structure might not match the structure you intended. Write valid nesting so browsers, assistive technologies, CSS, and JavaScript can use the same predictable document structure.

Checkpoint: The page contains structured content

What now works

The page shows headings, paragraphs, a four-item list, and a working descriptive link.

Files changed

index.html

What remains

Verify the complete document and connect the source code to the browser result.

Next action

Complete the self-check, then explain one element from its opening tag to its closing tag.

If it does not work

Match each opening tag with its closing tag, then check that nested elements close from the inside out.

Self-check

Complete these checks against the required result.

1. Point to one opening tag, its content, its closing tag, and the complete element in index.html.
2. Explain why meta does not have a closing tag in this document.
3. Identify the attribute name and value in the link element.
4. Confirm that all visible content is inside body and the browser-tab title is inside head.
5. Change the main heading, save the file, reload the page, and confirm that the browser shows the change.
6. Confirm that the heading order moves from h1 to h2 without skipping a level.

How the browser uses the HTML

The HTML file is the source document. When the browser opens the file, it reads the tags, attributes, and text. The browser then creates a document structure from the elements and renders the visible content.

The browser does not show the tags as page content. It uses the tags to identify each element’s role and boundaries. This is why the source contains <h1>My first HTML page</h1>, while the page displays the heading text without the tags.

The next lesson builds on this model. It introduces elements that identify larger regions of a page, such as the main content and navigation.

Optional practice with more content elements

The required lesson is complete before these tasks. Choose any task that helps you test the element model.

Add an ordered list

Add an h2 heading named Steps I used, followed by an ol element. Add at least three li elements that describe how you created and opened the page. Confirm that the browser numbers the items.

Mark importance and emphasis

Add one paragraph that contains a strong element and an em element. Use strong for text with strong importance and em for stress emphasis. Do not choose them only for their default bold or italic appearance.

Inspect one element

Right-click the main heading in the browser and select Inspect. In the Elements or Inspector panel, find the h1 element and its text. Edit the heading in VS Code, reload the page, and confirm that the inspected element updates.

Next step or safe stopping point

The required lesson is complete when the browser renders the full document and you can identify tags, elements, attributes, and nesting in index.html.

Continue to Build a page with semantic HTML to organize a page with elements that identify its major regions.

If you stop here, leave yourself this resume note: Next action: open the semantic HTML lesson and identify which elements describe the page header, navigation, main content, and footer.