Chapter 3 Beginner 58 Questions

Practice Questions — Headings, Paragraphs, and Text Formatting

← Back to Notes
16 Easy
16 Medium
8 Hard

Topic-Specific Questions

Question 1
Easy
What is the output of this text markup?
<p>I love <strong>chocolate</strong> cake.</p>
strong makes text bold.
A paragraph: 'I love chocolate cake.' with the word 'chocolate' shown in bold.
Question 2
Easy
What does this render?
<p>Press <em>any</em> key to continue.</p>
em is for emphasised text.
A paragraph: 'Press any key to continue.' with the word 'any' in italic.
Question 3
Easy
Write HTML for a recipe heading with a subheading. Main heading: 'Mango Lassi'. Subheading: 'The perfect summer drink'.
Use h1 for the main heading and h2 for the subheading.
<h1>Mango Lassi</h1>
<h2>The perfect summer drink</h2>
Question 4
Easy
What is the difference between these two lines?
<h1>Hello</h1>
<h3>Hello</h3>
h1 is bigger than h3.
Both say 'Hello', but h1 is displayed as a very large heading, and h3 is a medium-sized heading.
Question 5
Easy
Rohan wanted to highlight a word. Why does this not work?
<p>I love <highlight>mangoes</highlight>.</p>
There is a specific HTML tag for highlighting.
<p>I love <mark>mangoes</mark>.</p>
Question 6
Easy
What does this produce?
<p>Water is H<sub>2</sub>O.</p>
sub is for subscript (below the line).
A paragraph: 'Water is H2O.' with the '2' shown smaller and below the baseline.
Question 7
Easy
What is the output?
<p>The area of a square is x<sup>2</sup>.</p>
sup is for superscript (above the line).
A paragraph: 'The area of a square is x2.' with the '2' shown smaller and above the baseline.
Question 8
Easy
Write HTML for a paragraph that says 'Press Ctrl+S to save your work' where 'Ctrl' and 'S' are styled as keyboard keys.
Use the tag for keyboard input.
<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save your work</p>
Question 9
Easy
Why does this show 'Copyright copy 2026' instead of the copyright symbol?
<p>Copyright © 2026</p>
Entity codes need something at the end.
<p>Copyright &copy; 2026</p>
Question 10
Easy
What does this render?
<p>Old price: <del>Rs 500</del> New price: <ins>Rs 350</ins></p>
del is strikethrough, ins is inserted (underlined).
A paragraph showing 'Old price: Rs 500 New price: Rs 350' with the old price crossed out and the new price underlined.
Question 11
Easy
Write HTML for a paragraph that highlights the word 'important' using the mark tag.
Use important.
<p>This message is <mark>important</mark>.</p>
Question 12
Medium
What does this render?
<p>Hello        World</p>
HTML treats whitespace specially.
A paragraph: 'Hello World' (only a single space between 'Hello' and 'World').
Question 13
Medium
Ananya has this code but wants 'Dr. Priya' to stay on the same line (currently it wraps). Fix it:
<p>Thank you Dr. Priya for the guidance.</p>
Use a non-breaking space.
<p>Thank you Dr.&nbsp;Priya for the guidance.</p>
Question 14
Medium
Write HTML for a blockquote containing a quote by Vikram: 'Hard work beats talent when talent does not work hard.'
Use
with a

inside.

<blockquote>
  <p>Hard work beats talent when talent does not work hard.</p>
  <p>- Vikram</p>
