1. HTML Document Structure:
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
```
2. Headings:
```html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<!-- ...and so on until h6 -->
```
3. Paragraphs:
```html
<p>This is a paragraph.</p>
```
4. Links:
```html
<a href="https://www.example.com">Link Text</a>
```
5. Images:
```html
<img src="image.jpg" alt="Description of the image">
```
6. Lists:
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
```
7. Tables:
```html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
```
8. Forms:
```html
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
```
9. Divisions/Sections:
```html
<div>
<!-- Content goes here -->
</div>
<section>
<!-- Content goes here -->
</section>
```
10. Styling:
```html
<style>
/* CSS rules go here */
</style>
```
11. Head and Meta Tags:
```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
```
12. Inline Styles:
```html
<p style="color: blue; font-size: 18px;">This is a paragraph with inline styles.</p>
```
13. Comments:
```html
<!-- This is a comment. It won't be displayed on the webpage. -->
```
14. Semantic Elements:
```html
<header>
<!-- Header content goes here -->
</header>
<nav>
<!-- Navigation menu goes here -->
</nav>
<main>
<!-- Main content goes here -->
</main>
<footer>
<!-- Footer content goes here -->
</footer>
```
15. HTML Entities (Special Characters):
```html
<p>© 2023 OpenAI — All rights reserved.</p>
```
16. Video:
```html
<video src="video.mp4" controls></video>
```
17. Audio:
```html
<audio src="audio.mp3" controls></audio>
```
18. Line Breaks:
```html
<p>This is the first line.<br>This is the second line.</p>
```
19. Inline Elements:
```html
<span>This is an inline element.</span>
```
20. Iframes:
```html
<iframe src="https://www.example.com"></iframe>
```
21. Input Fields:
```html
<input type="text" placeholder="Enter your name">
<input type="checkbox" id="checkbox">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
```
22. Buttons:
```html
<button>Click me</button>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
```
23. Dropdown Menus:
```html
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
```
24. Dividing Lines:
```html
<hr>
```
25. Semantic Tags:
```html
<aside>
<!-- Additional content goes here -->
</aside>
<article>
<!-- Article content goes here -->
</article>
```
26. Abbreviations and Acronyms:
```html
<p>The <abbr title="World Health Organization">WHO</abbr> is an international organization.</p>
```
27. Superscript and Subscript:
```html
<p>This is an example of <sup>superscript</sup> and <sub>subscript</sub>.</p>
```
28. Preformatted Text:
```html
<pre>
This is preformatted text.
It preserves white spaces and line breaks.
</pre>
```
29. Inline Frames:
```html
<iframe src="https://www.example.com" width="500" height="300"></iframe>
```
30. Non-Breaking Space:
```html
<p>This is a sentence with non-breaking spaces.</p>
```
31. Ordered Description Lists:
```html
<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>
```
32. Fieldsets and Legends:
```html
<fieldset>
<legend>Personal Information</legend>
<!-- Form fields go here -->
</fieldset>
```
33. Blockquotes:
```html
<blockquote>
<p>This is a blockquote.</p>
</blockquote>
```
34. Marked/Highlighted Text:
```html
<p>This text is <mark>highlighted</mark> for emphasis.</p>
```
35. Keyboard Input:
```html
<p>Press the <kbd>Enter</kbd> key to submit the form.</p>
```
36. Definition of Terms:
```html
<dfn title="Definition">HTML</dfn> stands for Hypertext Markup Language.
```
37. Time and Date:
```html
<time datetime="2023-06-19T12:00:00Z">June 19, 2023</time>
```
38. Progress Bar:
```html
<progress value="70" max="100"></progress>
```
39. Meter:
```html
<meter value="0.75">75%</meter>
```
40. Ruby Annotation:
```html
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>
```
41. Canvas:
```html
<canvas width="500" height="300"></canvas>
```
42. Data Lists:
```html
<input list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
</datalist>
```
43. Semantic Grouping:
```html
<div role="group" aria-labelledby="group-heading">
<h2 id="group-heading">Group Heading</h2>
<!-- Group content goes here -->
</div>
```
44. Audio and Video Controls:
```html
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>
```
45. Responsive Images:
```html
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Description of the image">
</picture>
```
46. Form Input Validation:
```html
<input type="text" required>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="number" min="1" max="100">
```
47. Drag and Drop:
```html
<div id="drag-target" draggable="true">Drag me</div>
<div id="drop-target">Drop here</div>
```
48. Responsive Embeds:
```html
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>
```
49. Details and Summary:
```html
<details>
<summary>Show more</summary>
<p>Additional details or content goes here.</p>
</details>
```
50. Web Storage:
```html
<script>
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
var data = localStorage.getItem('key');
</script>
```
51. Custom Data Attributes:
```html
<div data-id="123" data-name="John Doe"></div>
<script>
var element = document.querySelector('div');
var id = element.dataset.id;
var name = element.dataset.name;
</script>
```
52. SVG (Scalable Vector Graphics):
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
```
53. Math Markup:
```html
<math>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</math>
```
54. Geolocation:
```html
<button onclick="getLocation()">Get Location</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("demo").innerHTML = "Latitude: " + latitude + "<br>Longitude: " + longitude;
}
</script>
```
55. Drag and Drop Files:
```html
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var file = event.dataTransfer.files[0];
console.log(file.name);
}
</script>
```
56. Responsive Navigation Menu:
```html
<nav>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">☰</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<style>
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
</style>
```
57. Web Workers:
```html
<script id="worker" type="javascript/worker">
self.addEventListener('message', function(e) {
var data = e.data;
self.postMessage('You said: ' + data);
}, false);
</script>
<script>
var worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {
console.log(e.data);
}, false);
worker.postMessage('Hello!');
</script>
```
58. WebSockets:
```html
<script>
var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function() {
console.log('Connected to the server.');
};
socket.onmessage = function(event) {
console.log('Message received: ' + event.data);
};
socket.onclose = function(event) {
if (event.wasClean) {
console.log('Connection closed cleanly.');
} else {
console.log('Connection closed with code: ' + event.code);
}
};
socket.onerror = function(error) {
console.log('WebSocket error: ' + error);
};
</script>
```
59. Local Storage Events:
```html
<script>
window.addEventListener('storage', function(event) {
console.log('Key: ' + event.key);
console.log('Old value: ' + event.oldValue);
console.log('New value: ' + event.newValue);
console.log('Storage area: ' + event.storageArea);
});
</script>
```
60. Server-Sent Events:
```html
<script>
var eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
console.log('Message received: ' + event.data);
};
eventSource.onerror = function(error) {
console.log('EventSource error: ' + error);
};
</script>
```
61. Responsive Design with Media Queries:
```html
<style>
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
body {
background-color: lightgreen;
}
}
@media (min-width: 1201px) {
body {
background-color: lightyellow;
}
}
</style>
```
62. Audio and Video Source Formats:
```html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
```
63. Responsive Typography with vw (viewport width) Units:
```html
<style>
h1 {
font-size: 6vw;
}
p {
font-size: 2.5vw;
}
</style>
```
64. Autoplaying Videos:
```html
<video autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
```
65. Required Fields with Form Validation:
```html
<input type="text" required>
<input type="email" required>
<input type="number" required>
```
66. Importing External HTML using `<object>`:
```html
<object data="external.html"></object>
```
67. Customizing Checkbox and Radio Button Styles:
```html
<style>
/* Checkbox */
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 1px solid #999;
border-radius: 3px;
}
input[type="checkbox"]:checked {
background-color: #333;
}
/* Radio Button */
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 1px solid #999;
border-radius: 50%;
}
input[type="radio"]:checked {
background-color: #333;
}
</style>
```
68. Sticky Elements:
```html
<style>
.sticky {
position: sticky;
top: 0;
background-color: yellow;
}
</style>
<div class="sticky">
This element will stick to the top of the viewport.
</div>
```
69. Flexbox Layout:
```html
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
flex: 1;
padding: 10px;
border: 1px solid #999;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
70. CSS Grid Layout:
```html
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
padding: 10px;
border: 1px solid #999;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
71. Shadow and Box Effects:
```html
<style>
.box {
width: 200px;
height: 200px;
background-color: lightgray;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.border {
width: 200px;
height: 200px;
background-color: lightgray;
border: 2px solid black;
border-radius: 10px;
}
</style>
<div class="box"></div>
<div class="border"></div>
```
72. Semantic HTML5 Markup:
```html
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<footer>
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
```
73. Responsive Tables:
```html
<style>
table {
width: 100%;
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #999;
padding: 5px;
}
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
table th,
table td {
min-width: 100px;
}
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>0987654321</td>
</tr>
</tbody>
</table>
```
74. Meta Refresh Redirect:
```html
<meta http-equiv="refresh" content="5;url=https://www.example.com">
<p>Redirecting to example.com in 5
seconds...</p>
```
75. Inline SVG:
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
```
76. Picture Element and Art Direction:
```html
<picture>
<source media="(max-width: 600px)" srcset="small-image.jpg">
<source media="(min-width: 601px)" srcset="large-image.jpg">
<img src="fallback-image.jpg" alt="Image description">
</picture>
```
77. HTML Imports (deprecated in favor of ES modules):
```html
<link rel="import" href="component.html">
```
78. Preloading Resources:
```html
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
```
79. Web Components (using the Shadow DOM):
```html
<template id="custom-element-template">
<style>
/* Styles for the shadow DOM */
</style>
<slot></slot>
</template>
<script>
class CustomElement extends HTMLElement {
constructor() {
super();
const template = document.getElementById('custom-element-template');
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('custom-element', CustomElement);
</script>
<custom-element>
<!-- Content for the shadow DOM slot -->
</custom-element>
```
80. Responsive Images with `<picture>` and `<source>`:
```html
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Image description">
</picture>
```
81. Dark Mode Toggle:
```html
<style>
body {
background-color: white;
color: black;
}
body.dark-mode {
background-color: black;
color: white;
}
</style>
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
</script>
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>
```
82. ARIA (Accessible Rich Internet Applications) Attributes:
```html
<div role="button" tabindex="0" aria-label="Click me"></div>
```
83. `rel="noopener"` for Security:
```html
<a href="https://example.com" target="_blank" rel="noopener">Link</a>
```
84. `<progress>` Element:
```html
<progress value="50" max="100"></progress>
```
85. Disable Input Autocorrect and Autocapitalize:
```html
<input type="text" autocorrect="off" autocapitalize="none">
```
86. `<mark>` Element:
```html
<p>Highlight <mark>important</mark> text.</p>
```
87. `<meter>` Element:
```html
<meter value="75" min="0" max="100">75%</meter>
```
88. Grouping Form Elements with `<fieldset>` and `<legend>`:
```html
<form>
<fieldset>
<legend>Shipping Information</legend>
<!-- Form inputs for shipping information -->
</fieldset>
</form>
```
89. `rel="preload"` for Fonts:
```html
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
```
90. Lazy Loading Images:
```html
<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="Image description">
```
91. `<details>` and `<summary>` Elements:
```html
<details>
<summary>Show more</summary>
<p>Additional content</p>
</details>
```
92. HTML5 Validation with `pattern` Attribute:
```html
<input type="text" pattern="[A-Za-z]{3}" title="Three letters">
```
93. `<output>` Element:
```html
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" name="a" value="0">
+
<input type="number" id="b" name="b" value="0">
=
<output name="result" for="a b"></output>
</form>
```
94. Scroll Restoration with `scroll-behavior`:
```html
<style>
html {
scroll-behavior: smooth;
}
</style>
```
95. `<keygen>` Element (deprecated):
```html
<form>
<label for="keypair">Generate key pair:</label>
<keygen name="keypair" id="keypair">
</form>
```
96. Inline Editing with `contenteditable` Attribute:
```html
<p contenteditable="true">Edit me!</p>
```
97. `<dialog>` Element:
```html
<dialog open>
<p>Dialog content</p>
<button>Close</button>
</dialog>
```
98. `<menu>` Element:
```html
<menu>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</menu>
```
99. Form Validation with `novalidate` Attribute:
```html
<form novalidate>
<input type="email" required>
<button type="submit">Submit</button>
</form>
```
100. `<template>` Element:
```html
<template id="my-template">
<h2>Template Content</h2>
</template>
<script>
var template = document.getElementById('my-template');
var clone = template.content.cloneNode(true);
document.body.appendChild(clone);
</script>
```
101. HTML Drag and Drop:
```html
<div draggable="true">Drag me!</div>
<div ondragover="event.preventDefault()">Drop zone</div>
<script>
var draggedItem = null;
function handleDragStart(event) {
draggedItem = event.target;
event.dataTransfer.setData('text/plain', ''); // Required for Firefox
}
function handleDragOver(event) {
event.preventDefault();
}
function handleDrop(event) {
event.preventDefault();
if (draggedItem) {
event.target.appendChild(draggedItem);
draggedItem = null;
}
}
</script>
```
102. `<time>` Element:
```html
<p>The event starts at <time datetime="2023-06-30T18:00">6:00 PM</time>.</p>
```
103. `<canvas>` Element:
```html
<canvas id="my-canvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
</script>
```
104. HTML Geolocation:
```html
<button onclick="getLocation()">Get Location</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById('demo').innerHTML = 'Geolocation is not supported by this browser.';
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById('demo').innerHTML = 'Latitude: ' + latitude + '<br>Longitude: ' + longitude;
}
</script>
```
105. `<bdi>` Element:
```html
<p>Displayed text: <bdi dir="rtl">مرحبا بك</bdi></p>
```
106. `sandbox` Attribute for Iframes:
```html
<iframe src="https://example.com" sandbox></iframe>
```
107. HTML Microdata:
```html
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<a href="#" itemprop="email">john@example.com</a>
</div>
```
108. HTML Imports (deprecated):
```html
<link rel="import" href="component.html">
```
109. `<ruby>` Element:
```html
<ruby>
漢<rt>かん</rt>字<rt>じ</rt>
</ruby>
```
110. `<wbr>` Element:
```html
<p>This is a long word: supercalifragilisticexpialidocious<wbr>.</p>
```
111. `<datalist>` Element:
```html
<input type="text" list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
<option value="Strawberry">
</datalist>
```
112. `<meter>` Element with High/Low Values:
```html
<meter value="80" min="0" max="100" high="90" low="30"></meter>
```
113. `<ruby>` Element with Multiple Annotations:
```html
<ruby>
漢<rt>かん</rt>字<rt>じ</rt>
</ruby>
<ruby>
人<rt>ひと</rt>工<rt>こう</rt>
</ruby>
```
114. HTML File Upload:
```html
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Upload</button>
</form>
```
115. Responsive Embeds with Aspect Ratio:
```html
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
</div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
```
116. HTML Template for Repeatable Content:
```html
<template id="list-item-template">
<li>
<span class="name"></span>
<span class="age"></span>
</li>
</template>
<ul id="list"></ul>
<script>
var list = document.getElementById('list');
var listItemTemplate = document.getElementById('list-item-template');
var data = [
{ name: 'John Doe', age: 25 },
{ name: 'Jane Smith', age: 30 },
{ name: 'Bob Johnson', age: 40 }
];
data.forEach(function(item) {
var listItem = listItemTemplate.content.cloneNode(true);
listItem.querySelector('.name').textContent = item.name;
listItem.querySelector('.age').textContent = item.age;
list.appendChild(listItem);
});
</script>
```
117. Accessible Tabbed Content with ARIA:
```html
<div class="tab-container">
<button class="tab-button" aria-selected="true">Tab 1</button>
<button class="tab-button">Tab 2</button>
<button class="tab-button">Tab 3</button>
<div class="tab-panel" role="tabpanel" aria-hidden="false">Content 1</div>
<div class="tab-panel" role="tabpanel" aria-hidden="true">Content 2</div>
<div class="tab-panel" role="tabpanel" aria-hidden="true">Content 3</div>
</div>
<style>
.tab-button {
display: inline-block;
}
.tab-panel {
display: none;
}
.tab-panel[aria-hidden="false"] {
display: block;
}
</style>
<script>
var tabButtons = document.querySelectorAll('.tab-button');
var tabPanels = document.querySelectorAll('.tab-panel');
function activateTab(index) {
tabButtons.forEach(function(button, i) {
button.setAttribute('aria-selected', i === index ? 'true' : 'false');
});
tabPanels
.forEach(function(panel, i) {
panel.setAttribute('aria-hidden', i === index ? 'false' : 'true');
});
}
tabButtons.forEach(function(button, index) {
button.addEventListener('click', function() {
activateTab(index);
});
});
</script>
```
118. HTML Drag and Drop Events:
```html
<div draggable="true" ondragstart="drag(event)">Drag me!</div>
<div ondragover="allowDrop(event)" ondrop="drop(event)">Drop zone</div>
<script>
function drag(event) {
event.dataTransfer.setData('text/plain', event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text/plain');
event.target.appendChild(document.getElementById(data));
}
</script>
```
119. `<picture>` Element with Multiple Sources:
```html
<picture>
<source srcset="image-small.jpg" media="(max-width: 600px)">
<source srcset="image-medium.jpg" media="(max-width: 1024px)">
<source srcset="image-large.jpg" media="(min-width: 1025px)">
<img src="fallback-image.jpg" alt="Image description">
</picture>
```
120. `<output>` Element with Form Calculation:
```html
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" name="a" value="0">
+
<input type="number" id="b" name="b" value="0">
=
<output name="result"></output>
</form>
```
121. HTML Web Storage (localStorage):
```html
<script>
// Save data
localStorage.setItem('name', 'John Doe');
// Retrieve data
var name = localStorage.getItem('name');
// Remove data
localStorage.removeItem('name');
</script>
```
122. `<fieldset>` and `<legend>` for Form Grouping:
```html
<form>
<fieldset>
<legend>Shipping Information</legend>
<!-- Form inputs for shipping information -->
</fieldset>
</form>
```
123. HTML Audio:
```html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
124. Responsive Tables with `<table>` and `<div>`:
```html
<div style="overflow-x: auto;">
<table>
<!-- Table content -->
</table>
</div>
```
125. HTML Entities for Special Characters:
```html
<p>© 2023 OpenAI. All rights reserved.</p>
```
126. `<map>` and `<area>` Elements for Image Maps:
```html
<img src="image.jpg" alt="Image description" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="0,0,100,100" href="https://example.com">
</map>
```
127. `<details>` and `<summary>` Elements for Expandable Content:
```html
<details>
<summary>Show more</summary>
<p>Additional content</p>
</details>
```
128. HTML MathML for Mathematical Formulas:
```html
<math>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>4</mn>
</mrow>
</math>
```
129. `<abbr>` Element for Abbreviations:
```html
<abbr title="Hypertext Markup Language">HTML</abbr>
```
130. `<iframe>` Element:
```html
<iframe src="https://www.example.com" width="500" height="300" frameborder="0"></iframe>
```
131. `<sup>` and `<sub>` Elements for Superscript and Subscript:
```html
<p>E = mc<sup>2</sup></p>
<p>H<sub>2</sub>O</p>
```
132. `<textarea>` Element:
```html
<textarea rows="4" cols="40">Enter your text here...</textarea>
```
133. `<object>` Element for Embedding External Content:
```html
<object data="document.pdf" type="application/pdf" width="500" height="600">
<a href="document.pdf">Download PDF</a>
</object>
```
134. HTML Drag and Drop Events with Data Transfer Types:
```html
<div draggable="true" ondragstart="drag(event)">Drag me!</div>
<div ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
function drag(event) {
event.dataTransfer.setData('text/plain', 'Hello');
event.dataTransfer.setData('text/html', '<b>Hello</b>');
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var textData = event.dataTransfer.getData('text/plain');
var htmlData = event.dataTransfer.getData('text/html');
console.log(textData); // Output: Hello
console.log(htmlData); // Output: <b>Hello</b>
}
</script>
```
135. `<audio>` Element with Multiple Sources:
```html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
```
136. HTML Geolocation with Maps:
```html
<button onclick="getLocation()">Get Location</button>
<div id="map"></div>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap);
} else {
console.log('Geolocation is not supported by this browser.');
}
}
function showMap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var mapDiv = document.getElementById('map');
mapDiv.innerHTML = '<img src="https://maps.googleapis.com/maps/api/staticmap?center=' + latitude + ',' + longitude + '&zoom=15&size=400x300&sensor=false">';
}
</script>
```
137. `<figure>` and `<figcaption>` Elements for Figure and Caption:
```html
<figure>
<img src="image.jpg" alt="Image description">
<figcaption>Caption for the image</figcaption>
</figure>
```
138. HTML5 Canvas Drawing:
```html
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);
context.strokeStyle = 'blue';
context.lineWidth = 5;
context.strokeRect(150, 50, 100, 100);
context.beginPath();
context.arc(300, 150, 50, 0, 2 * Math.PI);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();
</script>
```
139. `<time>` Element for Time and Date:
```html
<p>Current time: <time datetime="2023-06-19T09:30:00">9:30 AM</time></p>
<p>Next meeting: <time datetime="2023-06-20T14:00:00Z">June 20, 2:00 PM</time></p>
```
140. `<progress>` Element for Progress Bar:
```html
<progress value="50" max="100"></progress>
```
141. `<details>` and `<summary>` Elements for FAQ:
```html
<details>
<summary>Question 1</summary>
<p>Answer 1</p>
</details>
<details>
<summary>Question 2</summary>
<p>Answer 2</p>
</details>
```
142. HTML5 Drag and Drop with Custom Data:
```html
<div draggable="true" ondragstart="drag(event)" data-id="1">Drag me!</div>
<div ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
function drag(event) {
event.dataTransfer.setData('text/plain', event.target.dataset.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text/plain');
console.log('Data ID:', data);
}
</script>
```
143. `<mark>` Element for Highlighting Text:
```html
<p>Lorem ipsum dolor sit <mark>amet</mark>, consectetur adipiscing elit.</p>
```
144. `<output>` Element with JavaScript Calculation:
```html
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" name="a" value="0">
+
<input type="number" id="b" name="b" value="0">
=
<output name="result"></output>
</form>
```
145. HTML Media Capture for Uploading Media:
```html
<input type="file" accept="image/*" capture>
```
146. `<small>` Element for Small Text:
```html
<p>This is <small>small</small> text.</p>
```
147. `<nav>` Element for Navigation Links:
```html
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
148. HTML SVG for Scalable Vector Graphics:
```html
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
```
149. `<bdi>` Element for Isolated Text Direction:
```html
<p><bdi>مرحبا</bdi> Hello</p>
```
150. `<datalist>` Element with Input Suggestions:
```html
<input type="text" list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
<option value="Strawberry">
</datalist>
```
- Entering the English page