List of essential HTML5 tags with examples
🏗️ Basic Structure
Defines the foundation of every HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first page</title>
</head>
<body>
<!-- HTML comment -->
</body>
</html><!DOCTYPE html>: indicates the use of HTML5.
<html>: root of the document.
<head>: contains metadata and settings.
<meta>: defines information such as encoding or responsive viewport.
<title>: title that appears in the browser tab.
<body>: contains all visible content of the page.
<!– Any text –>: comment only visible to the developer in the code.
📝 Text and Formatting
Organize and style the document’s text.
<h1>Main title</h1>
<h2>Subtitle</h2>
<p>This is a paragraph.</p>
<strong>Important text</strong>
<em>Emphasized text</em>
<span style="color:red;">Inline text</span>
<br> Line break
<a href="https://example.com">Link</a><h1>–<h6>: heading hierarchy, with <h1> being the most important and <h6> the least.
<p>: defines a paragraph.
<strong>: indicates importance (bold text).
<em>: highlights with emphasis (italic text).
<span>: inline container to apply styles.
<br>: inserts a line break.
<a>: creates a link to another page or resource (href attribute).
🎬 Multimedia
Insert images, videos, audio, or SVG graphics.
<img src="photo.jpg" alt="Image description">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>
<video controls width="320">
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio><img>: inserts an image (the alt attribute describes its content for accessibility).
<svg>: allows creating scalable vector graphics.
<video>: displays a video with controls.
<audio>: plays sound or music.
<source>: defines multimedia files inside <video> or <audio>.
🧩 Forms
Allow collecting user information through interactive fields.
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="name">
<label>Age:</label>
<input type="number" name="age">
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label>Hobbies:</label>
<input type="checkbox" name="sports"> Sports
<input type="checkbox" name="music"> Music
<label>Comments:</label>
<textarea name="comments" rows="3" cols="30"></textarea>
<label>Country:</label>
<select name="country">
<option>Spain</option>
<option>Mexico</option>
</select>
<input type="submit" value="Submit">
</form><form>: groups form fields.
<label>: descriptive label for a field.
<input type=”text”>: short text field.
<input type=”number”>: numeric field.
<input type=”radio”>: single option within a group.
<input type=”checkbox”>: multiple selection.
<textarea>: area for long text or comments.
<select> / <option>: dropdown list.
<input type=”submit”>: button to submit the form.
🧱 SEO Semantics
Organize content in a structured way that is understandable for search engines.
<header>Site header</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<section>Thematic section</section>
<article>Article or post</article>
<aside>Side information</aside>
<footer>Page footer</footer><header>: header of the site or section.
<nav>: contains navigation links.
<main>: main content of the page.
<section>: groups related content.
<article>: independent content block (like a post).
<aside>: sidebar or complementary information.
<footer>: page footer.
🌈 Other Useful Tags
<ul>
<li>Element A</li>
<li>Element B</li>
</ul>
<ol type="A">
<li>First item</li>
<li>Second item</li>
</ol>
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Ana</td><td>30</td></tr>
</table>
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure><ul>: unordered list (bullets).
<ol>: ordered list (type="A", "a", "I", "1").
<li>: item within a list.
<table>: creates data tables.
<tr>: table row.
<th>: header cell.
<td>: normal data cell.
<figure> and <figcaption>: image with descriptive caption.
