Lecture 3: HTML Introduction, Basic Structure & Tags

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-01-28

Lecture 3

HTML Introduction, Basic Structure & Tags

Week 1 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Outcomes

After this lecture, students will be able to:

  • explain the structure of HTML documents
  • use basic HTML elements correctly
  • create and structure a valid first HTML page

Prerequisites

  • Understanding of web protocols from Lecture 2
  • Basic text editor usage
  • Familiarity with opening files in browser

Syllabus Mapping

Syllabus mapping:

  • HTML introduction and basic structure
  • HTML document types and standards
  • Foundation for all web pages

Prerequisites used:

  • Understanding of protocols from Lecture 2
  • Basic text editor knowledge

Agenda

  • HTML fundamentals and terminology
  • Document structure and anatomy
  • Common tags and attributes
  • Nesting and validation
  • Build first HTML page
  • Summary and exam preparation

Introduction and Motivation

  • Every website visible in a browser is built from HTML - it is the universal language of the web.
  • Without HTML there is no structure, no headings, no paragraphs, no links, no forms.
  • HTML is not a programming language but a markup standard that browsers understand worldwide.
  • Mastering HTML structure is the first concrete skill that allows students to actually build web pages.
  • All future topics - CSS, JavaScript, forms, accessibility - depend on correct HTML foundations.

Think About It - Interactive Questions

Before we dive into details, think about these:

  • If you right-click any webpage and choose “View Page Source” - what language do you see?
  • Why do browsers show your page differently if you forget to close a tag?
  • What is the difference between what the browser shows and what the code says?
  • Why does a heading need a special tag instead of just making text bigger with CSS?

HTML Document as a Tree

flowchart TD
  Root["html"]
  Head["head"]
  Body["body"]
  Meta["meta charset"]
  Title["title"]
  H1["h1 - Heading"]
  P["p - Paragraph"]
  A["a - Link"]
  Root --> Head
  Root --> Body
  Head --> Meta
  Head --> Title
  Body --> H1
  Body --> P
  P --> A

  • Every HTML document is a tree of nested elements.
  • The browser builds this tree (the DOM) and renders it as a visible page.

What is HTML?

HTML = HyperText Markup Language

  • Standard markup language for creating web pages
  • Uses tags to describe and structure content
  • NOT a programming language (no logic/loops)
  • Current version: HTML5 (since 2014)

Basic HTML Document Structure

<!DOCTYPE html>                                          # <1>
<html lang="en">                                         # <2>
<head>
    <meta charset="UTF-8">                              # <3>
    <title>My First Web Page</title>                    # <4>
</head>
<body>
    <h1>Welcome to Web Technology</h1>                  # <5>
    <p>This is my first HTML page.</p>
</body>
</html>
  1. Declares this is an HTML5 document
  2. Root element with language attribute
  3. Metadata and character encoding
  4. Page title (shown in browser tab)
  5. Visible page content

Anatomy of an HTML Element

+-------------------------------------+
� <p class="intro">Hello World</p>    �
+-------------------------------------+

+-----------------------------------------------+
� Opening  � Attribute� Content  � Closing Tag   �
�  Tag     �          �          �               �
� <p       � class=" � Hello    � </p>          �
�  >       � intro"  � World    �               �
+-----------------------------------------------+

Element = Opening Tag + Attributes + Content + Closing Tag

Self-closing (Void) Elements

Some HTML elements don’t need closing tags:

<img src="image.jpg" alt="Description" />

<br />    <!--Line break-->

<hr />    <!--Horizontal rule-->

<input type="text" />

<meta charset="UTF-8" />

These don’t have content, just attributes

Common HTML Tags

Structural

  • <h1> to <h6>: Headings
  • <p>: Paragraph
  • <div>: Container
  • <section>: Section

Content

  • <a>: Hyperlink
  • <img>: Image
  • <ul>, <ol>, <li>: Lists
  • <table>: Tabular data

HTML Attributes

Attributes provide additional information about elements:

<a href="https://example.com" target="_blank">Link</a>

<img src="logo.png" alt="Company Logo" width="200" height="100">

<div id="header" class="container main-section">Content</div>

