Client-Server Architecture: When you open a browser (Client) and enter a URL, it requests files from a remote machine (Server). The server sends back HTML, CSS, and JavaScript files for your browser to render.
What is HTML? HyperText Markup Language defines the structure and meaning of content on a web page using elements enclosed in tags (<tagname>).
2. The Standard Document Template
Every HTML5 document requires a standard outer structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first paragraph on the web.</p> </body> </html>
Key Tag Explanations:
<!DOCTYPE html>: Informs the browser that this document uses HTML5 standards.
<html>: The root container element enclosing all page content.
<head>: Holds metadata, character encoding, CSS links, and document titles that aren't displayed directly inside the page body.
<meta charset="UTF-8">: Specifies universal UTF-8 text encoding (covers symbols, emojis, and international characters).
<body>: Encloses all visible content (text, images, forms, videos).
🛠️ Hands-on Task (Class 1)
Open your text editor (VS Code, CodePen, or Replit).
Create a file named index.html.
Type out the HTML5 template above, set the page title to “CS Student — Lab 1”, and view it in your browser.
Lesson 2: Headings, Text Formatting & Comments
1. Heading Hierarchy (<h1> – <h6>)
Headings structure page content logically for accessibility screen readers and search engines:
<h1>Main Topic (Page Title - Use Once)</h1> <h2>Major Subsection</h2> <h3>Sub-topic Details</h3>
2. Inline Text Elements
<strong>: Marks text as high importance (bold rendering).
<em>: Adds emphasis (italic rendering).
<mark>: Highlights text visually.
<code>: Formats inline programming snippets in monospace font.
<p>: Defines a block-level paragraph.
<br>: Forces a line break within text (self-closing tag).
3. Writing Code Comments
Comments are invisible in the browser viewport and are used for documentation:
<!-- This is a single-line comment -->
🛠️ Hands-on Task (Class 2)
Create a page named article.html and format a brief tech news entry using:
One <h1> title and two <h2> section headings.
At least two paragraphs containing <strong>, <em>, and <mark> tags.
A hidden code comment above the main article body.
The Core Anatomy of an HTML5 Document
Before placing content on a page, you need to set up the global document wrapper. Every HTML5 document follows a standardized root architecture that provides metadata to the browser, configures character encoding, and ensures accurate viewport scaling across mobile and desktop devices.
<!-- 3. Document Title --> <title>Academic Portal | Dashboard</title> </head> <body> <!-- All user-visible markup resides here --> </body> </html>
Critical Metadata Breakdown
<!DOCTYPE html>: The standard preamble that instructs the browser rendering engine to parse the document using the modern HTML5 standard in "standards mode" (preventing "quirks mode").
<html lang="en">: Defines the document's primary language. Essential for screen readers to select correct pronunciation rules and for search engine localization.
<meta charset="UTF-8">: Sets character encoding to UTF-8, covering virtually all human written languages and special symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the page rendering width to match the physical device width (width=device-width) and sets the initial zoom scale to $1.0$. Without this, mobile browsers default to simulating a desktop layout (typically $980\text{px}$ wide) and scale the text down, breaking responsive designs.
2. Semantic Landmark Elements vs. Non-Semantic Containers
Prior to HTML5, developers built web layouts using generic divisions (<div id="header">, <div class="nav">, <div id="sidebar">). While visually functional when styled with CSS, generic <div> elements convey zero meaning to search engine crawlers, screen readers, and other assistive technologies.
Get Ade Code’s stories in your inbox
Join Medium for free to get updates from this writer.
HTML5 introduced dedicated Semantic Landmark Elements that explicitly communicate the role of each page section.
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
When to Use <div> and <span>
<div> (Block-level container): Use strictly for styling, visual wrappers, grid layouts, or positioning hooks where no inherent semantic meaning exists.
<span> (Inline-level container): Use for applying targeted CSS styles, scripts, or micro-markup to a specific fragment of text inside a paragraph or heading.
3. Structural Content Grouping: Section vs. Article
A common point of confusion in university-level Web Development is choosing between <article> and <section>.
<!-- Example A: Sections inside an Article --> <main> <article> <h1>The Science of Quantum Computing</h1>
<section aria-labelledby="heading-intro"> <h2 id="heading-intro">Introduction to Qubits</h2> <p>Unlike classical bits...</p> </section>
<!-- Example B: Articles inside a Section --> <main> <section aria-labelledby="latest-news"> <h2 id="latest-news">Department News</h2>
<article> <h3>New Physics Lab Opening</h3> <p>The university has inaugurated...</p> </article>
<article> <h3>Research Grant Awarded</h3> <p>Dr. Smith received funding for...</p> </article> </section> </main>
Decision Matrix
Ask yourself: “If I syndicate or publish this snippet on another website or RSS feed completely isolated from the rest of this page, does it make complete sense on its own?”
Yes $\rightarrow$ Use <article>.
No $\rightarrow$ If it is simply a chapter, sub-topic, or thematic grouping of a larger piece, use <section>.
Headings construct an invisible outline of your page. Screen readers rely heavily on headings to let visually impaired users jump directly to relevant content blocks.
Never skip levels going down. Do not transition directly from an <h1> to an <h3>.
One <h1> per page (Recommended). While the HTML5 specification technically permits multiple <h1> elements if nested inside separate sectioning elements, web accessibility standards (WCAG) and SEO best practices strongly advocate for a single, authoritative <h1> defining the primary topic of the page.
Do NOT choose heading tags for text size. Use CSS for font sizes, weights, and styling. Use HTML heading tags exclusively to define document relationships and structural depth.
5. Web Accessibility Standards (WCAG) & ARIA Landmarks
Creating a accessible web layout involves ensuring that users navigating with keyboards or screen readers can parse and move through your page as effectively as a sighted mouse user.
A. Skip Links (Keyboard Navigation)
Keyboard-only users press the Tab key to move through focusable elements (links, buttons, inputs). On pages with large navigation bars, forcing a user to press Tab 20 times before reaching the main content creates unnecessary friction. A Skip Link solves this problem.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Skip Link Implementation</title> <style> /* Visually hide the skip link until it receives keyboard focus */ .skip-link { position: absolute; top: -100px; left: 10px; background: #000000; color: #ffffff; padding: 10px; z-index: 9999; } .skip-link:focus { top: 10px; /* Moves into view on focus */ } </style> </head> <body>
<!-- Must be the first focusable element inside <body> --> <a href="#main-content" class="skip-link">Skip to main content</a>
<header> <nav> <!-- Complex site navigation links here --> </nav> </header>
When multiple landmark elements of the same type exist on a single page (e.g., a main navigation and a footer navigation), assistive technologies require explicit labels to distinguish them.
Below is a complete HTML5 template integrating semantic landmarks, accessible headings, keyboard navigation, and ARIA attributes without using any generic <div> layout wrappers.
