<!DOCTYPE html>
<!-- Specify the language of the web content -->
<html lang="en">
<head>
<!-- Character Encoding -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<!-- Text scrolling
loop="1" plays only once
loop="infinite" infinite loop -->
<marquee loop="1"> Text scrolling ... </marquee>
<!-- Input Box -->
<input type="text">
<!-- Tags -->
<h1>Level 1 Title</h1>
<h2>Second-level title</h2>
<h3>Level 3 Title</h3>
<h4>Class 4 title</h4>
<h5>Level 5 Title</h5>
<h6>Class 6 title</h6>
<div>
<p>Paragraph</p>
</div>
<!-- Block-level element, features: exclusive line -->
<marquee>Scroll 1</marquee>
<marquee>Scroll 2</marquee>
<h1>Level 1 Title</h1>
<h1>Level 1 Title</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<div>Block Element</div>
<div>Block Element</div>
<!-- Inline elements, features: not exclusive to one line -->
<input type="text">
<input type="text">
<span>In-line elements</span>
<span>In-line elements</span>
<!-- Rule 1: Can be written in block-level elements: inline elements, block-level elements (almost anything can be written) -->
<div>
<span>In-line element 1</span>
<input type="text">
<div>Block Element</div>
</div>
<!-- Rule 2: Inline elements can be written: inline elements, but not: block-level elements -->
<span>
<span>In-line element 1</span>
<input type="text">
<span>In-line element 2</span>
</span>
<span>In-line element 4</span>
<!-- Special rules: h1-h6 cannot be nested with each other -->
<h1>
A paragraph of content
<h2>A paragraph 2</h2>
</h1>
<!-- Special rule: Block elements cannot be written in p tag -->
<p>
<h1>Level 1 Title</h1>
</p>
</body>
</html>