2.1 Elements, Tags, Attributes, Values, Void Elements, and Nesting
Prerequisites
Complete Module 1 before beginning this lesson. You should be able to open a project folder in VS Code, edit and save index.html, run the supplied local-server command, open the page in a browser, and inspect the current document with Developer Tools.
Lesson 1.6 gave you a complete HTML document to copy. You were not expected to understand every line at that stage. This lesson begins the careful explanation of HTML syntax. Syntax means the rules for writing a language so that its parts can be identified and interpreted correctly.
Starting files
Create a new folder named html-foundations. Inside it, create index.html and style.css.
html-foundations/
├── index.html
└── style.css
Place this complete starting document in index.html. Most of its outer structure comes from Lesson 1.6. Lessons 2.3–2.5 will explain that outer structure in detail.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community Skills Day</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Place this complete supplied stylesheet in style.css.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #1f2933;
background-color: #f3f6f8;
}
.page {
max-width: 720px;
margin: 0 auto;
padding: 24px;
}
.intro {
font-size: 20px;
}
section {
margin-top: 24px;
}
hr {
margin: 32px 0;
border: 0;
border-top: 1px solid #9aa8b4;
}
This is the same kind of guided CSS used in Lesson 1.6. It gives the page a readable line length, spacing, colours, and a visible divider. You do not need to understand its formal syntax yet, and it is not assessed in this lesson.
1. Begin with one complete element
Add this line between the body start and end tags in index.html:
<h1>Community Skills Day</h1>
The complete piece is an HTML element. It gives a part of the document structure and meaning. In this case, the h1 element represents the main heading.
The element is written with three visible source parts:
<h1> Community Skills Day </h1>
start tag content end tag
<h1> is the start tag. It marks where the element begins. </h1> is the end tag. It marks where the element ends. The forward slash after the opening angle bracket distinguishes an end tag from a start tag.
The words Community Skills Day are the element’s content. Content can be text. Depending on the kind of element, content can also include other elements.
An element and a tag are related, but they are not identical. A tag is source syntax such as <h1> or </h1>. The element is the complete structured unit represented by those tags and their content. Calling the complete line a “tag” hides this useful difference.
2. Add a paragraph with an attribute
Place this paragraph immediately after the heading:
<p class=”intro”>Learn practical skills, meet people, and share what you know.</p>
The p element represents a paragraph. It has a start tag, text content, and an end tag. Its start tag also contains an attribute:
class=”intro”
An attribute gives extra information or a setting to an element. The attribute name is class. Its value is intro. The equals sign connects the name to its value, and the quotation marks show where the value begins and ends.
Attributes belong inside the start tag, after the element name. They do not belong in the end tag. A space separates the element name from its first attribute. If a start tag has several attributes, spaces separate those attributes from one another.
In this example, the class value gives the paragraph a reusable name that the supplied stylesheet can select. The class name does not change the paragraph by itself. The CSS rule named .intro makes this particular paragraph slightly larger.
HTML sometimes permits unquoted attribute values, but quoted values are easier for beginners to read and safer when a value contains spaces or certain symbols. This course uses lowercase attribute names and double quotation marks consistently unless a later lesson has a reason to demonstrate another valid form.
3. Put elements inside another element
The heading and paragraph belong to the same page. Add a main element around them:
<main class="page">
<h1>Community Skills Day</h1>
<p class="intro">Learn practical skills, meet people, and share what you know.</p>
</main>
When one element is placed completely inside another element, the elements are nested. Here, the h1 and p elements are inside main. The main element is their parent in the document tree, and the heading and paragraph are its children. Parent and child relationships were introduced when you learned about the Document Object Model, or DOM, in Lesson 1.3.
Correct nesting means that an inner element must end before its outer element ends. The following structure is correct:
<main>
<p>Welcome to the event.</p>
</main>
The paragraph begins after main begins, and it ends before main ends. The elements are completely inside one another.
The next structure is wrong because the elements overlap:
<main>
<p>Welcome to the event.
</main>
</p>
The browser will try to repair incorrect markup when it builds the DOM. That repair does not make the source correct. Different mistakes can produce unexpected relationships, so the author must write correctly nested source and validate it.
4. Create two nested sections
Add the following elements inside main, after the introductory paragraph:
<section>
<h2>What happens during the day</h2>
<p>Short sessions cover cooking, basic repairs, digital safety, and creative activities.</p>
</section>
<section>
<h2>Time and access</h2>
<p>The event runs from 10:00 to 15:00. Entry is free, and step-free access is available.</p>
</section>
Each section element contains one h2 heading and one paragraph. The two sections are separate children of main; neither section is inside the other.
This example also shows that nesting is not chosen only to create a visual shape. The structure records relationships. Each h2 belongs to the section that contains it. Module 3 will teach the detailed meaning and correct selection of headings, sections, paragraphs, and other semantic elements. For now, concentrate on recognising their boundaries.
5. Add a void element
Place this line between the two sections:
<hr>
The hr element marks a thematic break, which means a change between related groups of content. Its detailed semantic use is taught in Lesson 3.1. Here, it also demonstrates a special syntax category.
hr is a void element. A void element has only a start tag in HTML. It cannot contain text or another element, and it must not have an end tag. Write <hr>, not <hr></hr>.
You may see <hr /> in some code. In HTML, the final slash does not make the element self-closing and has no useful effect on a void element. Self-closing tags do not exist for ordinary HTML elements. The course therefore uses the simpler HTML form <hr>.
Do not write a normal element as if it were self-closing. For example, <section /> does not safely mean an empty, closed section in HTML. A normal section element requires an end tag: <section></section>.
Other void elements include meta, link, img, and input. You have already copied meta and link elements in the document template. Their purposes and attributes are taught in later lessons. Do not try to memorise the full list now. The important rule is to check an element’s definition instead of guessing whether it can contain content.
Complete solution
Your complete index.html should now contain:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community Skills Day</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page">
<h1>Community Skills Day</h1>
<p class="intro">Learn practical skills, meet people, and share what you know.</p>
<section>
<h2>What happens during the day</h2>
<p>Short sessions cover cooking, basic repairs, digital safety, and creative activities.</p>
</section>
<hr>
<section>
<h2>Time and access</h2>
<p>The event runs from 10:00 to 15:00. Entry is free, and step-free access is available.</p>
</section>
</main>
</body>
</html>
Your complete style.css remains:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #1f2933;
background-color: #f3f6f8;
}
.page {
max-width: 720px;
margin: 0 auto;
padding: 24px;
}
.intro {
font-size: 20px;
}
section {
margin-top: 24px;
}
hr {
margin: 32px 0;
border: 0;
border-top: 1px solid #9aa8b4;
}
No new CSS is assessed. The important new HTML lines are the content inside body. main contains the page’s main subject. The class=”page” attribute connects it to the supplied layout rule. The h1 and introductory p are children of main. Each section contains its own heading and paragraph. The void hr element sits between the sections and has no content or end tag.
Inspect the result
Save both files and start the local server by following Lesson 1.6. Open the page in your browser. Right-click the first section heading and choose Inspect.
In the Elements panel, find the main element. Expand it if necessary. You should see the heading, paragraph, two sections, and hr as children of main. Expand one section and confirm that its h2 and p are children of that section.
Developer Tools shows the DOM created by the browser. It can help you understand nesting, but it is not a replacement for checking your saved source. If the browser repaired an error, the DOM may not match the structure you intended to write.
Browser support and fallback information
Elements, tags, attributes, void elements, and nesting are fundamental parts of HTML and are handled by current HTML browsers. This lesson uses no experimental feature and needs no feature fallback.
Browser error recovery is not a fallback strategy. A browser may display something after receiving incorrect markup, but the repaired DOM can differ from the source. Write conforming HTML and use validation instead of depending on repair behaviour.
Accessibility and responsive requirements
Correct syntax helps browsers and assistive technologies receive a predictable structure, but valid syntax alone does not make a page accessible. The element must also match the meaning of its content. Module 3 will teach those choices in detail.
The supplied CSS uses a maximum width instead of a forced fixed width. Check the page in a narrow browser window and at 200% zoom. All text should remain available without horizontal scrolling. Do not add fixed heights or spaces to force the layout.
Common mistakes and debugging process
A missing angle bracket can prevent the browser from recognising a tag. A missing slash can turn an intended end tag into another start tag. An attribute placed outside the start tag will not belong to the element. A missing quotation mark can cause later source text to be interpreted as part of the attribute value. Incorrectly ordered end tags create overlapping rather than nested elements. A void element must not receive content or an end tag.
If the result is wrong, use this process:
- Save index.html, then reload the browser page.
- Find the first place where the visible result differs from the expected result.
- Inspect that area and compare the DOM relationship with your saved source.
- Check the nearest start and end tags as a pair.
- Confirm that attribute values have opening and closing quotation marks.
- Confirm that every inner normal element ends before its parent ends.
- Confirm that <hr> has no content and no end tag.
- Validate the complete HTML using the method introduced in Lesson 1.6.
- Correct one confirmed problem, save, reload, and check again.
Do not change several unrelated lines at once. One careful correction makes it easier to know what solved the problem.
Independent exercise
Add a third section after the second section. Its heading must say What to bring. Its paragraph must say Bring a notebook if you want to record ideas. All activity materials are provided.
Give the paragraph the attribute class=”note”. Do not add new CSS for that class. The exercise is about correct element and attribute syntax, not appearance.
Before checking the solution, confirm that the third section is a child of main, the heading and paragraph are children of the new section, and every normal element closes in the reverse order from which it opened.
Tested exercise solution
Add this code after the second section and before the main end tag:
<section>
<h2>What to bring</h2>
<p class="note">Bring a notebook if you want to record ideas. All activity materials are provided.</p>
</section>
The section begins first, so it ends last. The heading and paragraph each begin and end entirely inside the section. The class attribute is inside the paragraph’s start tag, and its value is enclosed in quotation marks.
The complete lesson solution and this exercise solution passed an automated HTML syntax check on 10 August 2026. A visual browser, screen-reader, assistive-technology, forced-colour, and physical-device test was not performed. Use the manual checks in this lesson on your own browser.
Completion checklist
- You can distinguish an element from its start and end tags.
- You can identify text content inside a normal element.
- You can write a quoted attribute value inside a start tag.
- You can explain why <hr> has no end tag.
- You can nest child elements completely inside a parent.
- You checked the saved source, the browser result, and the DOM structure.
- You completed and checked the independent exercise.