Introduction to HTML

Module Overview
This comprehensive module introduces HTML (HyperText Markup Language), the foundation of all web pages. Learners will explore how HTML structures content, understand core elements and attributes, and progressively build complete web pages using best practices.

LEARNING OUTCOMES

  • • Define HTML and explain its role on the web
  • • Describe the structure of an HTML document
  • • Use text, media, and layout elements correctly
  • • Apply attributes to enhance HTML elements
  • • Write semantic and accessible HTML
  • • Create a multi-section static website

    • Unit 1: Understanding the Web and HTML

    The World Wide Web consists of interconnected documents accessed through browsers. HTML is the standard language used to create these documents. It tells the browser what content exists and how it is structured, but not how it behaves or looks in detail.
    HTML works alongside CSS for styling and JavaScript for interactivity. Together, these three technologies form the core of front-end web development.

    KEY TERMS

  • • HTML – HyperText Markup Language
  • • Element – A building block of an HTML page
  • • Tag – Markup used to define elements
  • • Browser – Software used to display web pages

    • Unit 2: HTML Document Structure

    Every HTML document follows a standardized structure that helps browsers correctly interpret and render content. This structure begins with a document type declaration and includes nested elements. The head section contains metadata such as the page title, while the body contains all visible content including text, images, and links.

    CORE STRUCTURE COMPONENTS

  • • DOCTYPE declaration
  • • html root element
  • • head section
  • • body section

    • Unit 3: Text and Content Elements

    HTML provides various elements for displaying text content. Headings create hierarchy, while paragraphs organize readable text blocks. Inline elements such as strong and emphasis help highlight important information within paragraphs.

    COMMON TEXT ELEMENTS

  • • Headings (h1 to h6)
  • • Paragraphs (p)
  • • Bold text (strong)
  • • Italic text (em)

    • hover any card → interactive glow, shift, and icons respond

    interactive ✦