</blockquote>
Question 15
Medium
What does this render?
<p>The <code>console.log()</code> function prints output.</p>
code shows text in monospace font.
A paragraph where 'console.log()' is shown in a monospace (typewriter-style) font.
Question 16
Medium
Why does this page have 3 h1 tags and what should be done?
<h1>About</h1>
<h1>Hobbies</h1>
<h1>Contact</h1>
Best practice says only one h1 per page.
<h1>About Me</h1>
<h2>Hobbies</h2>
<h2>Contact</h2>
Question 17
Medium
What does this render?
<p>To show &lt;p&gt; on the page, use &amp;lt; and &amp;gt;.</p>
Think about how entities work.
A paragraph: 'To show <p> on the page, use &lt; and &gt;.'
Question 18
Medium
Write HTML for a paragraph that combines bold, italic, and highlighted text: make 'Sale' bold, 'today' highlighted, and 'limited time' italic.
Combine strong, mark, and em.
<p><strong>Sale</strong> <mark>today</mark> only - <em>limited time</em> offer!</p>
Question 19
Medium
Priya wrote this address but it shows on one line. Fix it so the city is on a new line:
<p>123 Park Street Mumbai 400001</p>
Use br for a line break inside the same paragraph.
<p>123 Park Street<br>Mumbai 400001</p>
Question 20
Medium
Write HTML for a chemistry equation: 'The formula for water is H2O and carbon dioxide is CO2' where the 2 is subscript.
Use .
<p>The formula for water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub></p>
Question 21
Medium
What does this render?
<p>Copyright &copy; 2026 Modern&nbsp;Age&nbsp;Coders</p>
© is the copyright symbol,   is a non-breaking space.
A paragraph: 'Copyright © 2026 Modern Age Coders' where 'Modern Age Coders' will never wrap in the middle.
Question 22
Hard
Neha wanted to show HTML code on her page, but the browser is rendering it instead of displaying it as text. How does she fix this?
<p>To make a bold word, use <strong>hello</strong></p>
She needs to escape the < and > characters.
<p>To make a bold word, use &lt;strong&gt;hello&lt;/strong&gt;</p>
Question 23
Hard
Write a complete HTML page for a blog post: title 'My First HTML Lesson', one h1, one h2, two paragraphs with a mix of strong and em formatting, a blockquote, and a horizontal rule separator.
Combine boilerplate with h1, h2, p, strong, em, blockquote, and hr.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First HTML Lesson</title>
</head>
<body>
  <h1>My First HTML Lesson</h1>
  <h2>What I Learned Today</h2>
  <p>Today I learned about <strong>headings</strong> and <strong>paragraphs</strong>.</p>
  <p>HTML is <em>really</em> fun once you understand the basics.</p>
  <hr>
  <blockquote>
    <p>Learning is the only thing the mind never exhausts.</p>
    <p>- Leonardo da Vinci</p>
  </blockquote>
</body>
</html>
Question 24
Hard
What does this render?
<p>x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
sup creates superscript.
A paragraph: 'x2 + y2 = r2' (the Pythagoras-style circle equation).
Question 25
Hard
Aarav's fractions look weird. He wants '1/2' but sees '12'. Fix it:
<p>Add <sup>1</sup><sub>2</sub> cup of milk.</p>
He needs a visible division symbol or a slash.
<p>Add <sup>1</sup>&frasl;<sub>2</sub> cup of milk.</p>
<!-- Or simpler: -->
<p>Add 1/2 cup of milk.</p>

Mixed & Application Questions

Question 1
Easy
What does this render?
<h2><em>Section One</em></h2>
em is italic, inside an h2 heading.
A medium heading 'Section One' shown in italic.
Question 2
Easy
Write HTML for a paragraph with the word 'warning' highlighted and 'do not skip' in bold.
Use mark and strong.
<p><mark>Warning</mark>: <strong>do not skip</strong> this step.</p>
Question 3
Easy
Fix the entity in this code:
<p>5 &lt 10</p>
Missing a character at the end.
<p>5 &lt; 10</p>
Question 4
Easy
How many visible lines appear on the page?
<p>Line 1<br>Line 2</p>
<p>Line 3</p>
Count the line breaks and paragraphs.
Three lines: 'Line 1', 'Line 2' (inside the same paragraph as Line 1 but on a new line due to br), and 'Line 3' (a separate paragraph).
Question 5
Easy
Write a heading and a paragraph. Heading: 'Fun Facts'. Paragraph: 'Did you know? Elephants are the largest land animals.'
Use h2 or h1 for the heading and p for the paragraph.
<h2>Fun Facts</h2>
<p>Did you know? Elephants are the largest land animals.</p>
Question 6
Medium
What does this render?
<p>a<sub>1</sub> + a<sub>2</sub> + ... + a<sub>n</sub></p>
sub makes small text below the baseline.
A paragraph showing a mathematical sum: 'a1 + a2 + ... + an' with subscript numbers.
Question 7
Medium
Write HTML for showing the chemical equation 'H2O + CO2 = H2CO3' with proper subscripts.
Each number should be wrapped in .
<p>H<sub>2</sub>O + CO<sub>2</sub> = H<sub>2</sub>CO<sub>3</sub></p>
Question 8
Medium
Rohan wants the text 'Click here' to be small but stands out. He wrote:
<small><strong>Click here</strong></small>
What is wrong (or right)?
Think about nesting order.
Actually, this is valid HTML. Both orders work: <small><strong>...</strong></small> or <strong><small>...</small></strong>. The text will be small and bold.
Question 9
Medium
What does this render visually?
<blockquote>
  <p>Never give up.</p>
