Module 2 — HTML Fundamentals: Text, Links & Images

Learning Objectives

Understand the role of HTML in web pages and how browsers interpret markup.
Recognize and write common HTML elements for text, headings, lists, links and images.
Use attributes correctly (src, alt, href) and understand relative vs absolute paths.
Create a small multi-page personal site and use semantic HTML for accessibility.
Test, validate and preview HTML using the integrated playground.

Key Terms & Definitions

Short, clear definitions you must know for HTML work.

HTML: HyperText Markup Language — the standard language used to describe the structure of web pages.
Element: An HTML building block — tag pairs like <h1>...</h1> or single tags like <img>.
Tag: The markup surrounding content (e.g., <p> is a paragraph tag).
Attribute: Key/value pairs on tags that provide extra information (e.g., src, alt, href).
Attribute value: The value assigned to an attribute, always inside quotes (e.g., href="about.html").
Root element: The <html> tag that wraps the whole document.
Head: The <head> section containing meta information, title and links to CSS/JS.
Body: The <body> section containing page content visible to users.
Doctype: A declaration (<!DOCTYPE html>) that tells the browser which HTML version to expect.
Void element: An element that doesn't need a closing tag (e.g., <img>, <br>).
Nesting: Placing elements inside other elements. Correct nesting keeps the DOM valid.
DOM: Document Object Model — the browser’s representation of the page structure.
Semantic HTML: Using descriptive tags (<header>, <main>, <article>) to express meaning.
Heading: Tags <h1>–<h6> used to structure content by importance.
Paragraph: <p> tag for text blocks.
List: <ul> (unordered) and <ol> (ordered) with <li> items.
Anchor: <a> tag used to create links; uses href to point to destinations.
Relative path: Path relative to the current file (e.g., images/pic.jpg).
Absolute path: Full URL (e.g., https://example.com/pic.jpg).
Alt text: A short description for images used by screen readers and when images fail to load.
Responsive images: Using srcset and picture to serve appropriate image sizes.
Comment: Non-visible notes in HTML:  used for developer explanation.
Meta tag: Provides metadata (charset, viewport) inside the head.
Favicon: Small icon shown on browser tabs, linked via <link rel="icon" href="...">.
Character encoding: Specifies how characters are represented; UTF-8 is standard (<meta charset="utf-8">).
Form: <form> element used to collect user input (covered lightly here).
Accessibility (a11y): Practices to make pages usable by everyone (alt text, labels, keyboard navigation).
Validation: Checking HTML against standards (W3C validator).
Progressive enhancement: Start with solid HTML – add CSS/JS later so the page works for all users.

Detailed Theory — From Zero (concepts, examples, and best practices)

The aim of this section is to build a conceptual foundation and pair it with hands-on examples. Read slowly: after each short subsection try the example in the playground below.

2.1 Anatomy of an HTML document

Every page starts with a minimal skeleton. This exact structure is what browsers expect:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Page Title</title>
    <link rel="stylesheet" href="css/style.css"/>
  </head>
  <body>
    <!-- Visible content here -->
  </body>
</html>

Notes:

<!DOCTYPE html> is not a tag — it signals HTML5 to the browser.
lang="en" helps browsers and assistive tech know the language of content.
<meta name="viewport" ...> is essential for responsive pages on mobile.

2.2 Tags, elements and nesting rules

Tags come in pairs: <p>content</p>. Some are void (self-closing) like <img> or <br>. Correct nesting means you must close an inner tag before closing an outer tag:

<!-- CORRECT -->
<strong><em>Bold then italic</em></strong>

<!-- INCORRECT -->
<strong><em>Bad</strong></em>  <!-- broken nesting -->

2.3 Headings and document outline

Use headings to create a meaningful outline. The <h1> is the single most important title (usually one per page). Use <h2> – <h6> for subsections. Search engines and screen readers rely on this structure.

2.4 Paragraphs, line breaks and semantic grouping

Paragraphs use <p> and should wrap blocks of text. Use <br> sparingly for line breaks. For grouping content use <section>, <article> and <aside> when applicable.

2.5 Lists — ordered and unordered

When you need bullet lists or numbered steps use <ul> and <ol> with <li> items. Nested lists are allowed but keep them readable:

<ul>
  <li>Item one</li>
  <li>Item two<ul><li>Sub item</li></ul></li>
</ul>

2.6 Links — anchors and navigation

Anchors (<a>) create links. The href attribute points to the destination. For example:

<a href="about.html">About me</a>  <!-- relative -->
<a href="https://example.com" target="_blank" rel="noopener">External</a>

Best practices:

Use descriptive link text (avoid 'click here').
For external links use target="_blank" rel="noopener" to open safely.
Maintain consistent navigation across pages using the same header/footer structure.

2.7 Images and accessibility

Images add meaning and context. Always add alt text describing the image. Use relative paths in projects:

<img src="images/profile.jpg" alt="Photo of John Doe smiling" width="320" />

If an image is purely decorative, use alt="" so screen readers skip it.

2.8 Comments and documentation inside HTML

Comments help future-you and collaborators:

<!-- TODO: Replace placeholder image with real photo -->

2.9 Validation & tidy markup

Use the W3C Validator to check your pages for errors. Clean markup reduces browser quirks and accessibility issues.

Interactive Playground — Try it now (offline)

The playground lets you edit HTML and preview immediately. Try the example first, then modify and press Run.

HTML Editor

Preview

Practical: Build a Personal “About Me” Page (step-by-step)

Create project folder aan-html-about with index.html, contact.html, /images and /css/style.css.
Use the skeleton above and create a site with a header, nav (links to Home and Contact), a main section with an <h1> and two <p> paragraphs, and an image with proper alt text.
Include a list of skills using <ul> and mark one item as the current project using <strong>.
Link from the Home page to Contact with a relative link (contact.html), then open both pages using Live Server to test navigation.
Validate the page using the W3C HTML validator and fix any errors shown.

Advanced Tips (for mastery)

Prefer semantic tags (<main>, <article>) to generic <div> for sections that hold meaningful content.
Keep headings in order — a logical outline helps accessibility and SEO.
Use rel="noopener noreferrer" for external links opened with target="_blank".
Consider lazy-loading large images using the loading="lazy" attribute to improve performance.

Faith Corner

"Commit your work to the Lord, and your plans will be established." — Proverbs 16:3. Keep a disciplined, prayerful, and patient approach to learning — each small step builds competence.

ARISE AFRICA NETWORK VOCATIONAL COURSE (AAN)