<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<header>Header</header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph</p>
<ul>
<li>Unordered List 1</li>
<li>Unordered List 2</li>
<li>Unordered List 3</li>
</ul>
<ol>
<li>Ordered List 1</li>
<li>Ordered List 2</li>
<li>Ordered List 3</li>
</ol>
<table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
</tr>
<tr>
<td>Table Data 1</td>
<td>Table Data 2</td>
</tr>
</table>
<section>
<h4>Section</h4>
</section>
<article>
<h5>Article</h5>
</article>
<form>
<input
type="text"
placeholder="Text" />
<input
type="number"
placeholder="Number" />
<input
type="submit"
value="Submit" />
</form>
<div>Div</div>
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt="Google Logo" />
<canvas
id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000000"></canvas>
<video
width="320"
height="240"
controls>
<source
src="movie.mp4"
type="video/mp4" />
<source
src="movie.ogg"
type="video/ogg" />
Your browser does not support the video tag.
</video>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/3JZ_D3ELwOQ"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div
draggable="true"
ondragstart="event.dataTransfer.setData('text/plain',null)">
Drag me
</div>
<div
ondrop="drop(event)"
ondragover="allowDrop(event)">
Drop here
</div>
<footer>Footer</footer>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