</blockquote>
Blockquotes are usually indented.
An indented paragraph saying 'Never give up.' — usually with some left padding to visually separate it from regular paragraphs.
Question 10
Medium
Write HTML to display: 'Press Ctrl+C to copy, Ctrl+V to paste' with all keyboard keys using the kbd tag.
Each key gets its own .
<p>Press <kbd>Ctrl</kbd>+<kbd>C</kbd> to copy, <kbd>Ctrl</kbd>+<kbd>V</kbd> to paste</p>
Question 11
Medium
Ananya's text has weird spacing — she wants to force 5 spaces but they all collapse. Fix it:
<p>Hello     World</p>
Use non-breaking space entities.
<p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World</p>
Question 12
Hard
Write a complete HTML page that displays a math formula: 'The distance formula is d = square-root of ((x2-x1) squared + (y2-y1) squared)' using proper subscript and superscript.
Use sub for variable indices and sup for powers.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Math</title>
</head>
<body>
  <h1>Distance Formula</h1>
  <p>d = &radic;((x<sub>2</sub> - x<sub>1</sub>)<sup>2</sup> + (y<sub>2</sub> - y<sub>1</sub>)<sup>2</sup>)</p>
</body>
</html>
Question 13
Hard
This page has an h1 followed by another h1. Why is this a problem and how do you fix it?
<h1>Welcome</h1>
<p>Hello visitor.</p>
<h1>About Me</h1>
<p>I am 14 years old.</p>
SEO best practices.
<h1>Welcome</h1>
<p>Hello visitor.</p>
<h2>About Me</h2>
<p>I am 14 years old.</p>
Question 14
Hard
Write HTML to show a shopping discount. Use del for old price, ins for new price, mark to highlight the discount percentage, and strong for the product name. Example: 'Samsung Phone - old Rs 30000, new Rs 25000 - 17% off'.
Combine del, ins, mark, and strong in one paragraph.
<p><strong>Samsung Phone</strong> - <del>Rs 30000</del> <ins>Rs 25000</ins> - <mark>17% off</mark></p>
Question 15
Hard
What happens when you write this code in HTML?
<p>&lt;strong&gt;Hello&lt;/strong&gt;</p>
The entities are doing their job.
A paragraph showing the literal text: '<strong>Hello</strong>' — not bold, just the tag characters shown as text.

Multiple Choice Questions

MCQ 1
Which tag creates the biggest heading?
  • A. <h6>
  • B. <heading>
  • C. <h1>
  • D. <big>
Answer: C
C is correct. <h1> is the largest heading. Heading tags go from h1 (biggest) to h6 (smallest).
MCQ 2
Which tag creates a paragraph?
  • A. <paragraph>
  • B. <p>
  • C. <para>
  • D. <text>
Answer: B
B is correct. The <p> tag creates a paragraph. Browsers automatically add vertical space between paragraphs.
MCQ 3
Which tag creates a line break?
  • A. <lb>
  • B. <break>
  • C. <br>
  • D. <newline>
Answer: C
C is correct. <br> creates a line break. It is a self-closing tag and does not need a closing tag.
MCQ 4
Which tag draws a horizontal line?
  • A. <line>
  • B. <hr>
  • C. <horizontal>
  • D. <divider>
Answer: B
B is correct. <hr> (horizontal rule) draws a horizontal line across the page, useful for separating sections.
MCQ 5
Which tag is for important text (shown bold with semantic meaning)?
  • A. <b>
  • B. <important>
  • C. <strong>
  • D. <bold>
Answer: C
C is correct. <strong> is the semantic tag for important text. It is bold and also announced with emphasis by screen readers. <b> just makes text bold without semantic meaning.
MCQ 6
Which tag creates highlighted (yellow background) text?
  • A. <highlight>
  • B. <mark>
  • C. <yellow>
  • D. <hl>
Answer: B
B is correct. <mark> highlights text, shown with a yellow background by default.
MCQ 7
Which entity displays the copyright symbol?
  • A. &copyright;
  • B. &c;
  • C. &copy;
  • D. &copywrite;
