HTML

HTML (HyperText Markup Language) is the structural language of the web. It is not just a collection of tags — it is a system of semantic building blocks that give meaning to content. Proper HTML separates structure from presentation: headings describe sections, <nav> describes navigation, <main> holds primary content, <article> and <section> describe self-contained pieces. Semantic HTML improves accessibility, search indexing, and maintainability. In this chapter we focus on elements you will use every day, why semantics matter, how to write clear markup, and small examples that you can copy and run in a browser.

Basic Document Structure

A valid HTML document starts with a doctype and includes <html>, <head>, and <body>. The head contains metadata; the body contains visible content. Screen readers, search engines, and other tools rely on correct structure to interpret pages correctly.

Hello World

<!doctype html>
<html>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Headings and Semantics

Use headings to express hierarchy — only one <h1> per page for the main title, then <h2>, <h3> for subsections. Semantic elements (like <header>, <footer>, <aside>) tell assistive tech how to move through a page.

<header><h1>Site Title</h1></header>
<main><h2>Article</h2></main>

Text, Paragraphs and Line Breaks

Paragraphs (<p>) wrap blocks of text. Inline tags like <strong> and <em> add emphasis with semantic meaning. Avoid using visual tags for meaning—use semantic markup first, then decoration later.

<p>This is a paragraph with <strong>strong</strong> and <em>emphasis</em>.</p>
<p>Next paragraph.</p>

Lists and Grouping

Choose <ul> for unordered items and <ol> for ordered sequences. Group related content with <section> or <article> to make pages easier to navigate for users and tools.

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Links, Images and Accessibility

Always include meaningful link text and an alt attribute on images. Good alt text describes the image purpose: use short, descriptive text for content images and empty alt for decorative images.

<a href="https://example.com">Visit Example</a>
<img src="html.png" alt="HTML icon" />

Final Example — small working page

This final example is a compact, working HTML page that summarizes the chapter. It demonstrates semantic structure, headings, lists, links, an image with alt text, and a simple form. Save this as index.html and open it in a browser to see how the elements render and how semantics affect reading order and accessibility.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample Page</title>
</head>
<body>
  <header><h1>Sample Site</h1></header>
  <main>
    <article>
      <h2>About</h2>
      <p>This page shows semantic elements and accessible markup.</p>
      <ul>
        <li>Headings</li>
        <li>Lists</li>
        <li>Forms</li>
      </ul>
      <p>External link: <a href="https://example.com">Example</a></p>
    </article>
    <aside><h3>Contact</h3><form><input type="text" placeholder="Name" /><br /><button>Send</button></form></aside>
  </main>
  <footer><p>Copyright &copy; 2025</p></footer>
</body>
</html>

MCQs

1. Which declaration should appear at the very top of an HTML5 document?

(a) <!DOCTYPE HTML PUBLIC>

(b) <!doctype html>

(d) <meta charset="utf-8">

► (b) <!doctype html>

2. Which element gives the main heading of a page and should usually appear only once?

(a) <h6>

(b) <header>

(d) <title>

► (c) <h1>

3. Which tag is appropriate for marking navigation links?

(a) <nav>

(b) <menu>

(d) <aside>

► (a) <nav>

4. What does the <img> alt attribute provide?

(a) Styling instructions

(b) A caption displayed under the image

(d) A URL to load a higher-resolution image

► (c) Alternative text for accessibility and SEO

5. Which element is used for a self-contained composition that could be distributed separately?

(a) <section>

(b) <article>

(d) <span>

► (b) <article>

6. Which attribute sets the character encoding for the page?

(a) lang

(b) charset

(d) content

► (b) charset (e.g., <meta charset="utf-8">)

7. Which list type should you use for steps that must remain in order?

(a) <ul>

(b) <ol>

(d) <menu>

► (b) <ol>

8. For accessibility, how many <h1> elements are recommended per page in most cases?

(a) As many as needed for styling

(b) Exactly two

(d) Zero

► (c) Usually one

9. Which tag groups table rows?

(a) <td>

(b) <tr>

(d) <caption>

► (b) <tr>

10. Which element should you use to mark secondary or tangential content, like a sidebar?

(a) <main>

(b) <aside>

(d) <header>

► (b) <aside>

11. Which is the correct way to create a clickable link to https://example.com?

(a) <a>https://example.com</a>

(b) <a href="https://example.com">Visit</a>

(d) <button href="https://example.com">Visit</button>

► (b) <a href="https://example.com">Visit</a>

12. What is the effect of using semantic HTML (e.g., <nav>, <article>)?

(a) Only visual layout changes

(b) Improves accessibility, SEO, and maintainability

(d) Prevents JavaScript from running

► (b) Improves accessibility, SEO, and maintainability

13. Which attribute provides a short description for images used purely for decoration?

(a) alt="" (empty)

(b) title

(d) aria-hidden="false"

► (a) alt="" (empty alt for decorative images)

14. Which element is best for the main content of the document?

(a) <main>

(b) <section>

(d) <article>

► (a) <main>

15. Which is the correct encoded form of an HTML tag when shown in plain text inside a page?

(a) <div>

(b) <div> (raw)

(d) <div> (but encoded as <div> in source)

► (d) <div> (but encoded as <div> in source)

16. Which input type is appropriate for collecting an email address?

(a) <input type="text">

(b) <input type="email">

(d) <input type="url">

► (b) <input type="email">

17. Which attribute should you include on <html> to declare page language for assistive tech?

(a) charset="utf-8"

(b) lang="en"

(d) href="en"

► (b) lang="en"

18. Where is the <meta charset="utf-8"> tag usually placed?

(a) Inside <body>

(b) At the top of <head>

(d) Inside <footer>

► (b) At the top of <head>