• Basic Structure Tags

Tag

Description

Example

<!DOCTYPE html>

Defines document type as HTML5.

<!DOCTYPE html>

<html>

Root element of HTML document.

<html>...</html>

<head>

Contains metadata, title, and linked resources.

<head><title>My Page</title></head>

<title>

Sets the page title (appears on browser tab).

<title>Home</title>

<meta>

Provides metadata like description, charset, etc.

<meta charset="UTF-8">

<link>

Links external resources (e.g., CSS).

<link rel="stylesheet" href="style.css">

<script>

Embeds JavaScript code or file.

<script src="app.js"></script>

<style>

Adds internal CSS styles.

<style>p{color:red;}</style>

<body>

Contains visible content of webpage.

<body>Content here</body>
  • Structural & Semantic Tags

Tag

Description

Example

<header>

Defines page or section header.

<header><h1>Welcome</h1></header>

<footer>

Defines footer of page or section.

<footer>© 2025 MySite</footer>

<main>

Represents main content.

<main>Article content</main>

<section>

 Defines a thematic section.

<section><h2>About</h2></section>

<article>

Independent content (blog, news, etc.).

<article><h2>Post</h2></article>

<aside>

Sidebar or secondary info.

<aside>Links</aside>

<nav>

Navigation menu.

<nav><a href="#">Home</a></nav>

<div>

Generic block container.

<div class="container"></div>

<span>

Generic inline container.

<span style="color:red;">Text</span>
  • Text Formatting Tags

Tag

Description

Example

<h1>–<h6>

Defines headings (h1 = largest).

<h1>Main Heading</h1>

<p>

Paragraph of text.

<p>Hello World!</p>

<br>

Inserts line break.

Line1<br>Line2

<hr>

Horizontal rule line.

<hr>

<b>

Bold text.

<b>Bold</b>

<i>

Italic text.

<i>Italic</i>

<u>

Underlined text.

<u>Underline</u>

<em>

Emphasized (semantic italic).

<em>Important</em>

<strong>

Strong importance (semantic bold).

<strong>Warning</strong>

<mark>

Highlighted text.

<mark>Note</mark>

<small>

Small text.

<small>© 2025</small>

<sub>

Subscript text.

H<sub>2</sub>O

<sup>

Superscript text.

x<sup>2</sup>

<del>

Deleted text.

<del>Old</del>

<ins>

Inserted text.

<ins>New</ins>
  • List Tags

Tag

Description

Example

<ul>

Unordered (bulleted) list.

<ul><li>Apple</li></ul>

<ol>

Ordered (numbered) list.

<ol><li>One</li></ol>

<li>

List item.

<li>Item</li>

<dl>

Description list.

<dl><dt>HTML</dt><dd>Markup</dd></dl>

<dt>

Term in description list.

<dt>CSS</dt>

<dd>

Description for term.

<dd>Style sheet</dd>
  • Table Tags

Tag

Description

Example

<table>

Creates a table.

<table><tr><td>Data</td></tr></table>

<tr>

Table row.

<tr><td>Row</td></tr>

<th>

Header cell.

<th>Name</th>

<td>

Data cell.

<td>Rahul</td>

<caption>

Table caption.

<caption>Student List</caption>

<thead>

Table header group.

<thead><tr><th>Title</th></tr></thead>

<tbody>

Table body group.

<tbody><tr><td>Data</td></tr></tbody>

<tfoot>

Table footer group.

<tfoot><tr><td>Total</td></tr></tfoot>
  • Form & Input Tags

Tag

Description

Example

<form>

Defines form area.

<form action="submit.php"></form>

<input>

Input field.

<input type="text" name="name">

<textarea>

Multiline text area.

<textarea></textarea>

<button>

Clickable button.

<button>Submit</button>

<select>

Dropdown menu.

<select><option>Yes</option></select>

<option>

Dropdown option.

<option>Option</option>

<label>

Label for input.

<label for="name">Name</label>

<fieldset>

Groups form fields.

<fieldset><legend>Login</legend></fieldset>

<legend>

Caption for fieldset.

<legend>Details</legend>

<datalist>

Predefined options for input.

<datalist id="list"><option>HTML</option></datalist>

<output>

Displays result of calculation.

<output>Result</output>
  • Multimedia & Graphics Tags

Tag

Description

Example

<audio>

Embeds audio.

<audio controls src="song.mp3"></audio>

<video>

Embeds video.

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

<source>

Defines media source.

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

<track>

Subtitles for video/audio.

<track src="sub.vtt" kind="subtitles">

<canvas>

Draw graphics with JS.

<canvas id="draw"></canvas>

<svg>

Defines vector graphics.

<svg><circle cx="50" cy="50" r="40"/></svg>

<figure>

Contains image or illustration.

<figure><img src="pic.jpg"><figcaption>Caption</figcaption></figure>

<figcaption>

Caption for figure.

<figcaption>Image caption</figcaption>
  • Link, Embed & Frame Tags

Tag

Description

Example

<a>

Creates hyperlink.

<a href="https://example.com">Visit</a>

<iframe>

Embeds external page/video.

<iframe src="https://youtube.com"></iframe>

<embed>

Embeds external content.

<embed src="file.pdf">

<object>

Embeds object (like PDF).

<object data="file.pdf"></object>

<param>

Defines parameter for <object>.

<param name="autoplay" value="true">
  • Interactive & Semantic Tags

Tag

Description

Example

<details>

Expandable content block.

<details><summary>Read More</summary><p>Info</p></details>

<summary>

Summary for <details>.

<summary>Click Here</summary>

<progress>

Shows task progress.

<progress value="70" max="100"></progress>

<meter>

Gauge or measurement.

<meter value="0.7"></meter>

<template>

Hidden reusable HTML.

<template><p>Hidden</p></template>

<time>

Represents time/date.

<time datetime="2025-11-13">Nov 13, 2025</time>

<data>

Links content with machine data.

<data value="101">Item</data>
  • Programming & Code Representation Tags

Tag

Description

Example

<code>

Inline code snippet.

<code>printf("Hi");</code>

<pre>

Preformatted text.

<pre>Code lines</pre>

<kbd>

Keyboard input.

<kbd>Ctrl</kbd> + <kbd>C</kbd>

<samp>

Sample output.

<samp>Hello</samp>

<var>

Variable in programming.

<var>x</var> = 10
  • Text Direction & Internationalization Tags

Tag

Description

Example

<bdi>

Isolates text for direction.

<bdi>اسم</bdi>

<bdo>

Overrides text direction.

<bdo dir="rtl">Text</bdo>

<wbr>

Word break opportunity.

super<wbr>longword
  • Scripting & Fallback Tags

Tag

Description

Example

<noscript>

Shown when JavaScript is disabled.

<noscript>Please enable JS.</noscript>
Newer
Computer Shortcut Keys List by CodeKilla
Back to list
Older From MS-DOS to Modern UI: The Story of Windows

Leave a Reply

Your email address will not be published. Required fields are marked *