Lesson 2 of 5 15 min read
HTML structure and semantic elements
Write a well-structured HTML document using headings, links, images, lists and semantic layout elements.
In this lesson you will
- Write the skeleton of an HTML document
- Use common elements such as headings, paragraphs, links, images and lists correctly
- Choose semantic elements like header, nav, main, section and footer for page structure
Elements, tags and attributes
HTML (HyperText Markup Language) marks up content with elements. Most elements have an opening tag, content and a closing tag:
<p>This is a paragraph.</p>
<a href="https://developer.mozilla.org">MDN Web Docs</a>
<img src="team.jpg" alt="Five students reviewing code together"><p>is the opening tag and</p>the closing tag.href,srcandaltare attributes: extra information written inside the opening tag asname="value".- Some elements, such as
<img>, are void elements: they have no content and no closing tag.
The document skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Page</title>
</head>
<body>
<h1>Hello, web!</h1>
<p>I am learning HTML.</p>
</body>
</html>html (contains head (contains meta charset, meta viewport, title), body (contains h1, p))
<!DOCTYPE html>tells the browser to use modern HTML.<head>holds information about the page: the character set, the title shown in the browser tab and the viewport setting that makes pages display correctly on phones.<body>holds everything visible on the page.
Headings and text
Use <h1> to <h6> for headings, in order. A page should have one <h1> describing its main topic, with <h2> for sections and <h3> for subsections. Screen readers and search engines use this outline to understand the page.
<h1>DevCrest Free Learning</h1>
<h2>Web Development Basics</h2>
<p>Learn <strong>HTML</strong>, CSS and JavaScript step by step.</p>Lists
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Write the HTML</li>
<li>Add the CSS</li>
<li>Add the JavaScript</li>
</ol><ul> is an unordered (bulleted) list and <ol> an ordered (numbered) list. Each item is an <li>.
Semantic layout elements
Semantic elements describe the meaning of their content, not just its appearance. Compare a page built only with <div> elements to one built like this:
<body>
<header>
<h1>Asha Menon</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
</nav>
</header>
<main>
<section id="about">
<h2>About me</h2>
<p>Computer science student who enjoys building web apps.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<article>
<h3>Expense tracker</h3>
<p>A small app to record daily spending.</p>
</article>
</section>
</main>
<footer>
<p>Contact: asha@example.com</p>
</footer>
</body>| Element | Meaning |
|---|---|
<header> | Introductory content or a page banner |
<nav> | A group of navigation links |
<main> | The main content of the page (use once) |
<section> | A themed group of content, usually with a heading |
<article> | Self-contained content, such as a blog post or project card |
<footer> | Closing information such as contact details or copyright |
Semantic HTML improves accessibility (screen-reader users can jump between landmarks), SEO (search engines understand the page) and maintainability (other developers can read your code).
Hands-on exercise
Create a file named index.html with the document skeleton. Add a header with your name and a nav containing two links, a main element with two sections ("About me" and "Skills", the second containing an unordered list) and a footer. Open the file in your browser. Then open developer tools and check that the heading levels go h1 → h2 without skipping.
Knowledge check
3 questions • 70% to pass • Practice only, no certificate
Key concepts
- Elements are written with tags; attributes add extra information inside the opening tag.
- The head describes the page; the body contains everything visible.
- Use one h1 per page and heading levels in order to create a clear outline.
- Semantic elements such as header, nav, main, section, article and footer make pages accessible and easier to understand.