HTML Structural Tags Exercise Solutions | KalviGavani

HTML Structural Tags: Exercise Solutions

How to Use This Page

Read the Samacheer Kalvi textbook chapter first. Then use this page to revise: attempt the textbook questions on your own, then compare with the model answers below. Pay special attention to the Common Mistakes section and the Exam Checklist before your test.

Key Concepts (Quick Recap)

I. Choose the Correct Answer (MCQ)

Q1. HTML stands for _________.

(a) Hyper Text Markup Language ✓ (b) High Text Markup Language (c) Hyper Transfer Markup Language (d) Home Tool Markup Language

Q2. The root tag of an HTML document is _________.

(a) <head> (b) <body> (c) <html> ✓ (d) <title>

Q3. Which tag is used to set the title of a web page?

(a) <head> (b) <title> ✓ (c) <body> (d) <meta>

Q4. The <br> tag is used for _________.

(a) Bold text (b) Horizontal rule (c) Line break ✓ (d) Paragraph

Q5. Which tag is used to insert a horizontal line?

(a) <br> (b) <hr> ✓ (c) <p> (d) <line>

Q6. The content within the <body> tag is _________.

(a) Not displayed (b) Displayed on the web page ✓ (c) Displayed in the title bar (d) Displayed as metadata

Q7. Which of the following is the largest heading tag?

(a) <h6> (b) <h4> (c) <h2> (d) <h1> ✓

Q8. The <meta> tag is placed inside the _________ section.

(a) <body> (b) <html> (c) <head> ✓ (d) <title>

Q9. HTML comments are written as _________.

(a) // comment (b) / comment / (c) <!-- comment --> ✓ (d) # comment

Q10. The <pre> tag is used to _________.

(a) Preserve the original formatting of text ✓ (b) Make text bold (c) Insert a paragraph (d) Create a heading

II. Very Short Answer Questions (2 Marks)

Q1. What is HTML?

Q2. What is a tag in HTML?

• Container tags have an opening and closing part: <title>My Page</title>
• Empty tags (self-closing) have only an opening part: <br>, <hr>

Tags define the structure, formatting, and behaviour of the content on a web page.

Q3. What is the purpose of the <title> tag?

• The browser's title bar or tab
• Search engine results as the clickable headline
• Bookmarks when the page is saved

Example: <title>My School Website</title>

Q4. What is the difference between <br> and <p> tags?

• <br> tag: Inserts a single line break. It is an empty tag (no closing tag). It moves the content that follows to the next line without adding extra spacing.
• <p> tag: Defines a paragraph. It is a container tag with an opening and closing part. Browsers automatically add margin (extra space) above and below a paragraph.

Example: <p>Line one<br>Line two</p> — the <br> breaks the line within the paragraph, while <p> creates a new paragraph with spacing.

Q5. What are attributes in HTML?

Example: <hr color="red" size="3">

Here, color and size are attributes, and "red" and "3" are their values. Attributes modify the default behaviour or appearance of a tag.

Q6. What is the <pre> tag used for?

III. Short Answer Questions (3 Marks)

Q1. Explain the basic structure of an HTML document.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>

• <!DOCTYPE html>: Declares the document type and HTML version (HTML5).
• <html>: The root element that contains the entire HTML document.
• <head>: Contains metadata about the page — the <title>, <meta> tags, links to stylesheets, and scripts. Content inside <head> is not displayed on the page.
• <title>: Sets the page title shown in the browser tab and search results.
• <body>: Contains all the visible content — text, images, links, tables, forms, etc. Everything the user sees is inside <body>.

The structure is hierarchical: <html> contains <head> and <body>, and other tags are nested within them.

Q2. Explain the heading tags in HTML with examples.

• <h1> — Largest and most important heading (used for the main title)
• <h2> — Second-level heading (used for major sections)
• <h3> — Third-level heading (used for sub-sections)
• <h4> — Fourth-level heading
• <h5> — Fifth-level heading
• <h6> — Smallest and least important heading

Example:

<h1>Main Title</h1>
<h2>Chapter 1</h2>
<h3>Section 1.1</h3>
<h4>Subsection 1.1.1</h4>
<h5>Detail level 5</h5>
<h6>Detail level 6</h6>

