📝 2. HyperText Markup Language (HTML)

HTML is the structural foundation of every web page. It defines content hierarchy, embeds media, links resources, and creates interactive forms. This section demonstrates core HTML elements, semantic tags, and modern best practices.

🏗️ HTML Document Structure & Headings

📄 basic skeleton

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Page</title></head>
<body>
  <!-- content -->
</body>
</html>

Heading <h1> (main title)

Heading <h2> - section

Heading <h3> - subsection

<h4> level

<h5> minor heading

<h6> smallest heading

Paragraphs with strong, emphasis, marked text, and <code> snippets.

📋 Lists: Ordered, Unordered & Definition

🍎 Unordered

HTML5 semantic elements
CSS styling
- Flexbox
- Grid
JavaScript

🔢 Ordered

Plan markup structure
Write HTML elements
Validate accessibility
Integrate with CSS/JS

📖 Definition List

HTML: HyperText Markup Language — defines content.
Element: Opening tag + content + closing tag.
Attribute: Provides extra info (e.g., class, id, src).

📊 HTML Tables — Structured Data

Table 1: key HTML attributes
Attribute	Purpose	Example
id	Unique identifier	<div id="header">
class	CSS/styling hook	<p class="highlight">
href	Link destination	<a href="https://...">
alt	Image description	<img src="photo.jpg" alt="description">
Essential for accessibility & SEO

📝 Interactive Forms — User Input Showcase

📬 Feedback Form (HTML demo)

Full name:

Email:

Select favourite topic:

Experience level: Beginner Intermediate Advanced

Skills (check all that apply): HTML5 CSS3 JavaScript

Message / comments:

Preferred date:

Favorite color:

✨ Showcases: text, email, select, radio, checkboxes, textarea, date, color picker, and form buttons.

🔗 Hyperlinks & Navigation

🌐 MDN HTML Documentation (external)

🔝 Internal link: jump to top of page

✉️ Email me (mailto link)

⬇️ Simulated download link

📞 Call example (tel:)

🖼️ Multimedia Elements: img, audio, video

🖼️ Image

Placeholder demonstrating HTML img element

<img src="..." alt="description">

🎵 Audio

<audio controls>

🎬 Video

<video> with poster

📌 Note: audio/video sources are placeholders, but the elements showcase full HTML5 multimedia support.

🏛️ Semantic HTML5 — Meaningful Structure

Semantic elements improve accessibility, SEO, and readability:

<header> : introductory content / branding
<nav> : navigation links
<main> : dominant content of the page
<article> : self-contained composition
<section> : thematic grouping
<aside> : sidebar / complementary info
<footer> : footer section
<figure> + <figcaption> : captioned media

semantic layout diagram — Figure 1: Example of semantic document outline.

🎯 Block vs Inline elements

Block-level: <div>, <p>, <h1>-<h6>, <section>, <ul> — occupy full width.

Inline: <span>, <a>, <strong>, <em>, <img> — stay within content flow.

🧩 Inline span styled inside a block div.

📌 HTML Comments & Entities

Comment example:  (invisible in rendered page).

💡 HTML provides the skeleton of every full stack application. All front-end frameworks ultimately render HTML/CSS/JS. This section demonstrates core tags, forms, semantics, and multimedia — essential skills for full stack developers.

⬆ Back to top