HTML Tags Reference

Complete list of HTML elements with examples

About HTML Tags

HTML tags are the building blocks of web pages. They define the structure and content of a webpage, telling browsers how to display text, images, and other media. This reference covers all standard HTML5 tags with examples and usage information.

Structural Tags

Semantic Tags

Form Tags

Basic Structure Tags

Tag	Description	Example	Common Attributes
<!DOCTYPE>	Defines the document type and HTML version	<!DOCTYPE html>	None
<html>	Root element of an HTML page	<html lang="en">...</html>	lang, xmlns
<head>	Contains meta information about the document	<head><title>Page Title</title></head>	None
<title>	Specifies a title for the document	<title>My Page</title>	None
<body>	Contains the visible page content	<body>...</body>	Various (onload, onunload, etc.)
<div>	Defines a division or section	<div class="container">...</div>	class, id, style, etc.
<span>	Inline container for styling	<span class="highlight">text</span>	class, id, style, etc.

Text Formatting Tags

Tag	Description	Example	Common Attributes
<h1> to <h6>	HTML headings	<h1>Main Heading</h1>	class, id, style, etc.
<p>	Defines a paragraph	<p>This is a paragraph.</p>	class, id, style, etc.
<br>	Inserts a single line break	Line 1<br>Line 2	None
<hr>	Defines a thematic break	<hr>	class, id, style, etc.
<strong>	Important text (bold)	<strong>Important!</strong>	class, id, style, etc.
<em>	Emphasized text (italic)	<em>Emphasized</em>	class, id, style, etc.
<mark>	Marked/highlighted text	<mark>Highlighted</mark>	class, id, style, etc.
<small>	Smaller text	<small>Small text</small>	class, id, style, etc.

Media Tags

Tag	Description	Example	Common Attributes
<img>	Embeds an image	<img src="image.jpg" alt="Description">	src, alt, width, height, loading, etc.
<audio>	Embeds sound content	<audio controls><source src="audio.mp3"></audio>	controls, autoplay, loop, muted, etc.
<video>	Embeds video content	<video controls width="250"><source src="video.mp4"></video>	controls, autoplay, loop, muted, poster, etc.
<iframe>	Embeds another HTML page	<iframe src="page.html" title="Description"></iframe>	src, title, width, height, allow, etc.
<picture>	Container for multiple image sources	<picture><source media="(min-width:650px)" srcset="large.jpg"><img src="small.jpg"></picture>	None (contains <source> and <img>)
<svg>	Container for SVG graphics	<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"></svg>	width, height, viewBox, etc.

List Tags

Tag	Description	Example	Common Attributes
<ul>	Defines an unordered list	<ul><li>Item 1</li><li>Item 2</li></ul>	class, id, style, etc.
<ol>	Defines an ordered list	<ol><li>First</li><li>Second</li></ol>	reversed, start, type
<li>	Defines a list item	<li>List item</li>	value (for <ol>)
<dl>	Defines a description list	<dl><dt>Term</dt><dd>Description</dd></dl>	class, id, style, etc.
<dt>	Defines a term in a description list	<dt>HTML</dt>	class, id, style, etc.
<dd>	Describes a term in a description list	<dd>HyperText Markup Language</dd>	class, id, style, etc.

Table Tags

Tag	Description	Example	Common Attributes
<table>	Defines a table	<table>...</table>	border, cellpadding, cellspacing, etc.
<tr>	Defines a table row	<tr>...</tr>	class, id, style, etc.
<th>	Defines a table header cell	<th>Header</th>	colspan, rowspan, scope, etc.
<td>	Defines a table cell	<td>Data</td>	colspan, rowspan, headers, etc.
<caption>	Defines a table caption	<caption>Monthly Savings</caption>	class, id, style, etc.
<thead>	Groups header content in a table	<thead>...</thead>	class, id, style, etc.
<tbody>	Groups body content in a table	<tbody>...</tbody>	class, id, style, etc.
<tfoot>	Groups footer content in a table	<tfoot>...</tfoot>	class, id, style, etc.

