Useful HTML Tags: Details and Examples
A reference to standard HTML tags. Examples show basic markup; table fragments belong inside a table. In LWC, place suitable markup inside the component’s root template and add JavaScript for interactive behavior.
01Text and Headings
| HTML Tag | Details | Example |
|---|---|---|
<h1>–<h6> |
Headings, from highest to lowest level. | <h2>Student Details</h2> |
<p> |
Paragraph of text. | <p>Welcome to the course.</p> |
<span> |
Inline text grouping. | <span>Active</span> |
<strong> |
Important text. | <strong>Required</strong> |
<em> |
Emphasized text. | <em>Please check your details.</em> |
<br> |
Line break. | Line one<br>Line two |
<hr> |
Thematic break between content. | <hr> |
<small> |
Small print or side notes. | <small>Terms apply.</small> |
<code> |
Code or tag names. | <code>studentName</code> |
<pre> |
Preformatted text that preserves spacing. | <pre>Line one Line two</pre> |
02Content Structure
| HTML Tag | Details | Example |
|---|---|---|
<div> |
General container for layout or styling. | <div class="content">Student details</div> |
<section> |
A related section of content, usually with a heading. | <section><h2>Courses</h2><p>Available courses</p></section> |
<article> |
Self-contained content. | <article><h2>HTML Basics</h2><p>Article text</p></article> |
<header> |
Introductory content for a page or section. | <header><h2>Student Portal</h2></header> |
<footer> |
Closing information for a page or section. | <footer>Published by SFDCINDIA</footer> |
<nav> |
A group of navigation links. | <nav><a href="/courses">Courses</a></nav> |
<aside> |
Related supporting content. | <aside>Related courses</aside> |
03Lists
| HTML Tag | Details | Example |
|---|---|---|
<ul> |
Unordered list. | <ul><li>Admin</li><li>Development</li></ul> |
<ol> |
Ordered list. | <ol><li>Register</li><li>Join</li></ol> |
<li> |
Item inside an unordered or ordered list. | <ul><li>HTML</li></ul> |
<dl> |
Description list. | <dl><dt>HTML</dt><dd>Markup language</dd></dl> |
<dt> |
Term in a description list. | <dl><dt>Course</dt><dd>HTML Basics</dd></dl> |
<dd> |
Description of a term. | <dl><dt>Fee</dt><dd>Contact us</dd></dl> |
04Links and Images
| HTML Tag | Details | Example |
|---|---|---|
<a> |
Link to a destination. | <a href="/courses">View courses</a> |
<img> |
Image; provide appropriate alternative text. | <img src="course.png" alt="HTML course"> |
<figure> |
Self-contained media or illustration. | <figure><img src="course.png" alt="Course overview"><figcaption>HTML course</figcaption></figure> |
<figcaption> |
Caption for a figure. | <figure><img src="course.png" alt="Course overview"><figcaption>Course overview</figcaption></figure> |
05Forms and Inputs
| HTML Tag | Details | Example |
|---|---|---|
<form> |
Groups form controls for submission. | <form><label for="name">Name</label><input id="name" name="name"><button type="submit">Submit</button></form> |
<label> |
Accessible label for a form control. | <label for="email">Email</label><input id="email" type="email"> |
<input> |
Text, checkbox, radio or another input type. | <input type="email" aria-label="Email" required> |
<textarea> |
Multiline text input. | <textarea aria-label="Message" rows="4"></textarea> |
<select> |
Selection control. | <select aria-label="Course"><option>HTML</option></select> |
<option> |
Choice in a select control. | <select aria-label="Course"><option value="html">HTML</option></select> |
<button> |
Interactive button. | <button type="button">Save</button> |
<fieldset> |
Groups related form controls. | <fieldset><legend>Contact</legend><input aria-label="Email" type="email"></fieldset> |
<legend> |
Caption for a fieldset. | <fieldset><legend>Preferences</legend></fieldset> |
06Tables
| HTML Tag | Details | Example |
|---|---|---|
<table> |
Tabular data. | <table><tr><th>Course</th></tr><tr><td>HTML</td></tr></table> |
<caption> |
Title or description of a table. | <table><caption>Courses</caption><tr><td>HTML</td></tr></table> |
<thead> |
Table header rows. | <thead><tr><th>Course</th></tr></thead> |
<tbody> |
Table body rows. | <tbody><tr><td>HTML</td></tr></tbody> |
<tfoot> |
Table footer rows. | <tfoot><tr><td>Total: 1 course</td></tr></tfoot> |
<tr> |
Table row. | <tr><td>HTML</td><td>Beginner</td></tr> |
<th> |
Header cell. | <th scope="col">Course</th> |
<td> |
Data cell. | <td>HTML Basics</td> |
07Templates and Disclosure
| HTML Tag | Details | Example |
|---|---|---|
<template> |
Stores a fragment for later use. LWC also uses it as the component template root. | <template><p>Reusable content</p></template> |
<slot> |
Defines a content insertion point in a web component. | <slot name="actions">Default content</slot> |
<details> |
Expandable content. | <details><summary>Course details</summary><p>Learn HTML basics.</p></details> |
<summary> |
Visible label for a details element. | <details><summary>Read more</summary><p>More information</p></details> |
08More Useful HTML Elements
| HTML Tag | Details | Example |
|---|---|---|
time |
Date or time with a machine-readable value. | <time datetime="2026-09-14">14 September 2026</time> |
abbr |
An abbreviation with its full meaning. | <abbr title="HyperText Markup Language">HTML</abbr> |
mark |
Highlights relevant text. | <mark>Important</mark> |
progress |
Shows task progress. | <progress value="60" max="100">60%</progress> |
audio |
Embeds audio playback with browser controls. | <audio controls src="lesson.mp3"></audio> |
video |
Embeds video playback with browser controls. | <video controls src="lesson.mp4"></video> |