HTML Tags with Examples
Basic Structure Tags
<html>: Root of the HTML document
Example:
<html>
...
</html>
<head>: Contains meta information
Example:
<head>
<title>Page Title</title>
</head>
<title>: Document title in browser tab
Example:
<title>My Website</title>
<body>: Main content of the page
Example:
<body>
<h1>Welcome</h1>
</body>
Text Formatting Tags
<h1> to <h6>: Headings (h1 is largest)
Example:
<h1>Heading 1</h1>
<h6>Heading 6</h6>
<p>: Paragraph
Example:
<p>This is a paragraph.</p>
<br>: Line break
Example:
Line 1<br>Line 2
<hr>: Horizontal line
Example:
<hr>
<b>: Bold text
Example:
<b>Bold</b>
<i>: Italic text
Example:
<i>Italic</i>
<u>: Underlined text
Example:
<u>Underline</u>
<strong>: Important (bold)
Example:
<strong>Important</strong>
<em>: Emphasized (italic)
Example:
<em>Emphasized</em>
<mark>: Highlighted text
Example:
<mark>Marked</mark>
<small>: Smaller text
Example:
<small>Small text</small>
<sub>: Subscript
Example:
H<sub>2</sub>O
<sup>: Superscript
Example:
x<sup>2</sup>
Link & Media Tags
<a>: Hyperlink
Example:
<a href="https://example.com">Visit</a>
<img>: Image
Example:
<img src="image.jpg" alt="Image">
<video>: Video content
Example:
<video controls><source src="video.mp4" type="video/mp4"></video>
<audio>: Audio content
Example:
<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
<source>: Media source
Example:
<source src="media.mp4" type="video/mp4">
<iframe>: Inline frame (embed another page)
Example:
<iframe src="https://example.com"></iframe>
List Tags
<ul>: Unordered list
Example:
<ul>
<li>Item</li>
</ul>
<ol>: Ordered list
Example:
<ol>
<li>Item</li>
</ol>
<li>: List item
Example:
<li>Item</li>
<dl>: Description list
Example:
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
<dt>: Term in description list
Example:
<dt>HTML</dt>
<dd>: Description in description list
Example:
<dd>HyperText Markup Language</dd>
Table Tags
<table>: Table
Example:
<table>
<tr><td>Data</td></tr>
</table>
<tr>: Table row
Example:
<tr>
<td>Cell</td>
</tr>
<td>: Table data
Example:
<td>Data</td>
<th>: Table header
Example:
<th>Header</th>
<thead>: Table header section
Example:
<thead>
<tr><th>Col</th></tr>
</thead>
<tbody>: Table body
Example:
<tbody>
<tr><td>Data</td></tr>
</tbody>
<tfoot>: Table footer
Example:
<tfoot>
<tr><td>Footer</td></tr>
</tfoot>
<caption>: Table caption
Example:
<caption>Table Title</caption>
Form Tags
<form>: Form
Example:
<form action="/submit">
...
</form>
<input>: Input field
Example:
<input type="text" name="name">
<label>: Label for input
Example:
<label for="name">Name:</label>
<textarea>: Multiline text input
Example:
<textarea></textarea>
<button>: Button
Example:
<button>Click Me</button>
<select>: Dropdown list
Example:
<select>
<option>One</option>
</select>
<option>: Option in dropdown
Example:
<option>Option</option>
<fieldset>: Group form elements
Example:
<fieldset>
<legend>Info</legend>
</fieldset>
<legend>: Title for <fieldset>
Example:
<legend>Personal Info</legend>
Semantic Tags
<header>: Page/header section
Example:
<header>
<h1>Title</h1>
</header>
<nav>: Navigation links
Example:
<nav>
<a href='#'>Link</a>
</nav>
<main>: Main content
Example:
<main>
<p>Content</p>
</main>
<article>: Independent content
Example:
<article>
<h2>Post</h2>
</article>
<section>: Section of content
Example:
<section>
<h2>Section</h2>
</section>
<aside>: Sidebar content
Example:
<aside>
<p>Note</p>
</aside>
<footer>: Page/footer section
Example:
<footer>
<p>Copyright</p>
</footer>
<figure>: Media with caption
Example:
<figure>
<img src='img.jpg'>
</figure>
<figcaption>: Caption for <figure>
Example:
<figcaption>Caption</figcaption>
Scripting & Meta Tags
<script>: JavaScript code
Example:
<script>
alert('Hi');
</script>
<noscript>: Fallback for no JS
Example:
<noscript>Enable JavaScript</noscript>
<style>: Internal CSS
Example:
<style>
body {color: red;}
</style>
<link>: External resource (e.g., CSS)
Example:
<link rel="stylesheet" href="style.css">
<meta>: Metadata
Example:
<meta charset="UTF-8">
<base>: Base URL for relative links
Example:
<base href="https://example.com/">
Interactive & Misc Tags
<details>: Expandable content
Example:
<details>
<summary>More</summary>
Details here
</details>
<summary>: Summary of <details>
Example:
<summary>Click to expand</summary>
<dialog>: Dialog box or popup
Example:
<dialog open>Dialog content</dialog>
<canvas>: Drawing area (graphics)
Example:
<canvas></canvas>
<svg>: Scalable vector graphics
Example:
<svg width='100' height='100'></svg>
<span>: Inline container
Example:
<span>Text</span>
<div>: Block-level container
Example:
<div>Content</div>