Form Tags

Tag	Description	Example	Common Attributes
<form>	Defines an HTML form	<form action="/submit" method="post">...</form>	action, method, enctype, target, etc.
<input>	Defines an input control	<input type="text" name="username">	type, name, value, placeholder, required, etc.
<textarea>	Defines a multiline input control	<textarea name="message" rows="4"></textarea>	name, rows, cols, placeholder, etc.
<button>	Defines a clickable button	<button type="submit">Submit</button>	type, name, value, disabled, etc.
<select>	Defines a drop-down list	<select name="colors"><option value="red">Red</option></select>	name, multiple, required, etc.
<option>	Defines an option in a drop-down list	<option value="green">Green</option>	value, selected, disabled, etc.
<label>	Defines a label for an input element	<label for="name">Name:</label>	for
<fieldset>	Groups related elements in a form	<fieldset><legend>Personal Info</legend>...</fieldset>	disabled, form, name
<legend>	Defines a caption for a fieldset	<legend>Contact Details</legend>	None

Semantic Tags

Tag	Description	Example	Common Attributes
<header>	Defines a header for a document or section	<header><h1>Page Title</h1></header>	class, id, style, etc.
<nav>	Defines navigation links	<nav><a href="/">Home</a></nav>	class, id, style, etc.
<main>	Specifies the main content of a document	<main>...</main>	class, id, style, etc.
<section>	Defines a section in a document	<section><h2>Chapter 1</h2></section>	class, id, style, etc.
<article>	Defines independent, self-contained content	<article><h2>Blog Post</h2></article>	class, id, style, etc.
<aside>	Defines content aside from the page content	<aside><p>Related content</p></aside>	class, id, style, etc.
<footer>	Defines a footer for a document or section	<footer><p>Copyright</p></footer>	class, id, style, etc.
<figure>	Specifies self-contained content	<figure><img src="image.jpg"><figcaption>Caption</figcaption></figure>	class, id, style, etc.
<figcaption>	Defines a caption for a figure element	<figcaption>Image description</figcaption>	class, id, style, etc.
<time>	Defines a date/time	<time datetime="2023-01-01">New Year</time>	datetime

Link & Scripting Tags

Tag	Description	Example	Common Attributes
<a>	Defines a hyperlink	<a href="https://example.com">Link</a>	href, target, rel, download, etc.
<link>	Defines the relationship to an external resource	<link rel="stylesheet" href="styles.css">	rel, href, type, media, etc.
<script>	Defines a client-side script	<script src="app.js"></script>	src, async, defer, type, etc.
<style>	Defines style information for a document	<style>body { color: red; }</style>	type, media, etc.
<meta>	Defines metadata about an HTML document	<meta charset="UTF-8">	charset, name, content, http-equiv, etc.
<base>	Specifies the base URL/target for relative URLs	<base href="https://example.com/">	href, target

HTML Tag Best Practices

Do's:

Use semantic HTML5 tags when possible
Close all tags properly (even self-closing tags in XHTML)
Use lowercase for tag names and attributes
Quote all attribute values
Include alt attributes for images
Use proper nesting (close tags in reverse order)
Validate your HTML

Don'ts:

Don't use deprecated tags (like <font> or <center>)
Avoid presentational tags (use CSS instead)
Don't skip closing tags (except void elements)
Avoid excessive div nesting
Don't use tables for layout
Avoid inline styles
Don't forget the document type declaration

Try Our HTML Tags Editor

Experiment with HTML tags in our interactive editor:

Test different HTML elements
See how tags render in real-time
Practice semantic HTML structure
Experiment with forms and media

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tags Example</title>
</head>
<body>
  <!-- Semantic structure -->
  <header>...</header>
  
  <main>
    <article>
      <h1>Title</h1>
      <p>Paragraph with <a href="#">link</a>.</p>
    </article>
  </main>
  
  <footer>...</footer>
</body>
</html>

< Previous (Character Encodings)Next (Attribute Reference) >