HTML Tags: Functions, Usage, and
Examples
<address>
Function: Defines contact info of the owner.
Usage: Often used in footer or author contact sections.
Example:
<address>123 Main St, Lahore, Pakistan</address>
<article>
Function: Defines self-contained content like news/blogs.
Usage: Used for content that makes sense on its own.
Example:
<article><h2>News Title</h2><p>Article content
here.</p></article>
<aside>
Function: Defines side content not part of main flow.
Usage: Used for side notes, tips, or related ads.
Example:
<aside>This is related but separate information.</aside>
<blockquote>
Function: Used for long quotations.
Usage: Usually includes a 'cite' attribute.
Example:
<blockquote cite='https://example.com'>Quoted text.</blockquote>
<canvas>
Function: Container for graphics via JavaScript.
Usage: Used for games, drawings, and animations.
Example:
<canvas id='myCanvas' width='200' height='100'></canvas>
<div>
Function: Generic block container.
Usage: Used to group elements and apply CSS.
Example:
<div><h2>Title</h2><p>Some paragraph.</p></div>
<dl>, <dt>, <dd>
Function: Defines a description list.
Usage: dl = list, dt = term, dd = definition.
Example:
<dl><dt>HTML</dt><dd>Markup language</dd></dl>
<fieldset> & <legend>
Function: Groups related form controls.
Usage: Used to structure form sections.
Example:
<fieldset><legend>Info</legend><input type='text'></fieldset>
<figure> & <figcaption>
Function: Groups media with captions.
Usage: Used for images, charts, etc.
Example:
<figure><img
src='img.jpg'><figcaption>Description</figcaption></figure>
<span>
Function: Generic inline container.
Usage: Used to apply styles or group inline elements.
Example:
<p>This is a <span>highlighted</span> word.</p>
<a>
Function: Defines a hyperlink.
Usage: Used to link to other pages, files, or anchors.
Example:
<a href='https://example.com'>Visit</a>
<abbr>
Function: Defines an abbreviation with full form.
Usage: Displays full form on hover.
Example:
<abbr title='HyperText Markup Language'>HTML</abbr>
<b> vs <strong>
Function: Both display bold text.
Usage: strong implies importance, b is just stylistic.
Example:
<b>Bold</b> vs <strong>Important</strong>
<i> vs <em>
Function: Both display italic text.
Usage: em implies emphasis, i is just stylistic.
Example:
<i>Italic</i> vs <em>Emphasized</em>
<mark>
Function: Highlights text.
Usage: Used to mark important content.
Example:
<mark>Important</mark>
<br>
Function: Inserts a line break.
Usage: Used where a new line is needed.
Example:
Line 1<br>Line 2
<button>
Function: Creates a clickable button.
Usage: Used in forms and actions.
Example:
<button>Click me</button>
<code>
Function: Displays code snippet.
Usage: Used to show code in monospace font.
Example:
<code>print('Hello')</code>
<input>
Function: Creates form field input.
Usage: Used to take user data.
Example:
<input type='text'>
<label>
Function: Label for form element.
Usage: Improves accessibility.
Example:
<label for='name'>Name</label><input id='name'>
<small>
Function: Displays smaller text.
Usage: Used for notes or fine print.
Example:
<small>Disclaimer</small>
<sub> & <sup>
Function: Subscript and superscript text.
Usage: Used in math/science formulas.
Example:
H<sub>2</sub>O, X<sup>2</sup>
<textarea>
Function: Creates multi-line text input.
Usage: Used for long user input like comments.
Example:
<textarea rows='4' cols='50'></textarea>
<time>
Function: Defines date or time.
Usage: Helps with machine-readable dates.
Example:
<time datetime='2025-07-04'>4 July 2025</time>