Important points:

• Heading tags are container tags — they must be closed: <h1>...</h1>.
• Each heading level has a default font size and bold formatting.
• Search engines use heading tags to understand the structure and hierarchy of a page.
• Do not use heading tags just to make text big or bold — use them to represent the logical structure of the content.

Q3. What are the attributes of the <hr> tag? Explain with examples.

1. size: Specifies the thickness of the line in pixels. Example: <hr size="5"> — creates a line 5 pixels thick.

2. width: Specifies the width of the line. Can be in pixels or percentage. Example: <hr width="50%"> — creates a line that spans 50% of the page width. Example: <hr width="300"> — creates a line 300 pixels wide.

3. color: Specifies the colour of the line using a colour name or hexadecimal code. Example: <hr color="red"> — creates a red line. Example: <hr color="#FF0000"> — creates a red line using hex code.

4. align: Specifies the alignment of the line (left, center, right). Only relevant when width is less than 100%. Example: <hr width="50%" align="center"> — creates a centered line spanning half the page.

5. noshade: Removes the 3D shading effect, making the line a solid colour. Example: <hr noshade> — creates a solid line without shading.

Combined example: <hr size="3" width="75%" color="blue" align="center" noshade>

Q4. Explain the <meta> tag with examples.

Common uses:

1. Character Encoding: Specifies the character set used in the document.

   <meta charset="UTF-8">

2. Page Description: Provides a brief description for search engines.

   <meta name="description" content="Learn HTML structural tags for Class 11">

3. Keywords: Lists relevant keywords for search engines.

   <meta name="keywords" content="HTML, structural tags, Class 11, Samacheer Kalvi">

4. Author: Specifies the author of the document.

   <meta name="author" content="KalviGavani">

5. Viewport: Controls the layout on mobile browsers.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

6. HTTP Refresh: Redirects the page after a specified time.

   <meta http-equiv="refresh" content="10;url=https://www.example.com">

This redirects to the specified URL after 10 seconds.

Q5. Differentiate between container tags and empty tags.

Example of container tag: <p>This is a paragraph.</p> — the <p> and </p> tags wrap the content. Example of empty tag: <br> — simply inserts a line break with no content.

IV. Long Answer Questions (5 Marks)

Q1. Explain the basic structure of an HTML document with a complete example.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="My first web page">
    <meta name="keywords" content="HTML, tutorial, beginners">
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my first web page created using HTML.</p>
    <hr>
    <h2>About Me</h2>
    <p>I am a Class 11 student learning HTML.</p>
    <hr>
    <h2>My Hobbies</h2>
    <p>Reading<br>Painting<br>Coding</p>
  </body>
</html>

Explanation of each part:

1. <!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 document. It must be the very first line of the file, before any HTML tags.

2. <html>...</html>: The root element that wraps the entire HTML document. All other tags must be inside this tag. The lang attribute can be added: <html lang="en">.

3. <head>...</head>: Contains metadata and information about the document that is not displayed on the page. It includes:

• <meta> tags for charset, description, keywords, and viewport
• <title> tag for the page title
• Links to external stylesheets and scripts

4. <title>...</title>: Sets the page title that appears in the browser tab and in search engine results.

5. <body>...</body>: Contains all the visible content of the web page — headings, paragraphs, images, links, tables, forms, etc. Everything the user sees is inside the body.

Key points to remember:

• Every HTML document must have <html>, <head>, and <body> tags.
• The <title> tag is mandatory inside <head>.
• Tags must be properly nested — close inner tags before outer tags.
• HTML is not case-sensitive, but lowercase is the standard convention.

