Session 1.4 – HTML Fundamentals and Tags

Module 1: Introduction to Web Design | Duration: 1 hr

Learning Objectives

By the end of this session, students will be able to:

Understand the purpose and structure of HTML documents
Create properly structured HTML pages with correct syntax
Use common HTML tags for text formatting, headings, and paragraphs
Create lists, links, and insert images
Understand HTML attributes and their usage
Apply semantic HTML for better document structure

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure and content of web documents using a series of elements represented by tags.

Key Concept

HTML is not a programming language—it's a markup language that uses tags to define elements within a document. Tags tell the browser how to display content.

Structure

Defines content organization

Hierarchy

Nested structure of elements

Basic HTML Document Structure

Every HTML document follows a standard structure with required elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>

Declares the document as HTML5. Must be the first line.

<html>

Root element that contains all other HTML elements.

<head>

Contains metadata, title, and links to external resources.

<body>

Contains all visible content displayed in the browser.

HTML Tag Syntax

Opening Tag: <tagname>
Closing Tag: </tagname>
Self-Closing Tag: <tagname /> (e.g., <img />, <br />)
Attributes: <tagname attribute="value">

Text Formatting Tags

Headings

HTML provides six levels of headings, from h1 (most important) to h6 (least important):

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Formatting Elements

Tag	Description	Example	Display
`<p>`	Paragraph	`<p>Text</p>`	Text
`<strong>`	Strong emphasis (bold)	`<strong>Bold</strong>`	Bold
`<em>`	Emphasis (italic)	`<em>Italic</em>`	Italic
`<br>`	Line break	`Line1<br>Line2`	Line1 Line2
`<hr>`	Horizontal rule	`<hr>`
`<mark>`	Highlighted text	`<mark>Highlight</mark>`	Highlight
`<small>`	Smaller text	`<small>Small</small>`	Small
`<sub>`	Subscript	`H<sub>2</sub>O`	H₂O
`<sup>`	Superscript	`x<sup>2</sup>`	x²

Lists in HTML

HTML supports three types of lists:

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Item 1
Item 2
Item 3

Ordered List

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

First
Second
Third

Definition List

<dl>
  <dt>HTML</dt>
  <dd>Markup Language</dd>
  <dt>CSS</dt>
  <dd>Styling Language</dd>
</dl>

HTML: Markup Language
CSS: Styling Language

Links and Images

Hyperlinks (<a> tag)

The anchor tag creates hyperlinks to other pages or resources:

<!-- External link -->
<a href="https://www.example.com">Visit Example</a>

<!-- Internal link -->
<a href="/about.html">About Us</a>

<!-- Open in new tab -->
<a href="https://www.example.com" target="_blank">Open in New Tab</a>

<!-- Email link -->
<a href="mailto:info@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

Images (<img> tag)

The img tag embeds images in HTML documents:

<!-- Basic image -->
<img src="image.jpg" alt="Description">

<!-- Image with dimensions -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Responsive image -->
<img src="photo.jpg" alt="Photo" style="max-width: 100%; height: auto;">

Important Attributes

href: Specifies the URL for links
src: Specifies the image source path
alt: Alternative text for accessibility (required for images)
target: Specifies where to open the link (_blank, _self, _parent, _top)
title: Tooltip text shown on hover

Semantic HTML

Semantic HTML uses meaningful tags that describe their content, improving accessibility and SEO:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>Article Title</h1>
            <section>
                <h2>Section Heading</h2>
                <p>Content here...</p>
            </section>
        </article>

        <aside>
            <h3>Related Information</h3>
            <p>Sidebar content...</p>
        </aside>
    </main>

    <footer>
        <p>© 2024 Company Name</p>
    </footer>
</body>
</html>

<header>

Introductory content or navigation

<nav>

Navigation links section

<main>

Main content of the document

<article>

Self-contained content

<section>

Thematic grouping of content

<aside>

Sidebar or supplementary content

<footer>

Footer content

<figure>

Self-contained media with caption

<figcaption>

Caption for figure element

Benefits of Semantic HTML

Accessibility: Screen readers can better navigate content
SEO: Search engines understand page structure
Maintainability: Code is easier to read and maintain
Consistency: Standard elements across all browsers

Session Summary

Key Points

HTML uses tags to structure web content with opening and closing syntax
Basic structure includes <!DOCTYPE>, <html>, <head>, and <body>
Headings (h1-h6) and text formatting tags structure and style content
Lists can be ordered (<ol>), unordered (<ul>), or definition (<dl>)
Links (<a>) and images (<img>) connect and display external resources
Semantic HTML uses meaningful tags for better accessibility and SEO

Next Session Preview

In the next session, we will explore CSS Introduction and Types, learning how to style HTML elements and make web pages visually appealing.

Previous Session Course Home Next Session