Lecture 3: HTML Basics & Structure

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-01-28

Lecture 3

HTML Basics & Structure

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

Learning Objectives

  • Understand the structure of HTML documents
  • Learn how to use basic HTML elements
  • Create and structure your first HTML 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

Quick Practice Exercise

Create an HTML page with:

  1. A main heading with your name
  2. A paragraph about yourself
  3. A <em> or <strong> somewhere
  4. A subheading “My Interests”
  5. A list of your interests (use <ul>)

Resources & References

Questions?

Next: Lecture 4 - HTML Grouping: Div & Span