Q2. Write an HTML program to create a web page about your school with headings, paragraphs, line breaks, and horizontal rules.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Information about my school">
    <meta name="keywords" content="school, education, Tamil Nadu">
    <title>My School - ABC Higher Secondary School</title>
  </head>
  <body>
    <h1>ABC Higher Secondary School</h1>
    <hr color="blue" size="3">

    <h2>About Our School</h2>
    <p>ABC Higher Secondary School was established in 1985.
    It is located in Chennai, Tamil Nadu.<br>
    The school offers education from Class 6 to Class 12
    in both English and Tamil mediums.</p>

    <hr width="75%" align="center" color="green">

    <h2>Our Facilities</h2>
    <p>Our school provides excellent facilities for students:</p>
    <p>Computer Lab with 50 systems<br>
    Science Laboratories for Physics, Chemistry, and Biology<br>
    Library with over 10,000 books<br>
    Sports ground and indoor games hall<br>
    Smart classrooms with projectors</p>

    <hr width="75%" align="center" color="green">

    <h2>Achievements</h2>
    <p>Our students have achieved remarkable results:</p>
    <p>100% pass rate in Class 12 board exams for the last 5 years<br>
    State rank holders in Science and Mathematics<br>
    Winners of inter-school sports competitions<br>
    National-level science project awards</p>

    <hr color="blue" size="3">

    <h2>Contact Us</h2>
    <p>ABC Higher Secondary School<br>
    123, Main Road, Chennai - 600001<br>
    Tamil Nadu, India<br>
    Phone: 044-12345678<br>
    Email: [email protected]</p>
  </body>
</html>

Explanation of tags used:

• <h1> — Main heading (school name)
• <h2> — Section headings (About, Facilities, etc.)
• <p> — Paragraphs of text
• <br> — Line breaks within paragraphs
• <hr> — Horizontal rules to separate sections, with colour and width attributes
• <meta> — Description and keywords for search engines
• <title> — Page title shown in the browser tab

Q3. Explain the difference between <p>, <br>, and <pre> tags with examples.

<p> tag: Creates a paragraph. Browsers automatically add margin above and below the paragraph, creating visual separation.

<p>This is paragraph one.</p>
<p>This is paragraph two.</p>

Output: Two separate paragraphs with spacing between them.

<br> tag: Inserts a line break within text. It does not add extra spacing — it simply moves content to the next line.

<p>Line one<br>Line two<br>Line three</p>

Output: Three lines within a single paragraph, no extra spacing.

<pre> tag: Preserves the exact formatting from the source code — all spaces, tabs, and line breaks are displayed as-is. Text is rendered in a monospace font.

<pre>
  Name        Marks
  ----        -----
  Arun          95
  Bharathi      88
</pre>

Output: The text appears exactly as typed, with all spacing and alignment preserved. Without <pre>, multiple spaces would collapse into single spaces and line breaks would be ignored.

Key distinctions:

• Use <p> for grouping text into paragraphs.
• Use <br> for simple line breaks within a paragraph.
• Use <pre> when you need to preserve exact spacing and line breaks (e.g., code snippets, tables of data, ASCII art).

Common Mistakes to Avoid

• Forgetting to close container tags — every <html>, <head>, <body>, <title>, <p>, and <h1> must have a matching closing tag.
• Confusing container tags and empty tags — <br> and <hr> do not have closing tags (never write </br> or </hr>).
• Placing visible content inside the <head> section — only metadata, <title>, and links go in <head>.
• Using heading tags just for font size — headings convey structure and hierarchy, not just appearance.
• Writing <hr> with a closing tag — it is an empty tag and does not need </hr>.
• Forgetting the <!DOCTYPE html> declaration at the top of the file.
• Nesting tags incorrectly — always close inner tags before outer tags. Wrong: <p><b>text</p></b>. Correct: <p><b>text</b></p>.
• Not enclosing attribute values in quotes — write <hr color="red">, not <hr color=red>.
• Confusing <br> (line break) with <hr> (horizontal rule) — <br> moves to the next line, <hr> draws a line.

Exam Checklist

• [ ] Can define HTML and explain its purpose
• [ ] Know the basic structure of an HTML document (DOCTYPE, html, head, body)
• [ ] Can write a complete HTML document from scratch
• [ ] Understand the difference between container tags and empty tags
• [ ] Can use heading tags <h1> to <h6> correctly
• [ ] Know the difference between <p>, <br>, and <pre> tags
• [ ] Can explain and use attributes of the <hr> tag (size, width, color, align)
• [ ] Understand the purpose and syntax of the <meta> tag
• [ ] Can write HTML comments (<!-- ... -->)
• [ ] Know the purpose of <title> and where it appears
• [ ] Can identify and explain all structural tags: <html>, <head>, <body>, <title>