My progress
Menu

Level 2 · Web Development Basics · Course 2.1 HTML

Module 11: Introduction to HTML

Goal: understand what HTML is, write a complete web page by hand, and know the parts every page has. By the end you'll have a personal introduction page, the first page of the website you build across this level.

You'll need: VS Code, a browser, and your my-first-site folder from Level 1 (with Git set up).

Lessons

  1. 1What HTML is15–25 minutes✓
  2. 2Document structure15–25 minutes✓
  3. 3Text and headings15–25 minutes✓
  4. 4Elements and attributes15–25 minutes✓
  5. 5Your first web page15–25 minutes✓

🛠️Module practice: personal introduction page

Create index.html in my-first-site with:

  1. The full skeleton, with lang, charset, viewport and a meaningful <title>.
  2. One <h1> with your name.
  3. At least three <h2> sections (for example: about me, what I'm learning, what I want to build), each with a paragraph.
  4. At least one <strong> and one <em>, used for meaning, not looks.
  5. A comment explaining one section.
  6. No errors in the W3C validator, then a Git commit.

✅Module check

Explain in a few sentences, in your own words:

What does HTML do, and what's the difference between the <head> and the <body>?

Show a good answer

A good answer mentions: HTML marks up content so the browser knows what each piece is (headings, paragraphs, links), which also helps screen readers and search engines; it doesn't control looks (CSS) or behaviour (JavaScript). The <head> holds information about the page, like the title, character set and viewport, which isn't shown in the page; the <body> holds everything visitors see.

📝Module quiz

10 questions · 10 marks each · 100 marks in all · pass mark 70% · retry as often as you like ·

1. Is HTML a programming language?

Why each option is right or wrong

  • “Yes, because you write it in a code editor” (Incorrect): Many things are written in code editors, including plain notes. Being typed as code doesn't make it a programming language.
  • “Yes, because pages built with it can be interactive” (Incorrect): Interactivity comes from JavaScript. HTML on its own only describes content.
  • “No, it's a design language for colours and layout” (Incorrect): That's CSS. HTML describes what content is, not how it looks.
  • “No, it's a markup language that describes what content is” is correct.

    HTML labels content: this is a heading, this is a paragraph, this is a link. It can't calculate, repeat steps or make decisions, which is what programming languages do. JavaScript adds that behaviour.

    • Markup: tags wrapped around content to say what it is.
    • Programming: instructions with logic, like 'if the form is empty, show an error'.

📖 Revise: Lesson 1: What HTML is

Question ID module-11-q1 · Report a mistake in this question
2. Which layer of a web page decides that a button is blue?

Why each option is right or wrong

  • “HTML, through the button tag itself” (Incorrect): The <button> tag says what the element is. Its colour comes from CSS, either the browser's defaults or your styles.
  • “JavaScript, which runs when the page loads” (Incorrect): JavaScript can change styles, but colours are normally set in CSS.
  • “The web server, when it sends the page” (Incorrect): The server just sends files. The browser applies the CSS to decide colours.
  • “CSS” is correct.

    HTML says 'this is a button'. CSS says how it looks: its colour, size, font and spacing. Keeping them separate lets you restyle a whole site without touching its content.

    • One stylesheet, many pages: change the brand colour once and every page updates.

📖 Revise: Lesson 1: What HTML is

Question ID module-11-q2 · Report a mistake in this question
3. Where does the text inside <title> appear?

Why each option is right or wrong

  • “As the biggest heading at the top of the page” (Incorrect): That's the <h1>. The title isn't shown in the page body.
  • “In the page footer, next to the copyright line” (Incorrect): Footers are written in the body with <footer>. The title isn't displayed there.
  • “Nowhere, because it's only a note for developers” (Incorrect): Notes for developers are comments. The title is shown in tabs and search results.
  • “In the browser tab and in search results” is correct.

    The <title> lives in the head of the page. Browsers show it on the tab and in bookmarks, and search engines usually use it as the clickable headline in results. It isn't shown on the page itself.

    • Write it for people: clear and specific, like 'Sharma Textiles | Silk Sarees'.
    • One per page: each page should have its own title.

📖 Revise: Lesson 2: Document structure

Question ID module-11-q3 · Report a mistake in this question
4. Your page shows Hindi letters as strange symbols. What's probably missing?

Why each option is right or wrong

  • “A Hindi font file uploaded to the server” (Incorrect): Fonts change how letters look; they can't fix letters decoded wrongly. Most devices already have fonts for Hindi.
  • “An <html lang="hi"> attribute on the page” (Incorrect): lang helps screen readers and search engines, but it doesn't tell the browser how to decode the text.
  • “A link to a stylesheet with Hindi settings” (Incorrect): CSS styles text after it's decoded. It can't fix the decoding.
  • “<meta charset="utf-8"> in the head” is correct.

    Text is stored as numbers. The charset tells the browser which table to use to turn those numbers back into letters. UTF-8 covers almost every writing system, including Hindi. Without it, the browser may guess wrong and show symbols.

    • Put it first in the head: before any text, so the browser knows early.
    • Save the file as UTF-8 too: most modern editors do this by default.

📖 Revise: Lesson 2: Document structure

Question ID module-11-q4 · Report a mistake in this question
5. You want a small grey sub-title and use <h5> straight after <h1>. What's wrong?

Why each option is right or wrong

  • “<h5> is out of date and no longer supported” (Incorrect): h5 is valid HTML. The problem is skipping levels.
  • “Nothing, because the browser shows h5 smaller anyway” (Incorrect): It looks right but breaks the page's outline. Looks and structure are separate.
  • “Sub-titles must go inside the <title> element” (Incorrect): <title> is for the browser tab, not for headings on the page.
  • “Heading levels describe structure, not size” is correct.

    Headings form an outline: h1 is the page's main topic, h2 the sections, h3 the sub-sections. Jumping from h1 to h5 breaks that outline for screen readers and search engines. Use <h2> and make it small and grey with CSS.

    • Screen-reader users jump through headings to navigate; skipped levels confuse them.
    • Size is CSS's job: any heading can be styled any size.

📖 Revise: Lesson 3: Text and headings

Question ID module-11-q5 · Report a mistake in this question
6. You press Enter five times between two sentences in your HTML. What does the browser show?

Why each option is right or wrong

  • “Five blank lines between the two sentences” (Incorrect): Line breaks in the source are ignored. Only elements create structure.
  • “One blank line, since browsers keep the first break” (Incorrect): All the breaks collapse into a single space, so the sentences run together.
  • “A warning that the HTML contains empty lines” (Incorrect): Browsers are forgiving and don't warn about whitespace.
  • “No extra gap; use separate <p> elements instead” is correct.

    Browsers collapse line breaks and extra spaces in HTML source into a single space. Layout comes from elements and CSS, not from how you space the source.

    • New paragraph: wrap each in <p>.
    • More space: use CSS margin, not empty lines or many <br> tags.

📖 Revise: Lesson 5: Your first web page

Question ID module-11-q6 · Report a mistake in this question
7. In <a href="contact.html">Contact us</a>, what is href="contact.html"?

Why each option is right or wrong

  • “The element, since it defines the link” (Incorrect): The element is a. href is information attached to it.
  • “The content that is shown on the page” (Incorrect): The content is 'Contact us', the text between the tags.
  • “A comment that the browser skips” (Incorrect): Comments look like <!-- ... -->. href is used by the browser.
  • “An attribute” is correct.

    Attributes give extra information about an element and sit inside its opening tag. Here, a is the element, href is an attribute saying where the link goes, and 'Contact us' is the content people see.

    • Pattern: <element attribute="value">content</element>.
    • Other examples: src and alt on images, type on inputs.

📖 Revise: Lesson 4: Elements and attributes

Question ID module-11-q7 · Report a mistake in this question
8. Why should a site's home page usually be called index.html?

Why each option is right or wrong

  • “Search engines only index pages named index” (Incorrect): Search engines index any page they can reach. The name matters to the server, not the search engine.
  • “Browsers refuse to open a home page with another name” (Incorrect): Browsers open any file name. The server decides what to send for a bare address.
  • “It loads faster because servers cache it first” (Incorrect): The name doesn't change loading speed.
  • “Servers open it automatically for a folder or domain” is correct.

    When someone visits a domain or a folder without naming a file, most web servers look for index.html and serve it. That's why visiting prolearners.in shows the home page.

    • Each folder too: /courses/ shows courses/index.html.
    • Configurable: servers can be set up differently, but index.html is the common default.

📖 Revise: Lesson 5: Your first web page

Question ID module-11-q8 · Report a mistake in this question
9. The validator says "Element h2 not allowed as child of element p". What does it mean?

Why each option is right or wrong

  • “The page has more than one h2 heading” (Incorrect): Many h2s are fine. The problem is where this one sits.
  • “The h2 needs a class before it is allowed” (Incorrect): Classes are for styling. They don't change what may go inside a paragraph.
  • “h2 is deprecated and should be avoided” (Incorrect): h2 is a normal, current element.
  • “A heading was placed inside a paragraph” is correct.

    Paragraphs can only contain text-level content like links and emphasis. Headings are separate blocks. The browser may close the paragraph early to fix it, which can move your text or styles unexpectedly.

    • Fix: close the </p> before the <h2> starts.
    • Why validate: browsers hide errors by guessing, and each guesses differently.

📖 Revise: Lesson 4: Elements and attributes

Question ID module-11-q9 · Report a mistake in this question
10. Why is <p>Hi <em>there</p></em> a problem?

Why each option is right or wrong

  • “<em> isn't allowed inside a paragraph” (Incorrect): Emphasis inside paragraphs is normal. The order of closing is the issue.
  • “The paragraph is too short to need emphasis” (Incorrect): Length doesn't matter. Nesting does.
  • “Nothing, since browsers display it correctly” (Incorrect): It may look fine in one browser and break in another. Valid nesting avoids surprises.
  • “The elements close in the wrong order” is correct.

    Elements must nest like boxes: the last one opened must close first. Here <em> opens inside <p> but closes after it. Browsers repair this by guessing, and different browsers may guess differently, causing odd styling bugs.

    • Correct: <p>Hi <em>there</em></p>.
    • Habit: close tags in reverse order of opening; editors with auto-closing help.

📖 Revise: Lesson 4: Elements and attributes

Question ID module-11-q10 · Report a mistake in this question

ProLearners Assist