HTML Tags
Here, you will understand HTML tags categorized by their function.This content explains common HTML tags in a clear, category-wise manner.
It covers structure, text formatting, links, lists, tables, forms, and media tags.
Semantic and meta tags help define the meaning and additional information of a webpage.
Overall, it serves as a simple and useful guide for beginners learning HTML.
1. Basic HTML Structure Tags
These tags form the basic structure of a webpage, such as <html>, <head>, and <body>.
Below is a simple example of basic HTML structure tags with a single-line explanation:
<html> : This is the root (start and end) of the HTML document.
<html lang="en"> …… </html>
<head> : It contains page information (metadata) that is not directly displayed on the screen.
<head>.....</head>
<title> : Sets the name of the page that appears on the browser tab.
<head>
<title>Mera First Web Page</title>
</head>
<body> : All the visible content of the website is contained within this.
<body>.....</body>
<meta> : It provides extra information about the page, such as the charset or the author.
<head>
<meta charset="UTF-8">
<meta name="author" content="Student">
</head>
<link> : It connects external files, such as CSS, to the HTML page.
<head>
<!-- External CSS file link -->
<link rel="stylesheet" href="style.css">
</head>
<style> : It is used to write CSS directly within the page.
<head>
<!-- Internal CSS -->
<style>
body {
background-color: lightblue;
font-family: Arial;
}
h1 {
color: darkblue;
}
</style>
</head>
<script> It is used to add JavaScript code.
<head>
<!-- JavaScript -->
<script>
function showMessage() {
alert("Welcome to my website!");
}
</script>
</head>
<noscript> : This message is displayed when JavaScript is disabled in the browser.
<body>
<!-- Message if JavaScript is disabled -->
<noscript>
Please enable JavaScript to use this website properly.
</noscript>
</body>
-
Complete basic HTML page structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Student">
<title>Mera First Web Page</title>
<!-- External CSS file link -->
<link rel="stylesheet" href="style.css">
<!-- Internal CSS -->
<style>
body {
background-color: lightblue;
font-family: Arial;
}
h1 {
color: darkblue;
}
</style>
<!-- JavaScript -->
<script>
function showMessage() {
alert("Welcome to my website!");
}
</script>
</head>
<body>
<h1>Hello World</h1>
<p>Yeh mera first HTML page hai.</p>
<button onclick="showMessage()">Click Me</button>
<!-- Message if JavaScript is disabled -->
<noscript>
Please enable JavaScript to use this website properly.
</noscript>
</body>
</html>
2. Text Formatting Tags
In tags se text ko bold, italic, underline ya highlight kiya jata hai.
Below is the Text Formatting Tags in HTML explained in simple English, with one-line definitions and examples 👇
<h1> : Displays the largest heading on the page.
<h1>This is Heading 1</h1>
<h2> : Displays the second-level heading.
<h2>This is Heading 2</h2>
<h3> : Displays the third-level heading.
<h3>This is Heading 3</h3>
<h4> : Displays the fourth-level heading.
<h4>This is Heading 4</h4>
<h5> : Displays the fifth-level heading.
<h5>This is Heading 5</h5>
<h6> : Displays the smallest heading.
<h6>This is Heading 6</h6>
<p> : Defines a paragraph of text.
<p>This is a paragraph of text.</p>
<br> Inserts a line break.
<p>Hello<br>World (using line break)</p>
<hr> : Inserts a horizontal line.
<hr>
<strong> : Shows important text in bold.
<p><strong>This text is strong and important</strong></p>
<b> : Makes text bold without extra importance.
<p><b>This text is bold</b></p>
<em> : Emphasizes text and displays it in italic.
<p><em>This text is emphasized</em></p>
<i> : Displays text in italic style only.
<p><i>This text is italic</i></p>
<mark> : Highlights text.
<p><mark>This text is highlighted</mark></p>
<small> : Displays smaller text.
<p><small>This is small text</small></p>
<del> : Shows deleted or removed text with a line through it.
<p><del>This text is deleted</del></p>
<ins> : Shows inserted text with an underline.
<p><ins>This text is inserted</ins></p>
<sub> : Displays subscript text (below the line).
<p>Water formula: H<sub>2</sub>O</p>
<sup> : Displays superscript text (above the line).
<p>Math example: x<sup>2</sup></p>
<code> : Displays programming code in a monospace font.
<p>Code example:</p>
<code>console.log("Hello World");</code>
<pre> : Preserves spaces and line breaks exactly as written.
<p>Preformatted text:</p>
<pre>
Line 1
Line 2 with spaces
Line 3
</pre>
<blockquote> : Used for long quotations.
<blockquote>
"This is a blockquote example for long quotations."
</blockquote>
<q> : Used for short inline quotations.
<p>This is a <q>short inline quote</q> example.</p>
Complete basic HTML page structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Formatting Tags Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<p>HTML Text Formatting Tags Demo</p>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<hr>
<p>This is a paragraph of text.</p>
<p>Hello<br>World (using line break)</p>
<hr>
<p><strong>This text is strong and important</strong></p>
<p><b>This text is bold</b></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<hr>
<p><mark>This text is highlighted</mark></p>
<p><small>This is small text</small></p>
<p><del>This text is deleted</del></p>
<p><ins>This text is inserted</ins></p>
<hr>
<p>Water formula: H<sub>2</sub>O</p>
<p>Math example: x<sup>2</sup></p>
<hr>
<p>Code example:</p>
<code>console.log("Hello World");</code>
<hr>
<p>Preformatted text:</p>
<pre>
Line 1
Line 2 with spaces
Line 3
</pre>
<hr>
<blockquote>
"This is a blockquote example for long quotations."
</blockquote>
<p>This is a <q>short inline quote</q> example.</p>
</body>
</html>
3. Links & Images
<a> link banane ke liye aur <img> image dikhane ke liye use hota hai.
<a> : Creates a clickable hyperlink to another page or resource.
<a href="https://qlcd.blogspot.com/" target="_blank">Visit Quick Learn Code Website</a>
<img> : Displays an image on the webpage.
<img src="https://qlcd.blogspot.com/" alt="Sample Image">
<map> : Defines an image map with clickable areas.
<img src="https://qlcd.blogspot.com/" usemap="#map1" alt="Map Image">
<map name="map1">
<area shape="rect" coords="0,0,100,100" href="https://qlcd.blogspot.com/" alt="Area 1">
</map>
<area> : Defines a clickable area inside an image map.
<area shape="rect" coords="0,0,50,50" href="#">
<audio> : Embeds audio content with playback controls.
<audio controls>
<source src="https://qlcd.blogspot.com/song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<video> : Embeds a video with playback controls.
<video controls width="300">
<source src="https://qlcd.blogspot.com/video.mp4" type="video/mp4">
<track src="subs.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support video.
</video>
<source> : Specifies media files for audio or video elements.
<video controls width="300">
<source src="https://qlcd.blogspot.com/video.mp4" type="video/mp4">
<track src="subs.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support video.
</video>
<track> : Adds subtitles or captions to video or audio.
<video controls width="300">
<source src="https://qlcd.blogspot.com/video.mp4" type="video/mp4">
<track src="subs.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support video.
</video>
<iframe> : Embeds another webpage inside the current page.
<iframe src="https://qlcd.blogspot.com/"></iframe>
<embed> : Embeds external content like media or plugins.
<embed src="https://qlcd.blogspot.com/file.swf" width="300" height="200">
<object> : Embeds external objects such as multimedia files.
<object data="https://qlcd.blogspot.com/file.swf" width="300" height="200">
<param name="autoplay" value="true">
</object>
<param> : Sets parameters for an <object> element.
<object data="https://qlcd.blogspot.com/file.swf" width="300" height="200">
<param name="autoplay" value="true">
</object>
<picture> : Displays responsive images based on screen size or format.
<picture>
<source srcset="https://qlcd.blogspot.com/" type="image/webp">
<img src="https://qlcd.blogspot.com/" alt="Responsive Image">
</picture>
<canvas> : Used to draw graphics using JavaScript.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "lightblue";
ctx.fillRect(20, 20, 150, 50);
ctx.fillStyle = "black";
ctx.fillText("Quick Learn Code", 50, 50);
</script>
4. Lists
HTML lists are used to display content in an organized and structured way using bullet points, numbers, or descriptions.
[i] Unordered List (<ul>) – Displays items with bullet points. <li>..</li>
[ii] Ordered List (<ol>) – Displays items with numbers or letters .<li>..</li>
[iii] Description List (<dl>) – Displays terms and their descriptions. <dd>..</dd>, <dt>..</dt>
<ul> : Creates an unordered list (bullets).
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<ol> : Creates an ordered list (numbers or letters).
<ol>
<li>First Step</li>
<li>Second Step</li>
<li>Third Step</li>
</ol>
<li> : Defines a single item inside <ul> or <ol>.
<li>Second Step</li>
<dl> : Creates a description (definition) list.
<dl>
<dt>HTML</dt>
<dd>Used to create web pages</dd>
<dt>CSS</dt>
<dd>Used to style web pages</dd>
</dl>
<dt> : Defines a term or name in a description list.
<dt>HTML</dt>
<dd> : Defines the description of a term in a description list.
<dd>Used to create web pages</dd>
Complete basic HTML List
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First Step</li>
<li>Second Step</li>
<li>Third Step</li>
</ol>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>Used to create web pages</dd>
<dt>CSS</dt>
<dd>Used to style web pages</dd>
</dl>
</body>
</html>
5. HTML Tables
HTML tables are used to organize and display data in a grid of rows and columns on a webpage.
[i] Each row is defined with <tr>.
[ii] Each cell is defined with <td> (data cell) or <th> (header cell).
[iii] Optional elements like <caption>, <thead>, <tbody>, and <tfoot> help structure the table for better readability.
<table> : Defines a table to display data in rows and columns.
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
</table>
<tr> : Defines a row in a table.
<tr>
<td>Alice</td>
<td>85</td>
</tr>
<td> : Defines a data cell in a table.
<td>Data</td>
<caption>Student Marks</caption>
<th> : Defines a header cell in a table (bold and centered by default).
<th>Header</th>
<th>Student Marks</th>
<caption> : Adds a title or caption to the table.
<caption>Student Marks</caption>
<thead> : Groups the header content of a table.
<thead>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody> : Groups the main body content of a table.
<tbody>
<tr>
<td>Alice</td>
<td>85</td>
</tr>
<tr>
<td>Bob</td>
<td>90</td>
</tr>
</tbody>
<tfoot> : Groups the footer content of a table.
<tfoot>
<tr>
<td>Total</td>
<td>175</td>
</tr>
</tfoot>
Complete basic HTML Table
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
<style>
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
caption {
font-weight: bold;
margin-bottom: 8px;
}
</style>
</head>
<body>
<table>
<caption>Student Marks</caption>
<thead>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>85</td>
</tr>
<tr>
<td>Bob</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>175</td>
</tr>
</tfoot>
</table>
</body>
</html>
6. HTML Forms
<form> : Creates a form to collect user input.
<form action="#" method="post">
<input type="text" id="text" placeholder="Enter text">
</form>
<input> : Defines a single-line input field (text, password, checkbox, etc.).
<input type="text" id="text" placeholder="Enter text">
<textarea> : Defines a multi-line text input.
<textarea placeholder="Write here..."></textarea>
<button> : Defines a clickable button.
<button>Click Me</button>
<select> : Creates a dropdown list.
<select id="dropdown">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<option> : Defines an item in a dropdown list.
<option value="1">Option 1</option>
<label> : Defines a label for an input element.
<label for="text">Text:</label>
<input type="text" id="text" placeholder="Enter text">
<fieldset> : Groups related form elements.
<fieldset>
<legend>Basic Inputs</legend>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="example@mail.com">
</fieldset>
<legend> : Defines a title for a <fieldset>.
<legend>Basic Inputs</legend>
<datalist> : Provides predefined options for an input field.
<label for="browser">Choose a browser (datalist):</label>
<input list="browsers" id="browser" placeholder="Type browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<output> : Displays the result of a form calculation.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<legend>Form output</legend>
<label for="a">Number 1:</label>
<input type="number" id="a" value="0">
<label for="b">Number 2:</label>
<input type="number" id="b" value="0">
<label>Sum:</label>
<output name="result" id="result">0</output>
</form>
<progress> : Displays a progress bar.
<label>File Upload Progress:</label>
<progress value="70" max="100"></progress>
<meter>
Definition: Displays a scalar measurement within a known range.
<meter> represents a measurement or fraction of a known maximum value, typically between 0 and 1 or any defined min/max.
Attributes
[i] value → Current measurement (required)
[ii] min → Minimum value (default is 0)
[iii] max → Maximum value (default is 1)
[iv] low → Lower bound of the "low" range
[v] high → Upper bound of the "high" range
[vi] optimum → Optimal value
Example
<label>Completion:</label>
<meter value="0.6">60%</meter>
Example with Min/Max
<label>Disk Usage:</label>
<meter value="45" min="0" max="100">45%</meter>
[i] Here the meter shows 45% of disk used.
[ii] Can be styled with CSS for colors, height, and width.
text : Single-line text input.
<input type="text" id="text" placeholder="Enter text">
password : Hidden text input for passwords.
<input type="password" id="password" placeholder="Enter password">
email : Input for email addresses; validates format.
<input type="email" id="email" placeholder="example@mail.com">
url : Input for website URLs; validates URL format.
<input type="url" id="url" placeholder="https://example.com">
tel : Input for telephone numbers.
<input type="tel" id="tel" placeholder="+1234567890">
number : Input for numeric values; supports min, max, step.
<input type="number" id="number" min="0" max="100">
range : Slider to select a number within a range.
<input type="range" id="range" min="0" max="100" value="50">
date : Select a date using a calendar.
<input type="date" id="date">
time : Select a time.
<input type="time" id="time">
datetime-local : Select date and time (without timezone).
<input type="datetime-local" id="datetime">
month : Select a month and year.
<input type="month" id="month">
week : Select a week and year.
<input type="week" id="week">
color : Select a color.
<input type="color" id="color" value="#ff0000">
checkbox : Select one or more options.
<label>Checkbox:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="music"> Music
radio : Select one option from multiple choices.
<label>Radio:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
file : Select a file to upload.
<input type="file" id="file">
hidden : Hidden input field (not visible).
<input type="hidden" id="userid" value=”12323">
submit : Submit form data.
<input type="submit" value="Submit">
reset : Reset form fields to default values.
<input type="reset" value="Reset">
button : Clickable button (used with JavaScript).
<input type="button" value="Click Me" onclick="alert('Button Clicked!')">
search : Single-line search field.
<input type="search" id="text" placeholder="Search….">
image : Button that displays an image.
<input type="image" src="btm.png" alt="submit">
Complete basic HTML Forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced HTML Form Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
form {
max-width: 700px;
}
fieldset {
margin-bottom: 20px;
padding: 15px;
}
legend {
font-weight: bold;
}
label {
display: block;
margin: 5px 0 2px;
}
input, select, textarea, button, output, progress, meter {
margin-bottom: 10px;
padding: 5px;
width: 100%;
box-sizing: border-box;
}
.inline {
display: inline-block;
width: auto;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Advanced HTML Form Demo</h1>
<form oninput="result.value=parseInt(number.value)+parseInt(range.value)">
<!-- Basic Inputs -->
<fieldset>
<legend>Basic Inputs</legend>
<label for="text">Text:</label>
<input type="text" id="text" placeholder="Enter text">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter password">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="example@mail.com">
<label for="url">Website:</label>
<input type="url" id="url" placeholder="https://example.com">
<label for="tel">Phone:</label>
<input type="tel" id="tel" placeholder="+1234567890">
<label for="search">Search:</label>
<input type="search" id="search" placeholder="Search...">
</fieldset>
<!-- Number & Date Inputs -->
<fieldset>
<legend>Number & Date Inputs</legend>
<label for="number">Number (0-100):</label>
<input type="number" id="number" min="0" max="100">
<label for="range">Range (0-100):</label>
<input type="range" id="range" min="0" max="100" value="50">
<label for="date">Date:</label>
<input type="date" id="date">
<label for="time">Time:</label>
<input type="time" id="time">
<label for="datetime">Date & Time:</label>
<input type="datetime-local" id="datetime">
<label for="month">Month:</label>
<input type="month" id="month">
<label for="week">Week:</label>
<input type="week" id="week">
<label for="color">Color:</label>
<input type="color" id="color" value="#ff0000">
<label>File Upload Progress:</label>
<progress value="70" max="100"></progress>
<label>Completion:</label>
<meter value="0.6">60%</meter>
<label>Disk Usage:</label>
<meter value="45" min="0" max="100">45%</meter>
</fieldset>
<!-- Choice Inputs -->
<fieldset>
<legend>Choice Inputs</legend>
<label>Checkbox:</label>
<input type="checkbox" name="hobby" value="reading" class="inline"> Reading
<input type="checkbox" name="hobby" value="music" class="inline"> Music
<label>Radio:</label>
<input type="radio" name="gender" value="male" class="inline"> Male
<input type="radio" name="gender" value="female" class="inline"> Female
<label for="dropdown">Dropdown:</label>
<select id="dropdown">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label for="textarea">Textarea:</label>
<textarea id="textarea" rows="3" placeholder="Write something..."></textarea>
<label for="file">File Upload:</label>
<input type="file" id="file">
</fieldset>
<!-- Advanced Inputs -->
<fieldset>
<legend>Advanced Inputs</legend>
<label for="browser">Choose a browser (datalist):</label>
<input list="browsers" id="browser" placeholder="Type browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<label>Form Calculation (number + range):</label>
<output name="result">0</output>
<label>Progress:</label>
<progress value="70" max="100"></progress>
<label>Meter:</label>
<meter value="0.6">60%</meter>
</fieldset>
<!-- Form Controls -->
<fieldset>
<legend>Form Controls</legend>
<input type="hidden" name="userid" value="1234">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click Me" onclick="alert('Button Clicked!')">
</fieldset>
</form>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<legend>Form output</legend>
<label for="a">Number 1:</label>
<input type="number" id="a" value="0">
<label for="b">Number 2:</label>
<input type="number" id="b" value="0">
<label>Sum:</label>
<output name="result" id="result">0</output>
</form>
</body>
</html>
Complete basic HTML Forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Complete HTML Form Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
form {
max-width: 600px;
}
fieldset {
margin-bottom: 20px;
padding: 15px;
}
label {
display: block;
margin: 5px 0 2px;
}
input, select, textarea, button {
margin-bottom: 10px;
padding: 5px;
width: 100%;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Complete HTML Form Demo</h1>
<form action="#" method="post">
<fieldset>
<legend>Basic Inputs</legend>
<label for="text">Text:</label>
<input type="text" id="text" placeholder="Enter text">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter password">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="example@mail.com">
<label for="url">Website:</label>
<input type="url" id="url" placeholder="https://example.com">
<label for="tel">Phone:</label>
<input type="tel" id="tel" placeholder="+1234567890">
<label for="search">Search:</label>
<input type="search" id="search" placeholder="Search...">
</fieldset>
<fieldset>
<legend>Number & Date Inputs</legend>
<label for="number">Number (0-100):</label>
<input type="number" id="number" min="0" max="100">
<label for="range">Range (0-100):</label>
<input type="range" id="range" min="0" max="100" value="50">
<label for="date">Date:</label>
<input type="date" id="date">
<label for="time">Time:</label>
<input type="time" id="time">
<label for="datetime">Date & Time:</label>
<input type="datetime-local" id="datetime">
<label for="month">Month:</label>
<input type="month" id="month">
<label for="week">Week:</label>
<input type="week" id="week">
<label for="color">Color:</label>
<input type="color" id="color" value="#ff0000">
</fieldset>
<fieldset>
<legend>Choice Inputs</legend>
<label>Checkbox:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="music"> Music
<label>Radio:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<label for="dropdown">Dropdown:</label>
<select id="dropdown">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<label for="textarea">Textarea:</label>
<textarea id="textarea" rows="3" placeholder="Write something..."></textarea>
<label for="file">File Upload:</label>
<input type="file" id="file">
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<input type="hidden" name="userid" value="1234">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click Me" onclick="alert('Button Clicked!')">
</fieldset>
</form>
</body>
</html>
7. Media
Audio aur video files webpage par chalane ke liye media tags use hote hain.
Below are one-line definitions with simple HTML examples for each media tag:
<audio> : Webpage par audio file play karne ke liye use hota hai.
Example:
<audio controls src="song.mp3"></audio>
<video> : Webpage par video file play karne ke liye use hota hai.
Example:
<video controls src="video.mp4"></video>
<source> : Audio ya video ke multiple formats specify karne ke liye use hota hai.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<track> : Video ke liye subtitles ya captions add karne ke kaam aata hai.
Example:
<video controls src="video.mp4">
<track src="subs.vtt" kind="subtitles" srclang="en">
</video>
<embed> : External media ya content webpage me embed karne ke liye use hota hai.
Example:
<embed src="file.pdf" width="300" height="200">
<object> : External object jaise PDF ya multimedia file show karne ke liye use hota hai.
Example:
<object data="file.pdf" width="300" height="200"></object>
<param> : <object> tag ke liye extra parameters set karne ke kaam aata hai.
Example:
<object data="movie.swf">
<param name="autoplay" value="true">
</object>
<iframe> : Kisi dusri webpage ko current webpage ke andar dikhane ke liye use hota hai.
Example:
<iframe src="https://qlcd.blogspot.com/" width="400" height="300"></iframe>
8. Semantic / Structural Tags
– These tags clearly indicate the meaning and structure of the content, such as
<header> and <footer>.
Here are one-line definitions with examples for each semantic / structural HTML tag:
<header> – Represents the top section of a page or section.
<header>Header – Top section of a page</header>
<footer> – Represents the bottom section of a page or section.
<footer>Footer – Bottom section of a page</footer>
<nav> – Contains navigation links.
<nav>Nav – Navigation links</nav>
<main> – Holds the main content of the document.
<main>Main – Main content of the page</main>
<section> – Groups related content into a section.
<section>Section – Group of related content</section>
<article> – Represents independent, self-contained content.
<article>Article – Independent content</article>
<aside> – Contains side content related to the main content.
<aside>Aside – Side or related content</aside>
<figure> – Holds self-contained media content.
<figure>
<img src="image.jpg" alt="Sample Image">
<figcaption>Figcaption – Caption for image</figcaption>
</figure>
<figcaption> – Provides a caption for a <figure>.
<figcaption>Figcaption – Caption for image</figcaption>
<details> – Displays additional information that can be toggled.
<details>
<summary>Summary – Click to expand</summary>
Details – Additional hidden information
</details>
<summary> – Defines the visible heading for <details>.
<summary>Read More</summary>
<dialog> – Creates a dialog or popup box.
<summary>Read More</summary>
<template> – Stores HTML content not rendered immediately.
<template><p>Hidden Content</p></template>
<slot> – Placeholder for content in Web Components.
<slot></slot>
9. Meta / Miscellaneous Tags
These tags provide additional information about the webpage, such as the charset, description, and viewport.
<base> – Sets the base URL for all relative links in the document.
<base href="https://example.com/">
<meta charset> – Defines the character encoding of the webpage.
<meta charset="UTF-8">
<meta name> – Provides metadata information about the webpage.
<meta name="description" content="Info">
—————— ✦✦✦ ——————
.png)
Comments
Post a Comment