Complete List of HTML Tags: A Beginner’s Guide to Web Structure
HTML (HyperText Markup Language) is the foundation of every website. It uses tags to structure content such as text, images, links, and more. If you’re starting your web development journey, learning HTML tags is your first step.
In this guide, you’ll find a well-organized list of HTML tags, explained in simple language with examples.
What Are HTML Tags?
HTML tags are keywords enclosed in angle brackets:
<tagname>
Most tags come in pairs:
<p>This is a paragraph</p>
<p>→ Opening tag</p>→ Closing tag
1. Basic Structure Tags
These tags define the structure of a webpage.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
</body>
</html>
Important Tags
<html>→ Root of the document<head>→ Contains metadata<title>→ Page title<body>→ Visible content
2. Text Formatting Tags
Used to display and format text.
Common Tags
<h1>to<h6>→ Headings<p>→ Paragraph<br>→ Line break<hr>→ Horizontal line
Styling Tags
<b>/<strong>→ Bold text<i>/<em>→ Italic text<u>→ Underline<mark>→ Highlight text<small>→ Smaller text
3. Link and Media Tags
These tags connect pages and display media.
Tags
<a>→ Hyperlink
<a href="https://example.com">Visit</a>
<img>→ Image
<img src="image.jpg" alt="Image">
<audio>→ Audio file<video>→ Video file
4. List Tags
Used to create lists.
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List
<ul>
<li>Item A</li>
</ul>
Description List
<dl>
<dt>HTML</dt>
<dd>Markup language</dd>
</dl>
5. Table Tags
Used to display data in tabular form.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
</table>
Tags
<table>→ Table<tr>→ Table row<th>→ Header cell<td>→ Data cell
6. Form Tags
Forms collect user input.
<form>
<input type="text" placeholder="Enter name">
<button>Submit</button>
</form>
Tags
<form>→ Form container<input>→ Input field<textarea>→ Multi-line text<button>→ Button<label>→ Label for input
7. Semantic Tags (Modern HTML)
Semantic tags give meaning to content.
Examples
<header>→ Page header<nav>→ Navigation menu<section>→ Section of content<article>→ Independent content<footer>→ Page footer
👉 These improve SEO and accessibility.
8. Container Tags
Used to group elements.
Tags
<div>→ Block container<span>→ Inline container
9. Meta and Utility Tags
These tags provide additional information.
Tags
<meta>→ Metadata<link>→ External resources (CSS)<script>→ JavaScript code<style>→ Internal CSS
Quick HTML Tag Summary
Structure: html, head, body
Text: h1-h6, p, b, i, u
Links: a
Media: img, audio, video
Lists: ul, ol, li
Tables: table, tr, td, th
Forms: form, input, button
Semantic: header, footer, section
Containers: div, span
Tips for Beginners
- Always close tags properly
- Use semantic tags for better structure
- Keep your code clean and readable
- Practice by building small web pages
Final Thoughts
HTML tags are the building blocks of the web. Once you understand how they work, you can create structured and meaningful web pages with ease.
Start with basic tags, practice regularly, and gradually explore advanced features. With time, HTML will become second nature to you.
