Complete HTML Tags Tutorial &
Reference
Introduction:
HTML (HyperText Markup Language) is the standard language used to create and design
web pages. It uses a series of elements called 'tags' that define the structure and content of a
webpage. Each tag serves a specific purpose, such as defining text, creating links, inserting
images, or structuring layouts.
This document provides a complete reference to all commonly used HTML tags, along with
their purpose and example usage.
1. Basic Structure Tags
<!DOCTYPE> – Defines the document type and version of HTML.
<html> – Root element of an HTML page.
<head> – Container for metadata (title, styles, scripts, etc.).
<title> – Specifies the title of the document (shown in browser tab).
<body> – Contains the content of the document.
2. Text Formatting Tags
<h1> to <h6> – Headings from largest (<h1>) to smallest (<h6>).
<p> – Defines a paragraph.
<br> – Inserts a line break.
<hr> – Creates a horizontal line.
<b>, <strong> – Bold text (strong indicates importance).
<i>, <em> – Italic text (em indicates emphasis).
<u> – Underlined text.
<mark> – Highlighted text.
<small> – Smaller text.
<sup> – Superscript text.
<sub> – Subscript text.
<pre> – Preformatted text.
<blockquote> – Defines a block of quoted text.
<code> – Displays code in monospace font.
3. Links and Media Tags
<a> – Creates a hyperlink.
<img> – Embeds an image.
<audio> – Embeds audio content.
<video> – Embeds video content.
<source> – Defines media source for audio/video.
<track> – Specifies text tracks for audio/video.
<iframe> – Embeds another webpage.
4. List Tags
<ul> – Defines an unordered (bulleted) list.
<ol> – Defines an ordered (numbered) list.
<li> – Defines a list item.
<dl> – Defines a description list.
<dt> – Defines a term in a description list.
<dd> – Defines the description of the term.
5. Table Tags
<table> – Defines a table.
<tr> – Defines a row in a table.
<td> – Defines a cell in a table.
<th> – Defines a table header cell.
<thead> – Groups header content in a table.
<tbody> – Groups body content in a table.
<tfoot> – Groups footer content in a table.
<caption> – Defines a table caption.
6. Forms and Input Tags
<form> – Defines an input form.
<input> – Defines an input field.
<label> – Defines a label for input.
<textarea> – Defines a multi-line text input.
<button> – Defines a clickable button.
<select> – Defines a dropdown list.
<option> – Defines an option in dropdown.
<optgroup> – Groups options in dropdown.
<fieldset> – Groups form elements.
<legend> – Defines a caption for fieldset.
<datalist> – Provides autocomplete options for input.
<output> – Represents result of calculation.
7. Semantic Tags
<header> – Defines a page or section header.
<footer> – Defines a page or section footer.
<nav> – Defines navigation links.
<article> – Defines independent, self-contained content.
<section> – Defines a section of content.
<aside> – Defines content aside from the main content.
<main> – Defines the main content of the document.
<figure> – Groups media content with a caption.
<figcaption> – Defines a caption for figure.
8. Scripting and Meta Tags
<script> – Embeds JavaScript code.
<noscript> – Alternative content when scripts are disabled.
<style> – Defines CSS styles.
<link> – Defines external resources (like CSS).
<meta> – Defines metadata (charset, viewport, etc.).
<base> – Specifies base URL for links.