Lecture 3 Demo

HTML Introduction & Basic Structure, HTML Tags

[Classroom Tip] This demo shows the structure of HTML documents, the anatomy of HTML elements, and common tags in action. Use each section to reinforce the concepts from the lecture.

[Tip] Open DevTools (F12) → Elements tab to see the actual HTML being parsed by the browser.

1) HTML Document Tree Structure

Every HTML document is a tree of nested elements. Click the tags below to learn what each part does.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Page Title</title>
</head>
<body>
<h1>Main Heading</h1>
<p>A paragraph of text.</p>
<a href="#">A link</a>
</body>
</html>

Key insight: The browser reads this structure top-to-bottom and builds the DOM (Document Object Model) — an internal tree representation that CSS and JavaScript can then manipulate.

2) Common HTML Tags Explorer

Click each tag below to see what it does and view a rendered example.

h1-h6 p strong em a img br / hr mark
<h1> to <h6> — Headings. h1 is most important (use only once per page). h6 is least.

h1 Page Title

h2 Section

h3 Subsection

h4 Sub-subsection

<p> — Paragraph. Block-level, automatically adds spacing above and below.

This is a paragraph. Browsers automatically add margin above and below each paragraph element.

This is a second paragraph. Notice the spacing between them — that comes from the browser's default stylesheet.

<strong> — Bold + semantic importance. Screen readers may emphasize this.

This text is normal. This text is bold and semantically important. Back to normal.

Compare: b tag (presentation only) vs strong tag (semantic importance)

<em> — Italic + semantic emphasis. Screen readers may stress this differently.

The deadline is tomorrow — please submit before midnight.

Compare: i tag (presentation) vs em tag (semantic stress)

<a> — Anchor/Hyperlink. The href attribute specifies the destination.

External link (example.com)

Anchor link (jumps to #section2 on same page)

Email link (opens email client)

<img> — Image. Self-closing. src and alt are required attributes.
Sample placeholder image showing 200x120 dimensions <img src="photo.jpg" alt="Description of image">
<br> — Line break (inline). <hr> — Horizontal rule (thematic break).

Line one.
Line two (after br tag).
Line three.

Content below a horizontal rule (<hr>)

<mark> — Highlighted text. <small> — Smaller text. <u> — Underline.

Search result: The HTML standard was created by Tim Berners-Lee.

Small print: Terms and conditions apply.

Underlined text (avoid for non-links as it causes confusion)

3) Live HTML Editor

Type HTML below and see the rendered output instantly. Try headings, paragraphs, and formatting tags!

[Note] The preview updates as you type. Try adding <h1>, <mark>, <br>, or <ul><li> tags!

4) Well-formed vs Broken HTML

✓ Correct Nesting

<div>
  <p>This is <strong>correct</strong> nesting.</p>
</div>

This is correct nesting.

✗ Broken Nesting

<div>
  <p>This is <strong>broken nesting.</p>
  </strong>
</div>
The browser tries to auto-fix this but the result is unpredictable. Always close tags in reverse order!