HTML

HTML (HyperText Markup Language) is the language used to create web pages. It defines the structure and layout of a webpage using elements represented by tags. HTML is the foundation of web development. In this chapter, we will learn about headings, paragraphs, formatting, lists, links, tables, forms, semantic elements, and finally a self-contained HTML example.

Introduction to HTML

HTML pages are text files saved with .html extension. A basic HTML page starts with <!DOCTYPE html> and has <html>, <head>, and <body> sections. Head contains metadata like the title, and body contains the content.

Headings

HTML provides six heading levels: <h1> to <h6>. Headings organize content hierarchically.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Subsection Heading</h4>

Paragraphs and Text Formatting

Paragraphs are defined using <p> tags. Text can be emphasized using <span> with style or semantic purpose.

<p>This is a normal paragraph.</p>
<p>This is a <span style="font-weight:bold;">bold</span> word.</p>
<p>This is an <span style="font-style:italic;">italic</span> word.</p>

Lists

HTML supports ordered lists <ol> and unordered lists <ul>. List items use <li>.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<ol>
  <li>India</li>
  <li>USA</li>
  <li>Japan</li>
</ol>

Links

Hyperlinks are created using <a> tags. The href attribute defines the target URL.

<p>Visit <a href="https://www.google.com">Google</a> for search.</p>
<p>Visit <a href="about.html">About Page</a> to learn more.</p>

Tables

Tables are defined using <table>, with rows using <tr> and cells using <td> or headers <th>.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Riya</td>
    <td>13</td>
    <td>Delhi</td>
  </tr>
</table>

Forms

Forms collect user input. Use <form> and input fields <input> with types like text, email, number, password, etc.

<form>
  Name: <input type="text"><br><br>
  Email: <input type="email"><br><br>
  Age: <input type="number"><br><br>
  <input type="submit" value="Submit">
</form>

Semantic HTML

Semantic elements give meaning to sections: <header>, <footer>, <nav>, <section>, <article>, <aside>.

<header>Header Content</header>
<nav>Navigation Links</nav>
<section>Main Section</section>
<aside>Sidebar Content</aside>
<footer>Footer Information</footer>

Final Example — Mini Profile Page

This is a simple, self-contained HTML page showing a mini profile with headings, lists, and links. Save as profile.html.

profile.html

<h1>My Profile</h1>
<p>Hello! My name is Riya. Welcome to my mini profile page.</p>
<h2>Personal Details</h2>
<ul>
  <li>Age: 14</li>
  <li>City: Delhi</li>
  <li>Hobbies: Reading, Painting, Coding</li>
</ul>
<h2>Education</h2>
<ol>
  <li>Grade 8</li>
  <li>School: Sunshine Public School</li>
</ol>
<h2>Contact</h2>
<p>Email: <a href="mailto:riya@example.com">riya@example.com</a></p>
<p>Portfolio: <a href="https://example.com">https://example.com</a></p>

MCQs

1. Which tag is used to create a paragraph in HTML?

(a) <para>

(b) <p>

(d) <paragraph>

► (b) <p>

2. Which tag defines the largest heading in HTML?

(a) <h1>

(b) <h2>

(d) <heading>

► (a) <h1>

3. What is the correct HTML element for inserting an image?

(a) <image>

(b) <img>

(d) <src>

► (b) <img>

4. Which attribute specifies the URL of a link?

(a) src

(b) link

(d) ref

► (c) href

5. Which tag is used to create an unordered list?

(a) <ol>

(b) <ul>

(d) <list>

► (b) <ul>

6. How do you create a table row in HTML?

(a) <td>

(b) <th>

(d) <row>

► (c) <tr>

7. Which tag defines a table header cell?

(a) <td>

(b) <th>

(d) <tr>

► (b) <th>

8. Which HTML element is used for creating a form?

(a) <input>

(b) <form>

(d) <label>

► (b) <form>

9. What is the default file extension for HTML files?

(a) .htm

(b) .html

(d) .web

► (b) .html

10. Which tag is used to define a numbered list?

(a) <ul>

(b) <ol>

(d) <list>

► (b) <ol>

11. Which attribute is used to specify alternative text for an image?

(a) alt

(b) src

(d) text

► (a) alt

12. Which semantic tag represents content separate from main content?

(a) <article>

(b) <section>

(d) <div>

► (c) <aside>

13. Which tag is used to create a line break?

(a) <br>

(b) <break>

(d) <hr>

► (a) <br>

14. Which tag is used to define a footer section?

(a) <footer>

(b) <foot>

(d) <bottom>

► (a) <footer>

15. Which element is used to define navigation links?

(a) <nav>

(b) <menu>

(d) <header>

► (a) <nav>

16. Which tag is used to emphasize text semantically?

(a) <strong>

(b) <em>

(d) <i>

► (b) <em>

17. Which element is used for the main content of a page?

(a) <main>

(b) <section>

(d) <body>

► (a) <main>

18. In the final profile example, which tag lists hobbies?

(a) <ol>

(b) <ul>

(d) <div>

► (b) <ul>