Introduction
Whether you’re a web developer, digital marketer, or blogger, understanding the HTML tags list is essential. This comprehensive g
uide walks you through all the core HTML tags, their usage, and includes a free downloadable checklist for practical implementation.
What Are HTML Tags?
HTML tags are the fundamental building blocks of webpages that tell web browsers how to display and format content. For example:
<a href=”https://www.360bms.in/html-tags-list-checklist/”>Search Engine Optimization (SEO)</a>
<a>is the element.hrefis an attribute specifying the link’s destination.- “search engine optimization (SEO)” is the content of the tag.
Most Common and Useful HTML Tags
Before diving into our ultimate HTML tags list, let’s get to know them alongside a few use cases. The graphic below shows the most common and useful HTML tags as they can appear on three different page types:
- Homepage: Focused mainly on navigation and highlighting key parts of the business.
- Blog Post: Focused on presenting a blog post in a clear, logical way.
- Landing Page: Focused on conveying benefits and converting users.
You’ll see some tags that are used across all three but for different purposes (mentioned in parentheses). And you’ll see some tags that are specific to each page type.
Semantic HTML Tags for Conveying Structure
Use semantic markup to improve accessibility and provide additional context for search engines.
| Tag | Description |
|---|---|
<article> | Container for standalone content like a blog post or news story. |
<aside> | Content tangentially related to the main content, often displayed as a sidebar. |
<figcaption> | Caption or legend for a <figure> element. |
<figure> | Self-contained content like images, diagrams, or code snippets. |
<footer> | Footer section containing information about the author, copyright, etc. |
<header> | Introductory content for a page or section, typically containing a logo or heading. |
<main> | Dominant content of the document; only one per page. |
<nav> | Navigation links; intended for major navigational sections. |
<section> | Thematic grouping of content, typically with a heading. |
Basic Structure Tags for Establishing Overall Construction
These tags are essential for establishing the fundamental framework of any HTML document.
| Tag | Description |
|---|---|
<!DOCTYPE> | Declares the document type to ensure proper rendering. |
<html> | Root element of an HTML document. |
<head> | Contains metadata about the document. |
<body> | Contains all the visible content of the document. |
<meta> | Provides structured metadata about the document. |
<title> | Defines the title of the document, shown in browser tabs and search results. |
<link> | Links to external resources like CSS stylesheets. |
<script> | Embeds or references executable scripts like JavaScript. |
<style> | Contains CSS rules applied directly to the document. |
Content and Text Formatting Tags for Defining Overall Look
These tags establish the content’s primary structure and style to enhance readability and engagement.
| Tag | Description |
|---|---|
<a> | Creates a hyperlink to other webpages or resources. |
<br> | Inserts a single line break. |
<div> | Defines a division or section, often used as a container for styling. |
<em> | Represents emphasized text, typically displayed in italics. |
<strong> | Creates strongly emphasized text, typically displayed in bold. |
<p> | Represents a paragraph of text. |
<span> | An inline container used to style specific portions of text. |
<h1> to <h6> | Define headings, with <h1> being the most important. |
<img> | Embeds an image into the document. |
<hr> | Represents a thematic break in content, often displayed as a horizontal line. |
Image and Multimedia Tags for Incorporating Visual Elements
Use these tags to embed and manage visual and auditory content within a webpage.
| Tag | Description |
|---|---|
<img> | Embeds an image into the HTML document. |
<audio> | Embeds sound content in an HTML document. |
<video> | Embeds a video player to display video content. |
<source> | Specifies multiple media resources for <audio> or <video> elements. |
<track> | Specifies timed text tracks for <video> or <audio> elements. |
<map> | Defines an image map with clickable areas. |
<area> | Defines a clickable area within an image map. |
<picture> | Provides a container for multiple <source> elements and one <img> element to offer different image versions for various scenarios. |
List Tags for Organizing Content
These tags present information in a structured manner, enhancing readability.
| Tag | Description |
|---|---|
<ul> | Creates an unordered (bulleted) list. |
<ol> | Creates an ordered (numbered) list. |
<li> | Represents a list item within <ul> or <ol>. |
<dl> | Creates a description list. |
<dt> | Defines a term in a description list. |
<dd> | Describes a term in a description list. |
Table Tags for Presenting Data
Use these tags to structure and display data in a tabular format.
| Tag | Description |
|---|---|
<table> | Creates a table in an HTML document. |
<tr> | Defines a row within a table. |
<td> | Defines a standard data cell in a table row. |
<th> | Defines a header cell in a table row. |
<thead> | Groups the header content in a table. |
<tbody> | Groups the body content in a table. |
<tfoot> | Groups the footer content in a table. |
<caption> | Defines a title or caption for the table. |
<colgroup> | Specifies a group of one or more columns in a table for formatting. |
<col> | Specifies column properties for each column within a <colgroup> element. |
Form Tags for Enabling User Interaction
These tags create interactive forms that allow users to input and submit data.
| Tag | Description |
|---|---|
<form> | Creates an HTML form for user input. |
<input> | Creates an input control. |
<label> | Defines a label for an <input> element. |
<textarea> | Defines a multiline input control (text area). |
<button> | Defines a clickable button. |
<select> | Defines a drop-down list. |
<option> | Defines an option in a drop-down list. |
<optgroup> | Defines a group of related options in a |