Introduction

HTML(HyperText Markup Language) is the foundation of the web. It defines the structure and meaning of content displayed in a browser. Modern HTML focuses not only on visual layout but also on semantics, accessibility, maintainability, and performance. This document covers core and advanced HTML concepts needed to build professional, standards-compliant web pages.

HTML works together with CSS for styling and JavaScript for interactivity.

Why HTML

  • Foundation of the web

    Every website is built using HTML.

  • Defines page structure

    It organizes text, images, links, buttons, and forms.

  • Easy to learn

    HTML is beginner-friendly and simple.

  • Works with CSS & JavaScript

    HTML gives structure, CSS adds design, and JavaScript adds interactivity.

  • Universal and essential

    HTML is supported by all browsers and devices.

Basic Syntax

HTML is written using tags. Most tags have an opening and closing pair.

Example:

<tagname>Content</tagname>

Review Questions

  1. Why is document structure important for accessibility?
  2. How does structure affect how browsers render a page?

HTML Document Structure

An HTML document follows a standardized structure that allows browsers to correctly parse and render content. This structure separates metadata from visible content, ensuring clarity and consistency across devices and browsers.

A well-structured document improves accessibility, search engine optimization (SEO), and long-term maintainability. Browsers process HTML from top to bottom and construct an internal representation of the page before displaying it.

Key Points

  • HTML has a predictable document structure
  • Structure affects accessibility and SEO
  • Poor structure can cause rendering issues

Doctype and standard mode

The <!DOCTYPE /> declaration tells the browser to render the page using modern web standards. Without it, browsers may switch to quirks mode, which emulates older behavior and can break layouts.

Using the correct doctype ensures consistency and enables modern HTML features.

Key Points

  • Enables standards mode
  • Prevents quirks mode
  • Required for predictable layouts

Review Questions

  1. What is quirks mode?
  2. Why is standards mode important?

Browser Rendering and the DOM

Browsers parse HTML into the DOM before rendering. Invalid markup can delay rendering and cause unpredictable behavior. Understanding rendering helps improve performance.

Review Questions

  1. What is DOM
  2. How does invalid HTML affect rendering?

HTML Nesting and Content Hierarchy

HTML elements exist in a hierarchical structure where elements can contain other elements. This hierarchy forms the Document Object Model (DOM).

Correct nesting preserves meaning and ensures that browsers and assistive technologies understand content relationships. Improper nesting can lead to broken layouts and accessibility problems.

The <html> element contains <head> and <body>.This nesting helps browsers understand how content is structured.

Key Points

  • Helps browsers understand how content is structured.
  • Preserves content meaning
  • Elements follow a parent–child hierarchy.

Review Questions

  1. How does incorrect nesting affect screen readers?
  2. Why is hierarchy important beyond visual layout?

Using Semantic Tags

Semantic tags uses meaningful elements to describe content structure. It creates landmarks that help users navigate efficiently.

Examples include <header>, <nav>, <main>, <section>, <article>, and <footer>.

Benefits

  • Improved accessibility
  • Better SEO
  • Easier maintenance

When to use semantic tags vs generic tags

Semantic Tags

You should only use semantic tags when the element has meaning. An element having meaning in the sense that it is desvriptive and you can identify its purpose just from its name.

Example:


<header> </header>
<main> </main> 
<nav> </nav> 
<article> </article>

Using Generic Tags

Generic tags should be used onlly when semantic tags dont make sense. They come in handy when the content has no semantic meaning.

Example


<div id="modal"></div>
<span class="shadow-box"> </span>

Review Questions

  1. Why is semantic HTML better than generic containers?
  2. How does semantic HTML improve keyboard navigation?

Headings and Document Outline

Headings

Headings define the logical outline of a document. They help users scan content and allow assistive technologies to provide efficient navigation. Headings should be used based on importance, not appearance. Skipping heading levels can confuse both users and machines.

Key Points

  • One primary heading per page is recommended
  • Headings should follow logical order
  • Headings improve SEO and accessibility

Review Questions

  1. Why should headings not be chosen for styling?
  2. How do headings help screen reader users?

Headings and Document Outline

Text Semantics: Emphasis vs Importance

Semantic text elements communicate meaning rather than appearance. Emphasis changes how text is read or interpreted, while importance highlights critical information. Using semantic text correctly improves accessibility and clarity.

Key Points

  • Meaning is more important than styling
  • Assistive technologies rely on semantics

Review Questions

  1. How is semantic emphasis different from visual styling?
  2. When should importance be used?

HTML Attributes

Attributes provide additional information about elements. They influence styling, behavior, accessibility, and interactivity. Some attributes apply globally, while others are specific to certain elements. Incorrect or missing attributes can break functionality and accessibility.

Example:


  //id, href and class are attributes
  <a id="attribute" href="example.com"></a>

In this example, id="attribute" and href="url" are the attributes in in the anchor(a) element. They are usually written inside the openingtag of the element and an element can contain more than one element.

Key Points

  • Attributes modify element behavior
  • Some attributes are required
  • Misuse can cause invalid HTML

Review Questions

  1. What problems arise from missing required attributes?
  2. How do attributes interact with CSS and JavaScript?

Clean HTML Formatting

Clean formatting improves readability and collaboration. While browsers ignore formatting, developers rely on it for understanding and debugging. Consistent indentation and logical grouping reduce errors and improve maintainability.

Review Questions

  1. Why is formatting important even if browsers ignore it?
  2. How does clean formatting help debugging?