Bootstrap demo

HTML Tags Reference Guide

Comprehensive guide to HTML tags, their types, attributes, and examples

Table of Contents

Structural Tags

<html> Block-level

The root element of an HTML document. All other HTML elements are contained within this element.

Attributes:

Attribute Description Values
lang Specifies the language of the document Language code (e.g., "en", "fr", "es")
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document Title</title>
</head>
<body>
  <!-- Content -->
</body>
</html>
<head> Block-level

define meta tags and title

Attributes:

Attribute Description Values
meta use for SEO keyword,description
title set page title description of page
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document Title</title>
</head>
<body bgcolor="red">
  <!-- Content -->
</body>
</html>
<body> Block-level

Use to display HTML elements.

Attributes:

Attribute Description Values
bgcolor change body color red,green
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document Title</title>
</head>
<body bgcolor="red">
  <!-- Content -->
</body>
</html>
<div> Block-level

A generic container for flow content. It has no effect on the content or layout until styled with CSS.

Common Attributes:

Attribute Description
id Specifies a unique id for an element
class Specifies one or more class names for an element
style Specifies an inline CSS style for an element
<div class="container">
  <p>This is inside a div container</p>
</div>

This is inside a div container

Text Formatting Tags

<h1> to <h6> Block-level

HTML headings. <h1> defines the most important heading, and <h6> defines the least important heading.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<p> Block-level

Defines a paragraph of text.

<p>This is a paragraph of text. It can contain <strong>bold text</strong>, <em>italic text</em>, and other inline elements.</p>

This is a paragraph of text. It can contain bold text, italic text, and other inline elements.

<a> Inline

Defines a hyperlink, which is used to link from one page to another.

Attributes:

Attribute Description
href Specifies the URL of the page the link goes to
target Specifies where to open the linked document (_blank, _self, _parent, _top)
rel Specifies the relationship between the current document and the linked document
<a href="https://www.example.com" target="_blank" rel="noopener">Visit Example.com</a>
Visit Example.com

Media Tags

<img> Inline

Embeds an image into the document. This is a self-closing tag.

Attributes:

Attribute Description
src Specifies the path to the image
alt Specifies an alternate text for the image
width Specifies the width of the image
height Specifies the height of the image
<img src="image.jpg" alt="Description of image" width="300" height="200">
<video> Block-level

Embeds a media player which supports video playback into the document.

Attributes:

Attribute Description
src Specifies the source URL of the video
controls Shows video controls (play, pause, etc.)
width Sets the width of the video player
height Sets the height of the video player
autoplay Video plays automatically when ready
loop Video restarts when finished
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

List Tags

<ul> Block-level

Defines an unordered (bulleted) list.Type (square, circle, disk)

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
  • First item
  • Second item
  • Third item
<ol> Block-level

Defines an ordered (numbered) list.

Attributes:

Attribute Description
type Specifies the kind of marker to use (1, A, a, I, i)
start Specifies the start value of the first list item
reversed Specifies that the list order should be descending
<ol type="1">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
  1. First item
  2. Second item
  3. Third item

Table Tags

<table> Block-level

Defines an HTML table for organizing data.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>
Name Age
John 25

Form Tags

<form> Block-level

Defines an HTML form for user input.

Attributes:

Attribute Description
action Specifies where to send the form-data when form is submitted
method Specifies the HTTP method to use (GET or POST)
target Specifies where to display the response after submitting the form
<form action="/submit" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <input type="submit" value="Submit">
</form>
<input> Inline

Defines an input control for user input. This is a self-closing tag.

Attributes:

Attribute Description
type Specifies the type of input (text, password, submit, radio, checkbox, etc.)
name Specifies the name of an input element
value Specifies the value of an input element
placeholder Specifies a short hint that describes the expected value
<input type="text" id="username" name="username" placeholder="Enter your username">

Semantic Tags

<header> Block-level

Represents introductory content, typically a group of introductory or navigational aids.

<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>
<footer> Block-level

Represents a footer for its nearest sectioning content or root element.

<footer>
  <p>© 2023 Company Name. All rights reserved.</p>
  <p>Contact: info@company.com</p>
</footer>

Interactive Tags

<details> Block-level

Creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.

<details>
  <summary>Click to expand</summary>
  <p>This is the hidden content that appears when you click the summary.</p>
</details>
Click to expand

This is the hidden content that appears when you click the summary.

<dialog> Block-level

Represents a dialog box or other interactive component.

<dialog id="myDialog">
  <p>This is a dialog box!</p>
  <button id="closeDialog">Close</button>
</dialog>
<button id="showDialog">Show Dialog</button>

<script>
  const dialog = document.getElementById('myDialog');
  document.getElementById('showDialog').addEventListener('click', () => {
    dialog.showModal();
  });
  document.getElementById('closeDialog').addEventListener('click', () => {
    dialog.close();
  });
</script>