Chapter 2 Beginner 55 Questions

Practice Questions — HTML Document Structure and Boilerplate

← Back to Notes

16 Easy

15 Medium

9 Hard

Topic-Specific Questions

Question 1

Easy

What is the purpose of <!DOCTYPE html>?

It tells the browser something about the HTML version.

It tells the browser to render the page using the HTML5 standard, not an older version or quirks mode.

Question 2

Easy

What is missing from this HTML?

<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

Something should be on the very first line.

<!DOCTYPE html>
<html>
...

Question 3

Easy

What does the lang="en" attribute do on the <html> tag?

It sets something about the content.

It tells the browser and screen readers that the page content is in English.

Question 4

Easy

What is missing from this page?

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

The browser tab will show something weird without this.

The <title> tag is missing from the head. Add <title>Your Title</title> inside the head section.

Question 5

Easy

Where does the text inside the <title> tag appear?

Not on the page itself — look higher.

On the browser tab at the top of the window, in bookmarks, and in search engine results.

Question 6

Easy

Write the complete HTML5 boilerplate with the title 'My Practice Page' and the heading 'Hi there' in the body.

Include DOCTYPE, html (with lang), head (with meta charset, meta viewport, title), and body.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Practice Page</title>
</head>
<body>
  <h1>Hi there</h1>
</body>
</html>

Question 7

Easy

What does the viewport meta tag do?

It matters most on a specific kind of device.

It makes the page display properly on mobile phones by matching the screen width and not zooming out.

Question 8

Easy

Why is this comment not working (it shows up as text on the page)?

<!- This is a note ->

Comments need a specific number of dashes.

<!-- This is a note -->

Question 9

Easy

Which tag should contain the visible content of the page?

Not head — the other one.

<body>

Question 10

Easy

Add an HTML comment above a heading that says 'This is the main title'.

Use

<!-- This is the main title -->
<h1>Welcome</h1>

Question 11

Easy

What character encoding should you use in the meta charset tag?

The universal one.

UTF-8

Question 12

Medium

What is wrong with this nesting?

<p><strong>Important text</p></strong>

The tags must close in the reverse order they were opened.

<p><strong>Important text</strong></p>

Question 13

Medium

Write the HTML boilerplate for a Hindi language page titled 'Namaste Duniya'.

Use lang="hi" for Hindi.

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Namaste Duniya</title>
</head>
<body>
  <h1>Namaste Duniya</h1>
</body>
</html>

Question 14

Medium

Which of these should go inside the head and which inside the body: <title>, <h1>, <meta>, <p>?

Metadata vs visible content.

Inside head: <title> and <meta>. Inside body: <h1> and <p>.

Question 15

Medium

Rohan wrote this boilerplate but something is wrong. Fix it:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF8">
  <title>Test</title>
</head>
<body></body>
</html>

Check the charset value carefully.

<meta charset="UTF-8">

Question 16

Medium

Write a complete HTML page with a description meta tag that says 'A personal blog about cricket and coding by Vikram'.

Use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A personal blog about cricket and coding by Vikram">
  <title>Vikram's Blog</title>
</head>
<body>
  <h1>Welcome to my blog</h1>
</body>
</html>

Question 17

Medium

Will this HTML display the word 'hidden'?

<p>Visible</p>
<!-- <p>hidden</p> -->

Anything between is ignored.

No. Only 'Visible' will be shown. The second paragraph is inside an HTML comment.

Question 18

Medium

This page does not look right on phones. What is the fix?

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

A meta tag is missing.

Add the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Question 19

Medium