Answer: C
C is correct. &copy; renders as the copyright symbol (©). All HTML entities start with & and end with ;.
MCQ 8
Which tag is for subscript (text below the line)?
  • A. <sub>
  • B. <sup>
  • C. <small>
  • D. <down>
Answer: A
A is correct. <sub> creates subscript, used in chemical formulas like H2O. <sup> is for superscript, used in math like x^2.
MCQ 9
How many

tags should a page typically have?

  • A. Zero
  • B. One
  • C. At least three
  • D. As many as needed
Answer: B
B is correct. Best practice is to use only ONE <h1> per page, representing the main topic. Use h2 and h3 for sub-sections.
MCQ 10
What does stand for?
  • A. Email
  • B. Emphasis (italic)
  • C. Empty
  • D. Embed
Answer: B
B is correct. <em> stands for emphasis. It makes text italic and signals to screen readers that the word should be stressed.
MCQ 11
What happens if you type multiple spaces between words in HTML?
  • A. They all show on the page
  • B. HTML collapses them to a single space
  • C. The page breaks
  • D. Nothing shows
Answer: B
B is correct. HTML collapses multiple spaces, tabs, and newlines into a single space. Use &nbsp; for forced spaces or CSS for layout.
MCQ 12
Which entity is used for a non-breaking space?
  • A. &space;
  • B. &nbsp;
  • C. &nb;
  • D. &nsp;
Answer: B
B is correct. &nbsp; (non-breaking space) forces a space that will not be collapsed and prevents line wrapping at that point.
MCQ 13
Which tag is for quoted blocks of text?
  • A. <quote>
  • B. <blockquote>
  • C. <cite>
  • D. <q>
Answer: B
B is correct. <blockquote> is for quoting blocks of text from another source. Browsers indent it by default. <q> is for short inline quotes.
MCQ 14
What is the difference between and ?
  • A. No difference at all
  • B. <strong> has semantic meaning (important), <b> is just bold styling
  • C. <strong> is italic, <b> is bold
  • D. <strong> is bigger than <b>
Answer: B
B is correct. Both look bold, but <strong> carries semantic meaning (this is important), while <b> just adds visual bold styling. Prefer <strong> for accessibility.
MCQ 15
Which entity represents the less-than symbol (<)?
  • A. &less;
  • B. &lt;
  • C. &l;
  • D. &small;
Answer: B
B is correct. &lt; renders as the less-than symbol. Since < is used in HTML tags, you need this entity to display it as text.
MCQ 16
Which tag is best for showing keyboard shortcuts?
  • A. <key>
  • B. <kbd>
  • C. <code>
  • D. <input>
Answer: B
B is correct. <kbd> is the semantic tag for keyboard input. It is typically shown in monospace font to mimic keys.
MCQ 17
What does H2SO4 represent in HTML?
  • A. A mistake
  • B. The chemical formula for sulphuric acid with subscript numbers
  • C. H2 and SO4 as separate words
  • D. A heading
Answer: B
B is correct. Using <sub> tags lets you write chemical formulas correctly. H2SO4 is sulphuric acid with the numbers as subscripts.
MCQ 18
Which statement is TRUE about HTML whitespace?
  • A. HTML preserves all whitespace exactly as typed
  • B. HTML collapses multiple whitespace characters into a single space
  • C. Whitespace is not allowed in HTML
  • D. Only spaces inside paragraphs are collapsed
Answer: B
B is correct. HTML collapses runs of whitespace (spaces, tabs, newlines) into a single space when rendered. For exact whitespace, use <pre> or CSS.
MCQ 19
Which tag should be used for short inline code?
  • A. <pre>
  • B. <script>
  • C. <code>
  • D. <text>
Answer: C
C is correct. <code> is for inline computer code, displayed in monospace font. <pre> is for preformatted blocks where whitespace matters.
MCQ 20
What does the tag display by default?
  • A. Underlined text
  • B. Italic text
  • C. Bold text
  • D. Strikethrough text
Answer: D
D is correct. <del> marks deleted text and is shown with a strikethrough line by default. Its opposite is <ins> (inserted, shown underlined).

Coding Challenges

Challenge 1: Proper Heading Hierarchy

Easy
Must have exactly one h1, multiple h2s, and proper HTML boilerplate.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My School</title>
</head>
<body>
  <h1>Modern Public School</h1>
  <h2>About</h2>
  <p>Modern Public School was founded in 1985 and is one of the top schools in Delhi.</p>
  <h2>Facilities</h2>
  <p>We have a large library, a science lab, a computer lab, and a big playground.</p>
