HTML tags, HTML elements, HTML text formatting

HTML tags is the backbone of web development. It is used to structure content on the web.

HTML tags are the building blocks of HTML documents, and each tag has a specific purpose, defining elements such as headings, paragraphs, images, links, and more.

What Are HTML Tags?

HTML tags are keywords (enclosed in angle brackets <>) that tell the browser how to display content. Most tags come in pairs: an opening tag (e.g., <p>) and a closing tag (e.g., </p>).

The content lies between these tags. Some tags, known as void elements, do not require a closing tag (e.g., <img>).

Example:

<p>This is a paragraph.</p>

html

Structure of an HTML Document

An HTML document typically consists of a structure defined by tags. Here’s the basic skeleton.

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a sample HTML page.</p>
  </body>
</html>

<!DOCTYPE html>: Specifies the document type and version of HTML.

<html>: HTML tag – The root element of an HTML document.

<head>: Head tag – Contains metadata about the document (e.g., title, links to stylesheets).

<body>: Body tag – Contains the content that is displayed in the browser.

Categories of HTML Tags

HTML tags can be broadly categorized into the following types.

1. Structural Tags

These tags define the structure of a document. Common structural tags include:

<html>: The root of the document.
<head>: Contains metadata and links to resources.
<body>: Contains the visible content.

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

2. Heading Tags

Heading tags range from <h1> to <h6> and are used to define headings of different levels.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>

3. Text Formatting Tags

These tags style or format text within an HTML document.

Tag	Description	Example
`<p>`	Paragraph	`<p>This is a paragraph.</p>`
`<b>`	Bold text	`<b>Bold Text</b>`
`<i>`	Italics	`<i>Italic Text</i>`
`<u>`	Underlined text	`<u>Underlined Text</u>`
`<mark>`	Highlighted text	`<mark>Highlighted Text</mark>`
`<small>`	Smaller text	`<small>Small Text</small>`
`<strong>`	Strong importance	`<strong>Important</strong>`
`<em>`	Emphasized text	`<em>Emphasized Text</em>`

4. Link and Anchor Tags

Use the <a> tag to create hyperlinks to other pages or resources.

<a href="https://www.example.com" target="_blank">Visit Example</a>

href: Specifies the URL.

target="_blank": Opens the link in a new tab.

5. Image Tags

The <img> tag is used to embed images. It is a void tag.

<img src="image.jpg" alt="Sample Image" width="300">

src: Specifies the image source.

alt: Provides alternative text for accessibility.

width and height: Define the dimensions of the image.

6. List Tags

HTML supports ordered and unordered lists.

// unordered list

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// ordered list

<ol>
  <li>First Item</li>
  <li>Second Item</li>
</ol>

7. Table Tags

The <table> tag is used to create tables in HTML.

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

8. Form Tags

Forms allow users to submit data to a server.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

9. Semantic Tags

Semantic tags provide meaning to the content they enclose.

Tag	Purpose
`<header>`	Defines a header
`<footer>`	Defines a footer
`<article>`	Self-contained content
`<section>`	A thematic grouping
`<aside>`	Sidebar content
`<nav>`	Navigation links

Example:

<article>
  <h2>Article Title</h2>
  <p>This is the article content.</p>
</article>

Commonly Used HTML Tags

Below is a list of commonly used HTML tags and their purposes:

Tag	Purpose
`<div>`	Defines a division or container
`<span>`	Inline container for text
`<br>`	Inserts a line break
`<hr>`	Inserts a horizontal rule
`<meta>`	Provides metadata about the document
`<title>`	Sets the title of the page
`<script>`	Embeds JavaScript code
`<style>`	Embeds CSS styles

Advanced HTML Tags

1. Multimedia Tags

<audio>: Embeds audio content.
<video>: Embeds video content.

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

2. Iframe Tag

The <iframe> tag embeds another webpage within the current page.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

3. Canvas and SVG

<canvas>: Used for drawing graphics via JavaScript.
<svg>: Scalable vector graphics.

<canvas id="myCanvas" width="400" height="200"></canvas>

Best Practices for Using HTML Tags

Use semantic tags to improve readability and accessibility.
Avoid deprecated tags like <font> and <center>.
Validate HTML code to ensure compliance with standards.
Use descriptive alt attributes for images.
Keep structure and styling separate (use CSS for styling).

