HTML 8 min

Complete List of HTML5 Tags with Examples

Read on to explore complete list of html5 tags with examples — a beginner-friendly walkthrough by Codekilla.

Rahul Chaudhary Thu Apr 30 2026

What is HTML5?

HTML5 is the latest evolution of the standard markup language that structures content on the web. Think of it as the skeleton of every website you visit—it defines headings, paragraphs, images, links, and interactive elements that browsers understand and render. HTML5 introduced semantic tags like <article>, <nav>, and <section> that make your code more meaningful to both humans and search engines, plus native support for audio, video, and canvas graphics without clunky plugins.

You don't need to be a wizard to write HTML5. It's the most beginner-friendly language in web development because it reads almost like plain English. When you wrap text in <p>, browsers know it's a paragraph. When you use <button>, you get a clickable button. HTML5 builds on this simplicity while adding modern features that make websites faster, more accessible, and easier to maintain.

Why It Matters

Universal language: Every browser speaks HTML5, making it the foundation for web development across all devices and platforms
SEO and accessibility: Semantic tags help search engines understand your content structure and assist screen readers for visually impaired users
Native multimedia: Embed videos and audio directly without Flash or other deprecated technologies
Mobile-first: HTML5 features like responsive images and geolocation APIs are built for the smartphone era
Future-proof: Regular updates and backward compatibility mean code you write today won't break tomorrow

Document Structure Tags

Every HTML5 document starts with a basic structure. These tags form the backbone of your page and tell browsers how to interpret everything inside.

Tag	Purpose	Required?
`<!DOCTYPE html>`	Declares HTML5 document type	Yes
`<html>`	Root container for entire page	Yes
`<head>`	Metadata container (not visible)	Yes
`<body>`	Visible content container	Yes

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML5 Page</title>
</head>
<body>
    <h1>Welcome to HTML5</h1>
    <p>This is where your visible content lives.</p>
</body>
</html>

Text and Content Tags

These tags structure written content. Browsers apply default styling, but you can override everything with CSS later.

Tag	Usage	Example
`<h1>` to `<h6>`	Headings (h1 largest)	`<h1>Main Title</h1>`
`<p>`	Paragraph	`<p>Body text here</p>`
`<br>`	Line break	`Line one<br>Line two`
`<hr>`	Horizontal rule/divider	`<hr>`
`<strong>`	Important text (bold)	`<strong>Critical</strong>`
`<em>`	Emphasized text (italic)	`<em>Stressed</em>`
`<mark>`	Highlighted text	`<mark>Highlighted</mark>`
`<small>`	Fine print	`<small>Terms apply</small>`
`<del>`	Deleted text	`<del>Old price</del>`
`<ins>`	Inserted text	`<ins>New content</ins>`
`<sub>`	Subscript	`H<sub>2</sub>O`
`<sup>`	Superscript	`E = mc<sup>2</sup>`

html
<article>
    <h2>HTML5 Text Formatting</h2>
    <p>You can make text <strong>bold</strong> or <em>italic</em>.</p>
    <p>Use <mark>highlighting</mark> to draw attention.</p>
    <p>Chemical formula: H<sub>2</sub>O</p>
    <p>Mathematical notation: x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
</article>

Semantic Structure Tags

HTML5 introduced these game-changers for defining page regions. They replace the old <div id="header"> approach with meaningful tags that communicate purpose.

Tag	Purpose	Typical Use
`<header>`	Introductory content	Site logo, nav, hero section
`<nav>`	Navigation links	Main menu, breadcrumbs
`<main>`	Primary content	Central page content (one per page)
`<article>`	Self-contained content	Blog post, news story
`<section>`	Thematic grouping	Chapter, tabbed content
`<aside>`	Tangential content	Sidebar, pull quotes
`<footer>`	Footer content	Copyright, links, contact

html
<body>
    <header>
        <h1>Codekilla Blog</h1>
        <nav>
            <ul>
                <li><a href="#html">HTML</a></li>
                <li><a href="#css">CSS</a></li>
                <li><a href="#js">JavaScript</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Learning HTML5</h2>
            <p>Your journey starts here.</p>
        </article>
        
        <aside>
            <h3>Related Topics</h3>
            <p>Check out CSS fundamentals next.</p>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 Codekilla. All rights reserved.</p>
    </footer>
</body>

Lists organize information into digestible chunks. You've got three types to choose from.

html
<!-- Unordered list (bullets) -->
<ul>
    <li>HTML structures content</li>
    <li>CSS styles appearance</li>
    <li>JavaScript adds interactivity</li>
</ul>