</body>
</html>

Challenge 2: Formatted Paragraph

Easy
Must use strong, em, and mark in a single paragraph with proper HTML5 boilerplate.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Safety</title>
</head>
<body>
  <h1>Safety First</h1>
  <p><mark>Warning:</mark> Always <strong>look both ways</strong> before crossing the road. Never cross <em>without checking</em> for vehicles.</p>
</body>
</html>

Challenge 3: Chemistry Formulas Page

Medium
Use <sub> for every number in the chemical formulas.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Common Chemicals</title>
</head>
<body>
  <h1>Common Chemicals</h1>
  <p>Water: H<sub>2</sub>O</p>
  <p>Carbon Dioxide: CO<sub>2</sub></p>
  <p>Sulphuric Acid: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>

Challenge 4: Math Equations Page

Medium
Use <sup> for every exponent.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Famous Equations</title>
</head>
<body>
  <h1>Famous Equations</h1>
  <p>Pythagoras theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
  <p>Area of a circle: A = &pi;r<sup>2</sup></p>
  <p>Einstein's mass-energy: E = mc<sup>2</sup></p>
</body>
</html>

Challenge 5: Famous Quote Page

Medium
Use h1, p, blockquote, and hr tags.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inspirational Quote</title>
</head>
<body>
  <h1>Quote of the Day</h1>
  <p>Here is an inspiring quote from a great Indian leader:</p>
  <blockquote>
    <p>You must be the change you wish to see in the world.</p>
    <p>- Mahatma Gandhi</p>
  </blockquote>
  <hr>
  <p>Let this inspire you to do something meaningful today.</p>
</body>
</html>

Challenge 6: Shopping Discount Display

Hard
Use strong, del, ins, and mark for each product. Include full boilerplate.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sale</title>
</head>
<body>
  <h1>Diwali Sale</h1>
  <p><strong>Samsung Phone</strong> - <del>Rs 30000</del> <ins>Rs 24000</ins> - <mark>20% off</mark></p>
  <p><strong>Laptop Bag</strong> - <del>Rs 2000</del> <ins>Rs 1400</ins> - <mark>30% off</mark></p>
  <p><strong>Wireless Headphones</strong> - <del>Rs 5000</del> <ins>Rs 3500</ins> - <mark>30% off</mark></p>
</body>
</html>

Challenge 7: Keyboard Shortcut Guide

Hard
Every key must be in its own <kbd> tag. Include full boilerplate.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keyboard Shortcut Guide</title>
</head>
<body>
  <h1>Keyboard Shortcut Guide</h1>
  <p>Save time by using these common keyboard shortcuts on Windows.</p>
  <p><kbd>Ctrl</kbd>+<kbd>C</kbd> - Copy selected text or files.</p>
  <p><kbd>Ctrl</kbd>+<kbd>V</kbd> - Paste copied content.</p>
  <p><kbd>Ctrl</kbd>+<kbd>Z</kbd> - Undo your last action.</p>
  <p><kbd>Ctrl</kbd>+<kbd>S</kbd> - Save the current file.</p>
  <p><kbd>Alt</kbd>+<kbd>Tab</kbd> - Switch between open applications.</p>
</body>
</html>

Challenge 8: Complete Blog Post With Formatting

Hard
Must use h1, h2, p, small, strong, em, blockquote, kbd, code, hr, and at least one entity code.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Week Learning HTML</title>
</head>
<body>
  <h1>My Week Learning HTML</h1>
  <p><small>By Ananya Singh, posted on April 11, 2026</small></p>

  <p>This week, I learned the <strong>basics</strong> of HTML. It was <em>incredibly fun</em> and much easier than I thought.</p>

  <h2>What Inspired Me</h2>
  <blockquote>
    <p>The only way to learn to code is to write code every day.</p>
    <p>- Unknown</p>
  </blockquote>

  <h2>My Favourite Shortcut</h2>
  <p>I use <kbd>Ctrl</kbd>+<kbd>S</kbd> all the time to save my HTML files before refreshing the browser.</p>

  <h2>My First Code</h2>
  <p>The first code I learned was: <code>&lt;h1&gt;Hello World&lt;/h1&gt;</code>. So simple yet so powerful.</p>

  <hr>
  <p><small>Copyright &copy; 2026 Ananya Singh. All rights reserved.</small></p>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass