Basic Structure Tags
| Tag | Use / Explanation |
|---|---|
<html> | Starts of HTML document |
<head> | Contains metadata,CSS, title, and links |
<title> | Browser tab title |
<meta> | Defines metadata like charset, SEO, viewport |
<link> | Link to CSS or favicon |
<style> | Internal CSS styling |
<script> | script used for JavaScript code |
<base> | Sets Base URL |
Page Body and Layout Tags
| Tag | Use / Explanation |
|---|---|
<body> | Define visible content of the webpage |
<header> | Top header section |
<nav> | Navigation links |
<main> | Main content of the page |
<section> | Divides content into sections |
<article> | Independent content like blog post |
<aside> | Side content (ads, tips) |
<footer> | Footer is the bottom section of page |
<div> | Generic block container |
<span> | Generic inline container |
Text Formatting Tags
| Tag | Use / Explanation |
|---|---|
<h1> to <h6> | Headings (h1 is the largest) |
<p> | Paragraph |
<br> | Line break |
<hr> | Horizontal line |
<strong> | Bold text (semantic meaning) |
<b> | Bold (visual only) |
<em> | Emphasized text (italic with meaning) |
<i> | Italic text (no semantic meaning) |
<u> | Underlined text |
<mark> | Highlighted text |
<small> | Smaller text |
<del> | Deleted text (strike-through) |
<ins> | Inserted text (usually underlined) |
<sub> | Subscript (e.g., H2O) |
<sup> | Superscript (e.g., x2) |
<abbr> | Abbreviation (with tooltip) |
<q> | Short inline quote |
<blockquote> | Block-level quote |
<code> | Inline code snippet |
<pre> | Preformatted text |
<kbd> | Keyboard input (e.g., Ctrl + C) |
<samp> | Sample output |
<var> | Variable name (in code) |
Lists Tags
| Tag | Use / Explanation |
|---|---|
<ul> | Unordered list (bullets) |
<ol> | Ordered list (numbers) |
<li> | List item (used inside ul/ol) |
<dl> | Description list |
<dt> | Term |
<dd> | Description |
Hyperlink and Media Tags
| Tag | Use / Explanation |
|---|---|
<a> | Define a hyperlink used to navigate to another page |
<img> | Image |
<map> | Image map (clickable areas) |
<area> | Clickable area in image |
<figure> | Image with caption |
<figcaption> | Image caption |
<audio> | Audio embed |
<video> | Video embed |
<source> | Source for audio/video |
<track> | Subtitles or captions in video |
<iframe> | Embed another webpage (YouTube, etc.) |
Forms and Input Tags
| Tag | Use / Explanation |
|---|---|
<form> | Used to create a form for user input |
<input> | Single-line user input field (text, email, checkbox, etc.) |
<label> | Input label |
<textarea> | Multiline input |
<button> | Clickable button in page (submit, reset, etc.) |
<select> | Dropdown menu |
<option> | Define option item inside a dropdown |
<optgroup> | Define groups related options inside a dropdown |
<fieldset> | Groups multiple form elements |
<legend> | Title for fieldset |
<datalist> | Provides Input suggestions |
<output> | Form output |
<progress> | Progress bar |
<meter> | Gauge bar for a known range |
Tables Tags
| Tag | Use / Explanation |
|---|---|
<table> | Define starts a table |
<tr> | Table row |
<td> | Table data(cell) |
<th> | Table heading |
<thead> | Define groups the header content of the table |
<tbody> | Define the body content of the table |
<tfoot> | Footer content of the table |
<caption> | Table caption or title |
<col> | Column |
<colgroup> | Group columns |
Semantic / HTML5 Tags
| Tag | Use / Explanation |
|---|---|
<main> | Main tag define the main content of the page |
<section> | Logical section |
<article> | Blog or news |
<nav> | Navigation |
<aside> | Side content (e.g., sidebar, ads) |
<header> | Header of page or section |
<footer> | Footer of page or section |
<figure> | Media with caption |
<figcaption> | Caption for figure |
<time> | Date/time |
Embedded Content Tags
| Tag | Use / Explanation |
|---|---|
<embed> | The html embeds tags is used to embeds the external content like videos, PDFs, or other media |
<object> | Multimedia or app |
<param> | Defines parameters for an <object> element |
<canvas> | Canvas tags is used to creates a drawable region for 2D graphics via JavaScript |
<svg> | Scalable vector graphics(for shapes, icons, charts) |
Scripting and Data Tags
| Tag | Use / Explanation |
|---|---|
<script> | Defines JavaScript code within the HTML page or links to an external script |
<noscript> | Show when JS not supported |
<template> | Hidden content |
<slot> | Web components |
<canvas> | 2D drawing (JS) |
Meta / SEO Tags (Inside <head>)
| Tag | Use / Explanation |
|---|---|
<meta> | meta tag defines metadata (character set, description, keywords, etc.) for SEO and browser |
<title> | Displayed in the browser tab and utilized by search engine |
<link> | References external resources such as style sheets or icons |
<style> | Permits internal CSS to be included in the <head> |