Purpose
This article explains how to structure a page using HTML5 semantic elements.
Welcome
This is a simple page to learn HTML structure.
Features
- Semantic HTML
- Accessible markup
This page is designed to introduce you to the basics of HTML, the foundational language of the web. Here, you will learn about the essential building blocks of a webpage, including HTML tags, structure, and how to create a simple webpage. By the end of this guide, you will have a solid understanding of how to use HTML to create structured and meaningful content for the web.
To follow this guide and write HTML, you can use any text editing tool. Here are some options:
.html extensionWhen saving your file, make sure to:
.html extension, e.g., index.htmlOnce saved, you can open the file in any web browser (e.g., Chrome, Firefox, Edge) to see your HTML in action.
At its core, every webpage is constructed using HTML Elements.
Think of these as the fundamental building blocks of your content.
In HTML, everything (from a simple sentence to a complex navigation bar) is wrapped inside an element.
An element, is a representation of an instruction to the browser. They tell the browser how to structure and display the content.
Without these blocks, the browser would see a giant wall of unorganized text; with them, we create the digital experiences we see every day.
Imagine sending this plain text (raw data) to a browser. It has no hierarchy, no emphasis, and no structure:
By wrapping that same text in tags, we give it a specific purpose (a heading, a paragraph, or a list item) and instruct the browser on how to display it:
<h2>Hello, World!</h2> <p>This is a simple webpage that I'm building to learn <b>HTML</b>.</p> <ul> <li>HTML for structure</li> <li>CSS for styling</li> </ul>
The browser reads those tags and builds a visual interface that is easy for humans to navigate:
This is a simple webpage that I'm building to learn HTML.
By using the right building blocks, we transform raw data into a structured digital experience.
To identify and create a tag, we use special symbols called angle brackets: < and >.
We use such brackets to enclose the tag name, which tells the browser what kind of element it is dealing with.
For example, the tag for a paragraph is <p>. When we write <p>, we are telling the browser, "This is a paragraph."
To close the tag, we use a forward slash / before the tag name, like this: </p>. This indicates the end of that element.
So, a complete paragraph element would look like this:
<p>This is a paragraph of text.</p>
In this example, <p> is the opening tag, and </p> is the closing tag. The text "This is a paragraph of text." is the content that will be displayed on the webpage.
We started with an angle bracket to open the tag (<), followed by the tag name (p), and then closed it with another angle bracket (>), for the closing bracket (</p>) we include the forward slash (/).
Most HTML tags require a forward slash / to close them, ensuring that the browser knows where the element ends. However, some tags, like <br> for line breaks or <img> for images, are self-closing and do not require a separate closing tag.
Note: The tags themselves are not visible on the webpage; they are instructions for the browser on how to display the content.
Below you can see 30 very commonly used HTML tags, with a short description, their basic structure, and a small example.
Description: Wraps the entire HTML document.
Structure: <html> ... </html>
Example:
<html> <head>...</head> <body>...</body> </html>
Description: Contains metadata, links to stylesheets, and other information not shown directly on the page.
Structure: <head> ... </head>
<head> <title>My Page</title> </head>
Description: Sets the title shown in the browser tab and used by search engines.
Structure: <title> ... </title>
<title>Learning HTML</title>
Description: Defines essential document parameters, such as character encoding for proper rendering and meta descriptions to influence search engine snippets. For example: Charset (Ensures text characters display correctly), Description (Provides the summary text seen in Google search results), or Viewport (Controls how the page scales on mobile devices).
Structure: <meta name="...">
<meta charset="UTF-8">
Description: Links external resources such as CSS files.
Structure: <link rel="..." href="...">
<link rel="stylesheet" href="styles.css">
Description: Wraps everything that is visible on the page.
Structure: <body> ... </body>
<body> <h1>Hello!</h1> </body>
Description: Headings that define the outline of your content; <h1> is the most important, <h6> the least.
Structure: <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5>, <h6>...</h6>
<h1>Main title</h1> <h2>Sub heading</h2>
Description: Defines a block of text as a paragraph.
Structure: <p> ... </p>
<p>This is a paragraph of text.</p>
Description: Inserts a line break inside text without starting a new paragraph.
Structure: <br>
<p>Line one.<br>Line two.</p>
Description: Represents a thematic break, usually shown as a horizontal line.
Structure: <hr>
<p>Section one.</p> <hr> <p>Section two.</p>
Description: Creates a hyperlink to another page, section, or resource.
Structure: <a href="URL">link text</a>
<a href="https://example.com">Visit Example</a>
Description: Embeds an image into the page.
Structure: <img src="path" alt="description">
<img src="logo.png" alt="Site logo">
Description: Defines a bullet-point list.
Structure: <ul>...</ul>
<ul> <li>Coffee</li> <li>Tea</li> </ul>
Description: Defines a numbered list.
Structure: <ol>...</ol>
<ol> <li>First</li> <li>Second</li> </ol>
Description: Represents a single item in a list. These elements are used inside <ul> or <ol> tags to define each item.
Structure: <li> ... </li>
<li>Item one</li>
Description: A generic block-level container, often used for layout and to better group content.
Structure: <div> ... </div>
<div> <p>Content inside a box.</p> </div>
Description: A generic inline container for text or other inline content. Often used to style only a part of the text or group inline elements.
Structure: <span> ... </span>
<span>This is some text</span>
Description: Marks text as important; rendered as bold by default.
Structure: <strong> ... </strong>
<p>This is <strong>very important</strong> text.</p>
Description: Makes text bold without adding extra meaning.
Structure: <b> ... </b>
<p>This word is <b>bold</b>.</p>
Description: Emphasizes text (usually shown in italics) and conveys stress in the sentence.
Structure: <em> ... </em>
<p>You <em>really</em> should try this.</p>
Description: Renders text in italics, often for technical terms or foreign words.
Structure: <i> ... </i>
<p>The word <i>bonjour</i> is French.</p>
Description: Represents a short fragment of computer code.
Structure: <code> ... </code>
<p>Use <code><p></code> for a paragraph.</p>
Description: Displays text exactly as written, preserving spaces and line breaks.
Structure: <pre> ... </pre>
<pre>
Line 1
Line 2 (indented)
</pre>
Description: Renders text in a smaller size, often for fine print or side notes.
Structure: <small> ... </small>
<p>Terms apply. <small>See full conditions.</small></p>
Description: Represents introductory content or a set of navigation links for a page or section.
Structure: <header> ... </header>
<header> <h1>My Site</h1> </header>
Description: Groups a set of navigation links.
Structure: <nav> ... </nav>
<nav> <a href="#home">Home</a> <a href="#about">About</a> </nav>
Description: Represents the central content of the document, unique to that page.
Structure: <main> ... </main>
<main> <h2>Article title</h2> </main>
Description: Represents footer content such as copyright or related links.
Structure: <footer> ... </footer>
<footer> <p>© 2026 My Site</p> </footer>
Description: Groups content into a thematic section of the page.
Structure: <section> ... </section>
<section> <h2>Features</h2> <p>Some details...</p> </section>
Description: Represents a self-contained piece of content that could stand on its own (like a blog post).
Structure: <article> ... </article>
<article> <h2>Blog post title</h2> <p>Post content...</p> </article>
As you can see from all the examples above, proper indentation helps improve the readability and maintainability of your HTML code.
By consistently using indentation, you make your code easier to understand for yourself and others who may work on it in the future.
While the browser can read HTML even if it's all on one long line, humans will find it a bit more complicated. Proper indentation turns a "jungle of tags" into a clear, organized map.
Whenever you place an element inside another, you should indent it (usually with 2 or 4 spaces). This visually shows which elements belong to which container.
Example without indentation:
<div><h1>Title</h1><p>This is a paragraph.</p><ul><li>Item 1</li><li>Item 2</li></ul></div>Example with proper indentation:
<div>
<h1>Title</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>Both options are valid and the browser can interpret them and display the content correctly, but proper indentation greatly improves readability and maintainability of your HTML code.
Now that you know individual tags, let's see how they work together to create a proper page structure for a simple website.
The key is using semantic HTML5 elements in a logical order: <header>, <nav>, <main>, and <footer>. Inside <main>, use <section> and <article> to organize content thematically.
Here's a complete, minimal homepage template showing proper structure:
Brief tagline or description.
This is a simple page to learn HTML structure.
This article explains how to structure a page using HTML5 semantic elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Site</title>
</head>
<body>
<header>
<h1>My Site</h1>
<p>Brief tagline or description.</p>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Welcome</h2>
<p>This is a simple page to learn HTML structure.</p>
</section>
<section id="features">
<h2>Features</h2>
<ul>
<li>Semantic HTML</li>
<li>Accessible markup</li>
</ul>
</section>
<section id="about">
<h2>About this site</h2>
<article>
<h3>Purpose</h3>
<p>This article explains how to structure a page using HTML5 semantic elements.</p>
</article>
</section>
</main>
<footer>
<p>© 2026 My Site</p>
</footer>
</body>
</html>
As we can see, the basic structure of the page is there, but it is lacking styling. CSS comes to the rescue to help us style and enhance the visual appearance of the page. We will cover CSS in detail at another moment.