What is the difference between and <h1>?</div><button type="button" class="collapsible-toggle" data-target="hint-ts-19" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-ts-19">One is on the tab, the other is on the page.</div><button type="button" class="collapsible-toggle" data-target="answer-ts-19" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-ts-19"><code><title></code> shows on the browser tab (inside head). <code><h1></code> is a visible heading on the page itself (inside body). They serve different purposes.</div></div> <div class="question-card"> <div class="question-number">Question 20</div> <span class="question-difficulty medium">Medium</span> <div class="question-text">Write a complete HTML page that has two sections, each marked with an HTML comment explaining what it contains.</div><button type="button" class="collapsible-toggle" data-target="hint-ts-20" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-ts-20">Use  comments above each section.</div><button type="button" class="collapsible-toggle" data-target="answer-ts-20" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-ts-20"><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Two Sections</title> </head> <body>  <h1>About Me</h1> <p>I am learning HTML.</p>  <h2>My Hobbies</h2> <p>I enjoy reading and cricket.</p> </body> </html></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 21</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">Why does this page show the h1 but not the second paragraph?<br><pre><code><body> <h1>Hello</h1>  </body></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-ts-21" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-ts-21">Look at the comment boundaries.</div><button type="button" class="collapsible-toggle" data-target="answer-ts-21" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-ts-21">Both paragraphs are inside a multi-line comment. Remove the comment markers to show them, or move the closing <code>--></code> to hide only the first paragraph.</div></div> <div class="question-card"> <div class="question-number">Question 22</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">Write a complete HTML page with: proper boilerplate, author meta tag crediting 'Ananya Patel', description meta tag, title 'Ananya's Portfolio', and a body with an h1 and a short paragraph.</div><button type="button" class="collapsible-toggle" data-target="hint-ts-22" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-ts-22">Combine all the meta tags you have learned so far.</div><button type="button" class="collapsible-toggle" data-target="answer-ts-22" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-ts-22"><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Portfolio of Ananya Patel featuring art, writing, and coding projects."> <meta name="author" content="Ananya Patel"> <title>Ananya's Portfolio</title> </head> <body> <h1>Welcome to my portfolio</h1> <p>Here you will find my art, stories, and small code projects.</p> </body> </html></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 23</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">What is the difference between these two pieces of code visually?<br><pre><code><ul><li>A</li><li>B</li></ul></code></pre>vs<pre><code><ul> <li>A</li> <li>B</li> </ul></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-ts-23" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-ts-23">Think about how the browser renders whitespace in HTML source.</div><button type="button" class="collapsible-toggle" data-target="answer-ts-23" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-ts-23">There is no visual difference. Both render as a bulleted list with two items. HTML ignores extra whitespace in the source code.</div></div> <div class="question-card"> <div class="question-number">Question 24</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">This boilerplate has three problems. Find them all:<br><pre><code><DOCTYPE html> <html lang=en> <head> <meta charset=utf8> <title>Test </head> <body> </body> </html></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-ts-24" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-ts-24">Missing exclamation, missing quotes, unclosed title.</div><button type="button" class="collapsible-toggle" data-target="answer-ts-24" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-ts-24">1. <code><DOCTYPE html></code> should be <code><!DOCTYPE html></code> (missing !). 2. <code>lang=en</code> should be <code>lang="en"</code> (missing quotes). 3. <code><title>Test</code> is missing its closing tag. Charset value should also be <code>"UTF-8"</code> with quotes and hyphen.</div></div> <div class="question-card"> <div class="question-number">Question 25</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">Write a fully valid HTML boilerplate with a comment section header above every major block in the body. Include intro, hobbies, and contact sections.</div><button type="button" class="collapsible-toggle" data-target="hint-ts-25" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-ts-25">Structure with clear comments above each h2 section.</div><button type="button" class="collapsible-toggle" data-target="answer-ts-25" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-ts-25"><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Priya</title> </head> <body>  <h1>Priya Sharma</h1> <p>Hi, I am a student and hobbyist coder.</p>  <h2>Hobbies</h2> <p>Reading, painting, and HTML.</p>  <h2>Contact</h2> <p>Email: priya@example.com</p> </body> </html></code></pre></div></div> </section>  <section class="practice-section" id="mixed-questions"> <h2>Mixed & Application Questions</h2> <div class="question-card"> <div class="question-number">Question 1</div> <span class="question-difficulty easy">Easy</span> <div class="question-text">Which tag wraps ALL other HTML tags?</div><button type="button" class="collapsible-toggle" data-target="hint-mx-1" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-1">The grandparent of every element.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-1" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-1"><code><html></code></div></div> <div class="question-card"> <div class="question-number">Question 2</div> <span class="question-difficulty easy">Easy</span> <div class="question-text">Write a comment that says 'Footer starts here'.</div><button type="button" class="collapsible-toggle" data-target="hint-mx-2" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-2">Use .</div><button type="button" class="collapsible-toggle" data-target="answer-mx-2" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-2"><pre><code></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 3</div> <span class="question-difficulty easy">Easy</span> <div class="question-text">What is wrong here?<br><pre><code><html><body><h1>Hi</h1></body></html></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-mx-3" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-3">Something is missing before <html>.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-3" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-3">The <code><!DOCTYPE html></code> declaration and the <code><head></code> section (with title and meta tags) are missing.</div></div> <div class="question-card"> <div class="question-number">Question 4</div> <span class="question-difficulty easy">Easy</span> <div class="question-text">Where does <meta charset="UTF-8"> go?</div><button type="button" class="collapsible-toggle" data-target="hint-mx-4" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-4">It is metadata.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-4" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-4">Inside the <code><head></code> section.</div></div> <div class="question-card"> <div class="question-number">Question 5</div> <span class="question-difficulty easy">Easy</span> <div class="question-text">Write an HTML page with a title 'Bakery' and body containing a heading 'Welcome to our Bakery'.</div><button type="button" class="collapsible-toggle" data-target="hint-mx-5" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-5">Standard boilerplate with these two text values.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-5" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-5"><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bakery</title> </head> <body> <h1>Welcome to our Bakery</h1> </body> </html></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 6</div> <span class="question-difficulty medium">Medium</span> <div class="question-text">Fix this wrong nesting:<br><pre><code><ul> <p><li>Apple</li></p> <p><li>Mango</li></p> </ul></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-mx-6" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-6">Paragraphs should not be inside a list — and list items should be direct children of the list.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-6" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-6"><pre><code><ul> <li>Apple</li> <li>Mango</li> </ul></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 7</div> <span class="question-difficulty medium">Medium</span> <div class="question-text">Does the order of meta tags in the head matter?</div><button type="button" class="collapsible-toggle" data-target="hint-mx-7" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-7">Think about the charset tag in particular.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-7" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-7">Yes. The <code><meta charset></code> tag should be among the first things in the head (within the first 1024 bytes) so the browser knows how to read the rest of the file.</div></div> <div class="question-card"> <div class="question-number">Question 8</div> <span class="question-difficulty medium">Medium</span> <div class="question-text">Write an HTML boilerplate that includes a comment explaining what each meta tag does.</div><button type="button" class="collapsible-toggle" data-target="hint-mx-8" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-8">Add a comment above each meta tag.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-8" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-8"><pre><code><!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documented Page</title> </head> <body> </body> </html></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 9</div> <span class="question-difficulty medium">Medium</span> <div class="question-text">What is wrong with this HTML?<br><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <body> <h1>Hi</h1> </body> </html></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-mx-9" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-9">One closing tag is missing.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-9" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-9">The closing <code></head></code> tag is missing. Add it before <code><body></code>.</div></div> <div class="question-card"> <div class="question-number">Question 10</div> <span class="question-difficulty medium">Medium</span> <div class="question-text">Is this HTML valid?<br><pre><code><!DOCTYPE HTML></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-mx-10" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-10">HTML is not case-sensitive for tags.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-10" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-10">Yes. HTML is not case-sensitive, so <code><!DOCTYPE HTML></code> is valid, but <code><!DOCTYPE html></code> (lowercase) is the standard convention.</div></div> <div class="question-card"> <div class="question-number">Question 11</div> <span class="question-difficulty medium">Medium</span> <div class="question-text">Write a complete HTML page where the title and h1 are different: title should be 'Priya's Blog | Home' and h1 should be 'Welcome to my blog'.</div><button type="button" class="collapsible-toggle" data-target="hint-mx-11" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-11">Title goes in head, h1 goes in body.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-11" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-11"><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Priya's Blog | Home</title> </head> <body> <h1>Welcome to my blog</h1> </body> </html></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 12</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">Why is this HTML broken?<br><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><h1>Hi</h1></title> </head> <body> </body> </html></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-mx-12" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-12">What kind of content belongs inside <title>?</div><button type="button" class="collapsible-toggle" data-target="answer-mx-12" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-12">The <code><title></code> tag only accepts plain text, not other HTML tags. Remove the <code><h1></code> from inside the title. Correct version: <code><title>Hi</title></code>.</div></div> <div class="question-card"> <div class="question-number">Question 13</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">Build a complete HTML page with all the following: DOCTYPE, html with lang, head containing charset, viewport, description, author, title, and body containing a section-header comment and an h1 with 'Complete Page'.</div><button type="button" class="collapsible-toggle" data-target="hint-mx-13" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-13">Include every meta tag and a comment in the body.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-13" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-13"><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A complete example page."> <meta name="author" content="Aarav Kumar"> <title>Complete Page</title> </head> <body>  <h1>Complete Page</h1> </body> </html></code></pre></div></div> <div class="question-card"> <div class="question-number">Question 14</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">Why does this comment not work?<br><pre><code></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-mx-14" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-14">Something special about double dashes inside comments.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-14" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-14">HTML comments cannot contain <code>--</code> (two dashes) inside them. Use single dashes or other symbols instead: <code></code></div></div> <div class="question-card"> <div class="question-number">Question 15</div> <span class="question-difficulty hard">Hard</span> <div class="question-text">What does a browser do if it finds this broken HTML?<br><pre><code><!DOCTYPE html> <html> <body> <h1>Hello </body> </html></code></pre></div><button type="button" class="collapsible-toggle" data-target="hint-mx-15" data-label-closed="Show Hint" data-label-open="Hide Hint" aria-expanded="false">Show Hint</button><div class="collapsible-content" id="hint-mx-15">The h1 is not closed.</div><button type="button" class="collapsible-toggle" data-target="answer-mx-15" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="answer-mx-15">The browser is very forgiving. It will likely close the <code><h1></code> automatically at the <code></body></code> and still show 'Hello' as a heading. But this is invalid HTML and may cause issues in complex pages.</div></div> </section>  <section class="practice-section" id="mcqs"> <h2>Multiple Choice Questions</h2> <div class="question-card"> <div class="question-number">MCQ 1</div> <div class="question-text">What should be the very first line of every HTML5 page?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> <html></li><li><span class="mcq-option-label">B.</span> <head></li><li><span class="mcq-option-label">C.</span> <!DOCTYPE html></li><li><span class="mcq-option-label">D.</span> <body></li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-1" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-1"><strong>Answer: C</strong><br><strong>C is correct.</strong> <code><!DOCTYPE html></code> must be the very first line. It tells the browser this is an HTML5 document.</div></div> <div class="question-card"> <div class="question-number">MCQ 2</div> <div class="question-text">Which tag contains the visible content of the page?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> <head></li><li><span class="mcq-option-label">B.</span> <body></li><li><span class="mcq-option-label">C.</span> <html></li><li><span class="mcq-option-label">D.</span> <main></li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-2" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-2"><strong>Answer: B</strong><br><strong>B is correct.</strong> The <code><body></code> element contains everything the user sees — headings, paragraphs, images, and more.</div></div> <div class="question-card"> <div class="question-number">MCQ 3</div> <div class="question-text">Where does the <title> tag go?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> Inside <body></li><li><span class="mcq-option-label">B.</span> Inside <head></li><li><span class="mcq-option-label">C.</span> Before <!DOCTYPE></li><li><span class="mcq-option-label">D.</span> Inside <html> but outside head and body</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-3" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-3"><strong>Answer: B</strong><br><strong>B is correct.</strong> The <code><title></code> tag goes inside <code><head></code>. It sets the text shown on the browser tab.</div></div> <div class="question-card"> <div class="question-number">MCQ 4</div> <div class="question-text">Which character encoding should you use?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> ASCII</li><li><span class="mcq-option-label">B.</span> ISO-8859-1</li><li><span class="mcq-option-label">C.</span> UTF-8</li><li><span class="mcq-option-label">D.</span> HTML</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-4" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-4"><strong>Answer: C</strong><br><strong>C is correct.</strong> UTF-8 is the universal encoding that supports every language and symbol, including Hindi, Tamil, emoji, and more.</div></div> <div class="question-card"> <div class="question-number">MCQ 5</div> <div class="question-text">Which is the correct syntax for an HTML comment?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> // This is a comment</li><li><span class="mcq-option-label">B.</span> /* This is a comment */</li><li><span class="mcq-option-label">C.</span> </li><li><span class="mcq-option-label">D.</span> # This is a comment</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-5" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-5"><strong>Answer: C</strong><br><strong>C is correct.</strong> HTML comments use <code></code>. The other syntaxes are from JavaScript, CSS, and Python.</div></div> <div class="question-card"> <div class="question-number">MCQ 6</div> <div class="question-text">Which tag wraps the head and body of an HTML page?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> <page></li><li><span class="mcq-option-label">B.</span> <document></li><li><span class="mcq-option-label">C.</span> <html></li><li><span class="mcq-option-label">D.</span> <main></li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-6" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-6"><strong>Answer: C</strong><br><strong>C is correct.</strong> The <code><html></code> element is the root of every HTML page. It wraps both the head and the body.</div></div> <div class="question-card"> <div class="question-number">MCQ 7</div> <div class="question-text">What is metadata?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> Very important data</li><li><span class="mcq-option-label">B.</span> Information about the page that is not visible on the page itself</li><li><span class="mcq-option-label">C.</span> Data from a database</li><li><span class="mcq-option-label">D.</span> The main content of the page</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-7" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-7"><strong>Answer: B</strong><br><strong>B is correct.</strong> Metadata means 'data about data'. In HTML, metadata (like title, charset, description) describes the page but is not displayed as visible content.</div></div> <div class="question-card"> <div class="question-number">MCQ 8</div> <div class="question-text">What does the viewport meta tag do?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> Sets the background color</li><li><span class="mcq-option-label">B.</span> Makes the page look right on mobile devices</li><li><span class="mcq-option-label">C.</span> Sets the page title</li><li><span class="mcq-option-label">D.</span> Links to a CSS file</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-8" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-8"><strong>Answer: B</strong><br><strong>B is correct.</strong> The viewport meta tag tells mobile browsers to display the page at the device's actual width, not zoomed out.</div></div> <div class="question-card"> <div class="question-number">MCQ 9</div> <div class="question-text">What does the lang attribute on <html> do?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> Sets the programming language</li><li><span class="mcq-option-label">B.</span> Sets the page's human language for screen readers and SEO</li><li><span class="mcq-option-label">C.</span> Adds language selector buttons</li><li><span class="mcq-option-label">D.</span> Translates the page automatically</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-9" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-9"><strong>Answer: B</strong><br><strong>B is correct.</strong> <code>lang="en"</code> tells browsers and screen readers the page is in English. It helps accessibility and search engines.</div></div> <div class="question-card"> <div class="question-number">MCQ 10</div> <div class="question-text">What is wrong with <meta charset="UTF8">?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> Nothing — it is correct</li><li><span class="mcq-option-label">B.</span> UTF8 should be UTF-8 with a hyphen</li><li><span class="mcq-option-label">C.</span> Should be charset-type instead of charset</li><li><span class="mcq-option-label">D.</span> Quotes are not needed</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-10" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-10"><strong>Answer: B</strong><br><strong>B is correct.</strong> The correct value is <code>UTF-8</code> with a hyphen. While some browsers may accept <code>UTF8</code>, the standard is UTF-8.</div></div> <div class="question-card"> <div class="question-number">MCQ 11</div> <div class="question-text">Which of these is valid nesting?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> <b><i>Hello</b></i></li><li><span class="mcq-option-label">B.</span> <b><i>Hello</i></b></li><li><span class="mcq-option-label">C.</span> <b>Hello</b></i></li><li><span class="mcq-option-label">D.</span> <b>Hello</i></li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-11" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-11"><strong>Answer: B</strong><br><strong>B is correct.</strong> Tags must close in the reverse order they were opened. Opening <code><b><i></code> means closing <code></i></b></code>.</div></div> <div class="question-card"> <div class="question-number">MCQ 12</div> <div class="question-text">Why should you indent nested HTML?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> The browser requires it</li><li><span class="mcq-option-label">B.</span> It changes how the page looks</li><li><span class="mcq-option-label">C.</span> It makes the code easier for humans to read</li><li><span class="mcq-option-label">D.</span> It speeds up the page</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-12" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-12"><strong>Answer: C</strong><br><strong>C is correct.</strong> Indentation is purely for readability. HTML ignores whitespace, so indentation has no effect on how the page looks — but it makes your code much easier to understand.</div></div> <div class="question-card"> <div class="question-number">MCQ 13</div> <div class="question-text">Which meta tag helps search engines show a preview?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> <meta charset></li><li><span class="mcq-option-label">B.</span> <meta name="viewport"></li><li><span class="mcq-option-label">C.</span> <meta name="description"></li><li><span class="mcq-option-label">D.</span> <meta name="title"></li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-13" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-13"><strong>Answer: C</strong><br><strong>C is correct.</strong> <code><meta name="description"></code> provides the text shown in Google search results below the blue link.</div></div> <div class="question-card"> <div class="question-number">MCQ 14</div> <div class="question-text">Where should comments be used in HTML?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> To store passwords and private data</li><li><span class="mcq-option-label">B.</span> To explain sections of code for yourself and other developers</li><li><span class="mcq-option-label">C.</span> To display help text to users</li><li><span class="mcq-option-label">D.</span> To make the page faster</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-14" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-14"><strong>Answer: B</strong><br><strong>B is correct.</strong> Comments are for developers, not users. Never store private information in comments — anyone can view the page source.</div></div> <div class="question-card"> <div class="question-number">MCQ 15</div> <div class="question-text">Without the DOCTYPE, what happens?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> The page will not load</li><li><span class="mcq-option-label">B.</span> The browser falls back to 'quirks mode' which breaks modern CSS</li><li><span class="mcq-option-label">C.</span> The page becomes slower</li><li><span class="mcq-option-label">D.</span> Nothing happens</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-15" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-15"><strong>Answer: B</strong><br><strong>B is correct.</strong> Without DOCTYPE, browsers use 'quirks mode' which emulates ancient buggy HTML rendering. This can break CSS layouts in unpredictable ways.</div></div> <div class="question-card"> <div class="question-number">MCQ 16</div> <div class="question-text">What is the correct order inside the head?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> title, meta charset, viewport</li><li><span class="mcq-option-label">B.</span> meta charset, viewport, title</li><li><span class="mcq-option-label">C.</span> viewport, title, meta charset</li><li><span class="mcq-option-label">D.</span> There is no required order</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-16" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-16"><strong>Answer: B</strong><br><strong>B is correct.</strong> The charset should come first so the browser knows how to decode the rest. Then viewport, then title. This order is considered best practice.</div></div> <div class="question-card"> <div class="question-number">MCQ 17</div> <div class="question-text">Can you put an <h1> tag inside a <title> tag?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> Yes, and it will show as a big heading</li><li><span class="mcq-option-label">B.</span> Yes, but it is ignored and the tags show as text</li><li><span class="mcq-option-label">C.</span> No, title only contains plain text</li><li><span class="mcq-option-label">D.</span> Only if you use CSS</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-17" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-17"><strong>Answer: C</strong><br><strong>C is correct.</strong> The title element only accepts plain text. Other HTML tags inside it are either ignored or show as literal text in the browser tab.</div></div> <div class="question-card"> <div class="question-number">MCQ 18</div> <div class="question-text">What does a multi-line HTML comment look like?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> /* Comment on multiple lines */</li><li><span class="mcq-option-label">B.</span> </li><li><span class="mcq-option-label">C.</span> // Line 1 // Line 2</li><li><span class="mcq-option-label">D.</span> HTML does not support multi-line comments</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-18" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-18"><strong>Answer: B</strong><br><strong>B is correct.</strong> HTML comments can span multiple lines. Just put <code></code> at the end, and include any content between them.</div></div> <div class="question-card"> <div class="question-number">MCQ 19</div> <div class="question-text">Is HTML case-sensitive for tag names?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> Yes, all tags must be lowercase</li><li><span class="mcq-option-label">B.</span> Yes, all tags must be uppercase</li><li><span class="mcq-option-label">C.</span> No, but lowercase is the modern convention</li><li><span class="mcq-option-label">D.</span> Only attribute names are case-sensitive</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-19" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-19"><strong>Answer: C</strong><br><strong>C is correct.</strong> HTML tags are case-insensitive — <code><P></code> and <code><p></code> both work. However, lowercase is the standard modern practice.</div></div> <div class="question-card"> <div class="question-number">MCQ 20</div> <div class="question-text">What happens if you put content directly inside <html> but outside both head and body?</div> <ul class="mcq-options"><li><span class="mcq-option-label">A.</span> It appears at the top of the page</li><li><span class="mcq-option-label">B.</span> The browser tries to move it into the body automatically</li><li><span class="mcq-option-label">C.</span> Nothing, it is ignored</li><li><span class="mcq-option-label">D.</span> The page breaks completely</li></ul><button type="button" class="collapsible-toggle" data-target="mcqans-mcq-20" data-label-closed="Show Answer" data-label-open="Hide Answer" aria-expanded="false">Show Answer</button><div class="collapsible-content" id="mcqans-mcq-20"><strong>Answer: B</strong><br><strong>B is correct.</strong> Browsers are forgiving. They usually move stray content into the body automatically. But this is invalid HTML and you should never rely on it.</div></div> </section>  <section class="practice-section" id="coding-challenges"> <h2>Coding Challenges</h2> <div class="challenge-card"> <h3>Challenge 1: Write the Perfect Boilerplate</h3> <span class="challenge-difficulty easy">Easy</span> <div class="challenge-description"></div><div class="challenge-constraints">Must include DOCTYPE, lang attribute, meta charset, meta viewport, title, and a single h1.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-1" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-1"><pre><code class="language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Clean Page</title> </head> <body> <h1>Clean and proper</h1> </body> </html></code></pre></div></div> <div class="challenge-card"> <h3>Challenge 2: Commented Sections</h3> <span class="challenge-difficulty easy">Easy</span> <div class="challenge-description"></div><div class="challenge-constraints">Include DOCTYPE, proper head, and three h2 sections with comments.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-2" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-2"><pre><code class="language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Commented Page</title> </head> <body>  <h2>Introduction</h2> <p>Hi, I am Ananya and I love coding.</p>  <h2>Hobbies</h2> <p>Reading, painting, and learning HTML.</p>  <h2>Contact</h2> <p>Email: ananya@example.com</p> </body> </html></code></pre></div></div> <div class="challenge-card"> <h3>Challenge 3: Multilingual Ready Boilerplate</h3> <span class="challenge-difficulty medium">Medium</span> <div class="challenge-description"></div><div class="challenge-constraints">Must use lang="hi" on html tag and UTF-8 charset to support Devanagari.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-3" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-3"><pre><code class="language-python"><!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Namaste Duniya</title> </head> <body> <h1>Namaste Duniya</h1> <p>HTML mein Hindi aasan hai.</p> </body> </html></code></pre></div></div> <div class="challenge-card"> <h3>Challenge 4: SEO Ready Page</h3> <span class="challenge-difficulty medium">Medium</span> <div class="challenge-description"></div><div class="challenge-constraints">Include all SEO meta tags: charset, viewport, description, author, title.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-4" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-4"><pre><code class="language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Art portfolio of Priya Sharma featuring paintings, sketches, and digital art."> <meta name="author" content="Priya Sharma"> <title>Priya's Art Portfolio</title> </head> <body> <h1>Welcome to my art portfolio</h1> <p>Explore my collection of paintings and sketches.</p> </body> </html></code></pre></div></div> <div class="challenge-card"> <h3>Challenge 5: Fix the Broken Boilerplate</h3> <span class="challenge-difficulty medium">Medium</span> <div class="challenge-description"></div><div class="challenge-constraints">Fix DOCTYPE, lang, charset, title closing, and content placement. Also add viewport meta.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-5" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-5"><pre><code class="language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> </head> <body> <h1>Hello</h1> </body> </html></code></pre></div></div> <div class="challenge-card"> <h3>Challenge 6: Nested Structure Page</h3> <span class="challenge-difficulty hard">Hard</span> <div class="challenge-description"></div><div class="challenge-constraints">Proper nesting and indentation required. Include full boilerplate.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-6" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-6"><pre><code class="language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menu</title> </head> <body> <h1>Our Menu</h1> <ul> <li> Snacks <ul> <li>Samosa</li> <li>Vada Pav</li> </ul> </li> <li> Drinks <ul> <li>Masala Chai</li> <li>Mango Lassi</li> </ul> </li> </ul> </body> </html></code></pre></div></div> <div class="challenge-card"> <h3>Challenge 7: Complete Blog Post Template</h3> <span class="challenge-difficulty hard">Hard</span> <div class="challenge-description"></div><div class="challenge-constraints">Include DOCTYPE, head with charset, viewport, description, author, title, and body with commented header, content, footer sections.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-7" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-7"><pre><code class="language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="My first blog post about learning HTML from scratch."> <meta name="author" content="Rohan Gupta"> <title>My First Blog Post</title> </head> <body>  <h1>My First Blog Post</h1> <p>By Rohan Gupta</p> <hr>  <p>Learning HTML has been one of the best decisions I have made this year.</p> <p>The boilerplate looked intimidating at first, but now I can type it out without thinking.</p> <hr>  <p>Thanks for reading. See you in the next post.</p> </body> </html></code></pre></div></div> <div class="challenge-card"> <h3>Challenge 8: Full SEO and Mobile Ready Home Page</h3> <span class="challenge-difficulty hard">Hard</span> <div class="challenge-description"></div><div class="challenge-constraints">Must be SEO ready (description, proper title), mobile ready (viewport meta), and well-organized with section comments.</div><button type="button" class="collapsible-toggle" data-target="sol-challenge-8" data-label-closed="Show Solution" data-label-open="Hide Solution" aria-expanded="false">Show Solution</button><div class="collapsible-content" id="sol-challenge-8"><pre><code class="language-python"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Home page of Vikram Singh, a young coder learning HTML, CSS, and JavaScript."> <meta name="author" content="Vikram Singh"> <title>Vikram Singh - Home</title> </head> <body>  <h1>Welcome to my site</h1> <p>Hi, I am Vikram, a 15-year-old from Pune who loves building websites.</p>  <p>This site is where I share my coding journey, projects, and thoughts about technology.</p> <p>Feel free to explore and reach out if you want to collaborate on something fun.</p>  <hr> <p>Made with love and plain HTML by Vikram Singh.</p> </body> </html></code></pre></div></div> </section>  <nav class="chapter-nav" aria-label="Chapter practice navigation"> <a href="/resources/html-and-css/introduction-to-html/practice" class="chapter-nav-card prev"> <span class="chapter-nav-label">Previous Chapter</span> <span class="chapter-nav-title">Introduction to HTML - The Language of the Web</span> </a> <a href="/resources/html-and-css/headings-paragraphs-and-text/practice" class="chapter-nav-card next"> <span class="chapter-nav-label">Next Chapter</span> <span class="chapter-nav-title">Headings, Paragraphs, and Text Formatting</span> </a> </nav>  <section class="cta-section"> <h2>Need to Review the Concepts?</h2> <p>Go back to the detailed notes for this chapter.</p> <a href="/resources/html-and-css/html-structure-and-boilerplate" class="cta-button-primary">Read Chapter Notes</a> </section>  <section class="cta-section cta-course"> <p>Want to learn web development with a live mentor?</p> <a href="/courses/frontend-development-masterclass-for-teens" class="cta-button-outline">Explore our Frontend Masterclass</a> </section> </main> <div id="footer-placeholder"></div> <script src="/js/components-loader.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script> <script src="/js/resource-interactive.js"></script> </body> </html>