Common attributes: id, class, src, href, alt, title, style

Heading Hierarchy

<h1>Page Title</h1>        <!-- Use ONLY once -->
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h4>Subsection 1.1.1</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>

? Use <h1> only once per page ? Follow hierarchical order (no jumping from h1 to h3) ? Improves SEO and accessibility

Paragraphs & Text Formatting

<p>This is a paragraph. Text wraps naturally.</p>

<strong>Bold text (important)</strong>
<b>Also bold (presentation)</b>

<em>Italic text (emphasis)</em>
<i>Also italic (presentation)</i>

<u>Underlined text</u>

<mark>Highlighted text</mark>

<small>Smaller text</small>

Prefer semantic tags (<strong>, <em>) over presentation tags (<b>, <i>)

Proper HTML Nesting

? Correct

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

? Incorrect

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

Always close tags in reverse order of opening: Last opened, first closed

Creating Your First HTML Page

  1. Open a text editor (VS Code, Notepad++)
  2. Type the HTML structure
  3. Save as .html file
  4. Open in a web browser
  5. See your creation!
<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

HTML Validation

Always validate your HTML:

  • W3C Validator - Official HTML validator
  • Check for syntax errors
  • Ensure standards compliance
  • Catch accessibility issues

Validation prevents browsers from having to guess your intentions

Memory Booster: The Layer Cake Analogy

Think of an HTML document like a layered cake recipe:

  • <!DOCTYPE html> = The cake tin label (tells everyone what type this is)
  • <html> = The cake stand (holds everything)
  • <head> = Invisible inside layer (metadata, recipe notes - not what you see)
  • <body> = The visible cake (everything your guests actually see and eat)
  • <h1> to <h6> = Cake tiers (hierarchy and importance)
  • <p> = The actual cake layers (content that fills the structure)

A cake without tiers is just a blob. A webpage without proper HTML structure is the same!

Resources & References

Structured Debug Checklist for HTML

Investigation order when HTML won’t display:

  1. verify DOCTYPE is present and correct
  2. check that all tags are properly closed
  3. inspect HTML structure in browser DevTools
  4. validate file encoding (should be UTF-8)
  5. check File > Page Source for actual HTML
  6. use W3C HTML Validator to find syntax errors
  7. verify file extension is .html not .txt

This approach separates structure vs rendering issues.

Live Demo: HTML Structure Explorer

Interactive demonstration showing HTML document structure, tags, and browser rendering:

?? Open Interactive Demo: HTML Basics & Structure

What you’ll see:

  • Typing tags live and watching the browser render them
  • HTML document tree visualization
  • Common tags and their visual output
  • Nesting examples: correct and incorrect
  • DevTools walk-through to inspect HTML elements

?? Key insight: The same HTML structure looks different with and without CSS!

Summary

After this lecture, you should understand:

  • HTML5 document structure and requirements
  • Purpose of head vs body sections
  • Meta tags and their importance
  • Semantic vs generic markup
  • How to create valid, accessible HTML documents

Exam Preparation Questions: Short

  • What is HTML?
  • What is the purpose of <!DOCTYPE html>?
  • What is the difference between <head> and <body>?
  • What is a tag?
  • What is an attribute?
  • Why is nesting important in HTML?
  • What is semantic HTML?
  • Why should HTML be validated?

Exam Preparation Questions: Long

  • Explain complete HTML document structure with example.
  • Differentiate semantic and non-semantic tags with use cases.
  • Explain importance of DOCTYPE, meta tags, and encoding.
  • Explain HTML nesting rules and common mistakes.
  • Discuss role of validation in professional web development.

Practice Task

  • Create a complete HTML5 document from scratch
  • Include title, headings, paragraph, list, and link
  • Use at least 3 semantic elements
  • Validate code using W3C validator
  • Correct all validation errors

Checklist

Can you:

  • explain HTML document structure?
  • use tags and attributes correctly?
  • create a valid HTML5 page?
  • answer short and long exam questions?

Next Lecture

  • Topic: HTML Grouping with Div and Span
  • Preparation required: revise block and inline behavior

HTML Introduction, Basic Structure & Tags

Next: Lecture 4 - HTML Grouping: Div & Span