<!-- Ordered list (numbers) -->
<ol>
    <li>Write HTML</li>
    <li>Add CSS</li>
    <li>Sprinkle JavaScript</li>
</ol>

<!-- Description list (term-definition pairs) -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Link and Media Tags

These tags connect pages and embed rich content. Media tags in HTML5 eliminated the need for Flash.

Tag	Purpose	Key Attributes
`<a>`	Hyperlink	`href`, `target`
`<img>`	Image	`src`, `alt`
`<audio>`	Audio player	`src`, `controls`
`<video>`	Video player	`src`, `controls`, `width`, `height`
`<source>`	Media source	`src`, `type`
`<picture>`	Responsive images	Contains `<source>` elements

html
<!-- Link -->
<a href="https://codekilla.com" target="_blank">Visit Codekilla</a>

<!-- Image with alt text -->
<img src="logo.png" alt="Codekilla Logo" width="200">

<!-- Audio player -->
<audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    Your browser doesn't support audio.
</audio>

<!-- Video player -->
<video width="640" height="360" controls>
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
    Your browser doesn't support video.
</video>

Form Tags

Forms collect user input. HTML5 added new input types that provide built-in validation and better mobile keyboards.

Tag	Purpose	Example
`<form>`	Form container	`<form action="/submit">`
`<input>`	Input field	`<input type="email">`
`<textarea>`	Multi-line text	`<textarea rows="5">`
`<button>`	Clickable button	`<button type="submit">`
`<select>`	Dropdown menu	`<select><option>`
`<label>`	Input label	`<label for="name">`

html
<form action="/subscribe" method="POST">
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" required placeholder="you@example.com">
    
    <label for="plan">Choose Plan:</label>
    <select id="plan" name="plan">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
    </select>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <button type="submit">Subscribe</button>
</form>

Table Tags

Tables display data in rows and columns. Don't use them for layout—that's what CSS is for.

html
<table>
    <thead>
        <tr>
            <th>Language</th>
            <th>Purpose</th>
            <th>Difficulty</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>Structure</td>
            <td>Easy</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>Styling</td>
            <td>Medium</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Interactivity</td>
            <td>Medium-Hard</td>
        </tr>
    </tbody>
</table>

Interactive and Embedded Tags

These tags add functionality beyond static content.

Tag	Purpose	Example
`<details>`	Collapsible content	`<details><summary>`
`<dialog>`	Modal dialog box	`<dialog open>`
`<canvas>`	Drawing surface	`<canvas id="game">`
`<iframe>`	Embedded page	`<iframe src="map.html">`
`<script>`	JavaScript code	`<script src="app.js">`

html
<!-- Collapsible section -->
<details>
    <summary>Click to expand</summary>
    <p>Hidden content appears when you click the summary.</p>
</details>

<!-- Embed another page -->
<iframe src="https://codekilla.com/embed" width="600" height="400"></iframe>

<!-- Canvas for drawings/games -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF6B6B';
    ctx.fillRect(50, 50, 100, 100);
</script>

Quick Cheat Sheet

Need	Reach for
Page structure	`<header>`, `<main>`, `<footer>`, `<nav>`
Text content	`<h1>`-`<h6>`, `<p>`, `<strong>`, `<em>`
Links	`<a href="">`
Images	`<img src="" alt="">`
Lists	`<ul>`, `<ol>`, `<li>`
Tables	`<table>`, `<tr>`, `<td>`, `<th>`
Forms	`<form>`, `<input>`, `<button>`, `<select>`
Media	`<audio>`, `<video>`, `<source>`
Grouping	`<div>` (generic), `<section>`, `<article>`
Scripts	`<script src="">`

Common Mistakes

Forgetting closing tags — Tags like <p>, <div>, and <section> need closing tags (</p>). Self-closing tags like <img> and <br> don't.
Using <br> for spacing — Don't use multiple <br> tags to create vertical space. That's a CSS job with margins or padding.
Skipping alt attributes on images — Always include alt="" on <img> tags. Screen readers need it, and SEO rewards it.
Nesting links inside links — You can't put an <a> tag inside another <a> tag. Browsers will break the markup.
Using tables for layout — Tables are for tabular data only. Use CSS Grid or Flexbox for page layouts.
Forgetting semantic tags — Using <div> everywhere instead of <header>, <nav>, <article> makes your code harder to read and hurts accessibility.

💡 Think Like a Programmer: HTML5 tags are your vocabulary for talking to browsers. Master the semantic ones first—they make your code self-documenting and help search engines understand what you're building.

// was this useful?

Did this article answer your question?

// HTML · published by Codekilla

← Back to all articles

// related articles