HTML Tag	Description
`<!DOCTYPE>`	Defines the document type and version of HTML.
`<html>`	The root element of an HTML document.
`<head>`	Contains metadata, links to stylesheets, and other resources.
`<title>`	Specifies the title of the document, displayed in the browser tab.
`<meta>`	Provides metadata about the HTML document (e.g., charset, viewport settings).
`<link>`	Links external resources like stylesheets.
`<style>`	Embeds CSS styles within the document.
`<body>`	Contains the visible content of the HTML document.
`<h1>` to `<h6>`	Defines headings from the largest (`<h1>`) to the smallest (`<h6>`).
`<p>`	Defines a paragraph of text.
`<br>`	Inserts a line break.
`<hr>`	Inserts a horizontal rule (line).
`<div>`	Defines a division or section in the document.
`<span>`	An inline container used for grouping text or elements.
`<a>`	Defines a hyperlink to another page or resource.
`<img>`	Embeds an image in the document.
`<ul>`	Defines an unordered (bulleted) list.
`<ol>`	Defines an ordered (numbered) list.
`<li>`	Defines a list item within `<ul>` or `<ol>`.
`<table>`	Defines a table.
`<tr>`	Defines a row in a table.
`<td>`	Defines a cell in a table row.
`<th>`	Defines a table header cell.
`<caption>`	Adds a caption to a table.
`<form>`	Defines an interactive form for user input.
`<input>`	Defines an input field.
`<textarea>`	Defines a multi-line text input field.
`<button>`	Creates a clickable button.
`<label>`	Labels an input element for accessibility.
`<select>`	Defines a dropdown list.
`<option>`	Defines an option in a dropdown list.
`<iframe>`	Embeds another HTML document inside the current document.
`<script>`	Embeds or references JavaScript code.
`<noscript>`	Provides fallback content for browsers that don’t support JavaScript.
`<audio>`	Embeds audio content.
`<video>`	Embeds video content.
`<source>`	Specifies media resources for `<audio>` or `<video>`.
`<track>`	Specifies text tracks for `<video>` and `<audio>`.
`<canvas>`	Provides a container for graphics drawn via JavaScript.
`<svg>`	Embeds scalable vector graphics.
`<header>`	Defines a header section for a document or section.
`<footer>`	Defines a footer section for a document or section.
`<article>`	Defines self-contained content, such as an article.
`<section>`	Defines a thematic grouping of content.
`<nav>`	Defines navigation links.
`<aside>`	Defines content tangentially related to the main content.
`<main>`	Specifies the primary content of the document.
`<details>`	Creates a collapsible section.
`<summary>`	Provides a summary for the `<details>` element.
`<mark>`	Highlights text.
`<strong>`	Denotes strong importance.
`<em>`	Emphasizes text.
`<code>`	Displays code snippets.
`<pre>`	Displays preformatted text.
`<blockquote>`	Indicates a quoted section of text.
`<cite>`	Defines a reference to a title or source.
`<abbr>`	Defines an abbreviation or acronym.
`<address>`	Specifies contact information.
`<time>`	Defines a specific time or date.
`<q>`	Defines an inline quotation.
`<small>`	Represents side comments or small print text.
`<sup>`	Displays superscript text.
`<sub>`	Displays subscript text.
`<del>`	Represents deleted text.
`<ins>`	Represents inserted text.
`<b>`	Displays bold text.
`<i>`	Displays italicized text.
`<u>`	Underlines text.
`<s>`	Strikes through text.
`<wbr>`	Specifies a line break opportunity.
`<kbd>`	Represents keyboard input.
`<var>`	Represents a variable in programming or math.

<bdi> Isolates a span of text that might be formatted differently in a bidirectional text context.

<bdo> Overrides the default text direction.

<rp> Provides fallback content for browsers that do not support ruby annotations.

<rt> Specifies the text for ruby annotations, which provide pronunciation or meaning.

<ruby> Represents ruby annotations, used for East Asian typography.

<data> Links content with machine-readable data.

<datalist> Provides a list of predefined options for an <input> element.

<fieldset> Groups related form elements together.

<legend> Provides a caption for a <fieldset>.

<output> Represents the result of a calculation or user action.

<progress> Represents the progress of a task.

<meter> Displays a scalar measurement within a known range.

<template> Defines HTML fragments that can be cloned and inserted into the DOM dynamically.

<slot> Serves as a placeholder for web components to define where child content should go.

<dialog> Represents a dialog box or interactive component.

<picture> Provides multiple sources for an image for responsive or adaptive design.

<map> Defines a client-side image map.

<area> Defines an area inside an image map that acts as a hyperlink.

<embed> Embeds external content, such as a plugin or interactive object.

<object> Embeds external resources like multimedia, apps, or documents.

<param> Specifies parameters for an <object> element.

<base> Specifies the base URL for relative URLs in the document.

<noscript> Displays content for users with JavaScript disabled.

<noframes> Specifies fallback content for browsers that do not support <frame> or <iframe>.

<frame> Defines a particular area in a <frameset>. Deprecated in HTML5.

<frameset> Defines a set of <frame> elements. Deprecated in HTML5.

<iframe> Embeds another HTML document within the current page.

<ins> Indicates inserted text.

<del> Indicates text that has been deleted.

<marquee> Creates a scrolling piece of text or image. Deprecated in HTML5.

<tt> Displays text in a monospace font. Deprecated in HTML5.

<center> Centers content horizontally. Deprecated in HTML5.

<article> Defines independent, self-contained content like blog posts.

<section> Represents a thematic grouping of content, typically with a heading.

<nav> Defines navigation links.

<aside> Contains content tangentially related to the main content.

<main> Specifies the main content of the document.

<figure> Groups media content like images or diagrams with a <figcaption>.

<figcaption> Provides a caption for a <figure> element.

<header> Represents introductory content or navigation links.

<footer> Defines footer content for a document or section.

<time> Represents a specific point in time or a duration.

Conclusion

HTML tags form the foundation of web pages. Understanding their purposes, attributes, and best practices ensures that your content is structured, accessible, and visually appealing. Whether you’re creating a simple static page or a complex web application, mastering HTML tags is essential for web development.

Check our free: Tailwind UI Design Components

Tags in HTML