Turning Learners into Developers
- 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 |
|---|---|---|
| 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>© 2025</small> |
<sub> | Subscript text. | H<sub>2</sub>O |
<sup> |
| 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 | <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 | <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> |
