HTML Basics — Complete Course

HTML provides six levels of heading and a rich set of inline elements for formatting text. Use headings for structure, not for visual size — CSS handles appearance.

Heading Levels h1–h6

HTML provides six heading levels, <h1> being the most important and <h6> the least. Use headings to create a logical outline of your page — search engines and screen readers depend on this hierarchy. Use only one <h1> per page, as it represents the main title.

Roman Urdu: HTML mein chhe heading levels hain. <h1> sabse bara aur ahem hota hai, <h6> sabse chota. Headings page ka outline banati hain — Google aur screen readers isi se samajhte hain page ka structure kya hai. Ek page mein sirf ek <h1> hona chahiye jo page ka main title ho.

<h1>Page Title — used once per page</h1>
<h2>Major Section</h2>
<h3>Sub-section</h3>
<h4>Sub-sub-section</h4>
<h5>Rarely used</h5>
<h6>Smallest heading</h6>

Paragraphs & Inline Formatting

The <p> tag wraps a block of text into a paragraph. Inside paragraphs, inline tags let you format individual words: <strong> for bold (important), <em> for italic (emphasis), <mark> for highlight, <del> for strikethrough, and <code> for inline code snippets. Use <br> only when a line break is meaningful, like in a poem or address.

Roman Urdu: <p> tag se ek paragraph banta hai. Paragraph ke andar inline tags se alag alfaz format kar sakte hain: <strong> se bold, <em> se italic, <mark> se highlight, <del> se kaat ke dikhana, aur <code> se code likhna. <br> sirf wahan use karein jahan line break zaruri ho, jaise poem ya address mein.

<p>A regular paragraph of text.</p>

<p>
  This is <strong>bold / important</strong> text.
  This is <em>italic / emphasised</em> text.
  This is <mark>highlighted</mark> text.
  This is <del>deleted</del> text.
  This is <code>inline code</code>.
</p>

<!-- Force a line break (use sparingly) -->
<p>Line one.<br>Line two.</p>

<!-- Horizontal rule / thematic break -->
<hr>

⚠️ Don't use headings for size. Use <h1> because it's the page title, not because you want large text. Use CSS for visual sizing.

Links and images are the two most fundamental non-text elements. The anchor tag <a> connects pages; <img> embeds visuals.

Anchor Tags — Links

The <a> (anchor) tag creates a clickable link. The href attribute holds the destination URL. Use target="_blank" to open in a new tab — always add rel="noopener" alongside it for security. For internal navigation within the same page, use a #id as the href. You can also create email links with mailto:.

Roman Urdu: <a> tag se clickable link banta hai. href mein destination URL daalein. target="_blank" se link naye tab mein khulta hai — saath mein rel="noopener" zaroor likhein taake security masla na ho. Same page ke andar kisi jagah jump karne ke liye #id use karein. Email link ke liye mailto: likhein.

<!-- External link — opens in same tab -->
<a href="https://example.com">Visit Example</a>

<!-- External link — opens in new tab -->
<a href="https://example.com" target="_blank" rel="noopener">New Tab</a>

<!-- Internal link — another page in your site -->
<a href="about.html">About Us</a>

<!-- Jump link — scroll to an element by id -->
<a href="#contact">Jump to Contact</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

Images

The <img> tag embeds an image. It is a self-closing tag — no closing </img> needed. The src attribute points to the image file (local path or full URL). The alt attribute provides a text description used by screen readers and shown when the image fails to load. Setting width and height prevents layout shift while the image loads.

Roman Urdu: <img> tag se image page mein lagti hai. Yeh self-closing tag hai — closing tag ki zarurat nahi. src mein image ka path ya URL daalein. alt mein image ka description likhein jo screen readers aur visually impaired users ke liye zaruri hai, aur tab bhi dikhta hai jab image load na ho. width aur height dene se page load ke waqt layout theek rehta hai.

<!-- Basic image -->
<img src="photo.jpg" alt="A description of the image">

<!-- With explicit dimensions -->
<img src="logo.png" alt="Company Logo" width="200" height="80">

<!-- Image from the web -->
<img src="https://picsum.photos/400/200" alt="Random photo">

<!-- Clickable image (link wrapping an img) -->
<a href="https://example.com">
  <img src="banner.jpg" alt="Click to visit">
</a>

📌 Always write alt text. The alt attribute describes the image for screen readers and appears if the image fails to load. For decorative images only, use alt="".

HTML has three types of list: unordered (bullets), ordered (numbers), and description lists. All can be nested inside each other.

Unordered & Ordered Lists

An unordered list (<ul>) displays items with bullet points — use it when the order does not matter, like a shopping list. An ordered list (<ol>) displays items numbered in sequence — use it when order matters, like step-by-step instructions. Both use <li> for each individual item.

Roman Urdu: Unordered list (<ul>) mein bullet points hote hain — jab order matter nahi karta, jaise khareedari ki list. Ordered list (<ol>) mein numbers hote hain — jab sequence zaruri ho, jaise kisi kaam ke steps. Dono mein har ek item ke liye <li> tag use hota hai.

<!-- Unordered list — bullet points -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

<!-- Ordered list — numbered steps -->
<ol>
  <li>Preheat the oven to 180°C</li>
  <li>Mix the batter</li>
  <li>Bake for 25 minutes</li>
</ol>

Nested Lists

Lists can be placed inside other lists to create a hierarchy of items. Simply put a <ul> or <ol> inside an <li> of the parent list. Browsers automatically indent nested lists to show the structure visually. This is useful for navigation menus, table of contents, and categorised data.

Roman Urdu: Ek list ke andar doosri list rakh kar hierarchy bana sakte hain. Parent list ke kisi <li> ke andar naya <ul> ya <ol> daalein. Browser khud hi nested list ko andar se dikhata hai. Yeh navigation menus, table of contents, aur categories ke liye kaam aata hai.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
</ul>

Description List

A description list (<dl>) pairs terms with their definitions. Each term uses <dt> (definition term) and each definition uses <dd> (definition description). This is ideal for glossaries, FAQ pages, metadata display (like author/date), and any term–explanation pairing.

Roman Urdu: Description list (<dl>) mein term aur uski definition ka joda hota hai. Term ke liye <dt> aur definition ke liye <dd> use hota hai. Yeh glossary, FAQ pages, aur kisi cheez ki wazahat ke liye best hai — jaise author ka naam aur tarikh dikhana.

<!-- Term + definition pairs -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — structures web content</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — controls the visual appearance</dd>
</dl>

Tables are for tabular data — information that has rows, columns, and a logical relationship between cells. Never use tables purely for layout.

Basic Table Structure

HTML tables are built from rows and cells. The <table> wraps everything. <thead> holds the header row(s) and <tbody> holds the data rows — separating them is semantic best practice. Each row is a <tr>, and inside rows you use <th> for header cells (bold by default) or <td> for data cells.

Roman Urdu: HTML table rows aur cells se banta hai. <table> sab kuch wrap karta hai. <thead> mein header row hoti hai aur <tbody> mein data rows — inhe alag rakhna achi practice hai. Har row <tr> se banti hai. Row ke andar <th> header cell ke liye (jo bold hoti hai) aur <td> normal data cell ke liye use hota hai.

Tag	Meaning
<table>	Container for the whole table
<thead>	Header group (semantic, helps screen readers)
<tbody>	Body rows group
<tr>	Table row
<th>	Header cell — bold & centered by default
<td>	Data cell

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>28</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>34</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

Spanning Columns & Rows

colspan makes a cell stretch across multiple columns horizontally — useful for merged header labels. rowspan makes a cell stretch down multiple rows vertically — useful when a category applies to several rows. When you span, remember to remove the extra cells that the spanning cell now covers, or the table will misalign.

Roman Urdu: colspan se ek cell kai columns mein phail jaata hai — jaise ek bada header. rowspan se cell kai rows neeche tak jaata hai — jaise ek category multiple rows pe apply ho. Jab span karein, to extra cells ko hataana na bhoolein warna table teda ho jaata hai.

<!-- colspan: cell spans 2 columns -->
<td colspan="2">Merged cell</td>

<!-- rowspan: cell spans 2 rows -->
<td rowspan="2">Tall cell</td>

Forms collect input from the user. The <form> element wraps all the controls, and each control should have a <label> linked by the for / id pairing.

Common Input Types

HTML forms collect user data using various input types. type="text" accepts any text; type="email" validates an email format automatically on submission. A <select> dropdown lets users pick from fixed options. <textarea> allows multi-line text entry. A checkbox captures a yes/no toggle. The required attribute prevents form submission if a field is empty.

Roman Urdu: HTML forms mein mukhtalif input types hote hain. type="text" koi bhi text leta hai; type="email" automatically check karta hai ke email ka format sahi hai. <select> se dropdown menu banta hai. <textarea> se lambi text likhne ki jagah milti hai. checkbox haan/na ka option deta hai. required se field khali hone par form submit nahi hota.

<form action="/submit" method="post">

  <!-- Text input -->
  <label for="name">Full Name</label>
  <input type="text" id="name" name="name" placeholder="Jane Smith" required>

  <!-- Email input -->
  <label for="email">Email</label>
  <input type="email" id="email" name="email">

  <!-- Dropdown select -->
  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="uk">United Kingdom</option>
    <option value="us">United States</option>
    <option value="pk">Pakistan</option>
  </select>

  <!-- Textarea -->
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <!-- Checkbox -->
  <input type="checkbox" id="agree" name="agree">
  <label for="agree">I agree to the terms</label>

  <!-- Submit button -->
  <button type="submit">Send Message</button>

</form>

💡 Always pair labels with inputs. The for attribute on <label> must match the id on the input. This makes the label clickable and essential for accessibility.

Semantic elements have meaning — they tell the browser (and developers, screen readers, and search engines) what role a section plays. Use them instead of endless <div> tags.

Page-Level Semantic Elements

Semantic elements give meaning to your layout beyond just visual appearance. Instead of using generic <div> containers everywhere, HTML5 provides purpose-built tags: <header> for the top area, <nav> for navigation, <main> for the primary content, <article> for self-contained pieces, <section> for thematic groups, <aside> for supplementary content, and <footer> for the bottom area. Search engines and assistive technologies rely on these tags.

Roman Urdu: Semantic elements sirf dikhne ke liye nahi hote — inse page ka maqsad samajh aata hai. Aam <div> ke bajaaye HTML5 khas tags deta hai: <header> upar ke hisse ke liye, <nav> navigation ke liye, <main> asli content ke liye, <article> mukammal piece ke liye, <section> thematic hisse ke liye, <aside> side content ke liye, aur <footer> neeche ke hisse ke liye. Google aur screen readers inhi tags se samajhte hain.

Element	Purpose
<header>	Introductory content: logos, navigation, hero areas
<nav>	Navigation links — main menu, breadcrumbs, pagination
<main>	The dominant content of the page — use once
<article>	Self-contained content: blog post, news item, product card
<section>	Thematic grouping of content, usually with a heading
<aside>	Tangentially related content: sidebar, pull quote
<footer>	Footer: copyright, links, contact info

<body>

  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Article Title</h1>
      <section>
        <h2>Introduction</h2>
        <p>Content here...</p>
      </section>
    </article>

    <aside>
      <p>Related links...</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>

</body>

CSS controls how HTML looks. The quickest way to apply styles is with the style attribute directly on an element — called inline styles. For larger projects, move styles to a <style> block or external stylesheet.

Inline style Attribute

The style attribute lets you write CSS directly inside an HTML tag. You can set color for text colour, background-color for the fill, font-size and font-weight for typography, and margin / padding for spacing. Multiple properties are separated by semicolons. Inline styles have the highest priority in CSS but are hard to maintain — prefer a stylesheet for real projects.

Roman Urdu: style attribute se aap seedha HTML tag ke andar CSS likh sakte hain. color se text ka rang, background-color se peeche ka rang, font-size aur font-weight se likh ki style, aur margin/padding se jagah set karte hain. Alag properties ke beech semicolon lagaein. Inline styles ki priority sabse zyada hoti hai lekin large project mein inhe manage karna mushkil hota hai — asli kaam ke liye stylesheet use karein.

<!-- Color and background -->
<p style="color: red; background-color: #f0f0f0;">Red text</p>

<!-- Font size and weight -->
<h2 style="font-size: 32px; font-weight: bold;">Big heading</h2>

<!-- Spacing: margin (outside) and padding (inside) -->
<div style="margin: 20px; padding: 16px; border: 1px solid #ccc;">
  A boxed section
</div>

<!-- Width and text alignment -->
<p style="max-width: 600px; text-align: center;">Centered text</p>

Using a <style> Block

A <style> block inside <head> lets you write CSS rules that apply to the whole page. You target elements by tag name (body, h1), class name (.highlight), or ID (#main). This is far cleaner than repeating inline styles on every element. For even better organisation, move the CSS into a separate .css file and link it with <link rel="stylesheet">.

Roman Urdu: <head> ke andar <style> block mein CSS rules likhte hain jo poore page pe apply hoti hain. Tag name (body, h1), class (.highlight), ya ID (#main) se elements target karte hain. Yeh inline styles se kahin behtar hai. Bade project mein CSS alag .css file mein likhein aur <link rel="stylesheet"> se jorain.

<head>
  <style>
    body {
      font-family: sans-serif;
      background-color: #fafafa;
      color: #333;
    }
    h1 {
      color: #1a1a2e;
    }
    .highlight {
      background: yellow;
      padding: 4px 8px;
    }
  </style>
</head>
<body>
  <p class="highlight">This paragraph uses the .highlight class</p>
</body>

HTML5 introduced native elements for embedding video and audio — no Flash or plugins required.

Video

The <video> element embeds a video file directly in the page. Add the controls attribute to show play, pause, and volume buttons. The poster attribute sets a thumbnail image shown before the video plays. For maximum browser compatibility, provide multiple <source> formats — the browser picks the first one it supports. Text inside the tag shows as fallback for very old browsers.

Roman Urdu: <video> tag se video seedha page mein lagti hai. controls attribute se play, pause, aur volume buttons dikhte hain. poster se video ke shuru hone se pehle ek thumbnail dikhta hai. Zyada browsers ke liye kaam karne ke liye alag <source> formats dein — browser jo support kare woh use karta hai. Tag ke andar likha text bahut purane browsers ke liye backup hota hai.

<!-- Basic video with controls -->
<video src="clip.mp4" controls width="640">
  Your browser does not support HTML5 video.
</video>

<!-- Multiple formats for broader browser support -->
<video controls width="640" poster="thumbnail.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4"  type="video/mp4">
</video>

Audio

The <audio> element works just like <video> but for sound files. Add controls to show a playback bar. You can also use autoplay (starts playing immediately) and loop (replays continuously) — but avoid autoplay with sound as it interrupts users. Common formats are MP3 (universal) and OGG (open-source).

Roman Urdu: <audio> element bilkul <video> jaisa hai lekin sirf sound ke liye. controls se playback bar dikhti hai. autoplay se audio khud shuru hoti hai aur loop se baar baar chalti hai — lekin autoplay sound ke saath use na karein kyun ke yeh users ko pareshaan karta hai. MP3 sabse common format hai.

<audio src="podcast.mp3" controls></audio>

Iframe — Embed Any Web Content

An <iframe> (inline frame) embeds another webpage inside your page — commonly used for YouTube videos, Google Maps, and third-party widgets. The src attribute holds the embed URL. Always add a title attribute for accessibility. Add allowfullscreen for video players so users can go full-screen. Iframes carry security implications — only embed trusted sources.

Roman Urdu: <iframe> se doosri website ya content aapke page ke andar aa jaati hai — YouTube videos, Google Maps, aur baahri widgets isi se lagte hain. src mein embed URL daalein. Accessibility ke liye title zaroor likhein. Video ke liye allowfullscreen add karein. Sirf trusted aur safe sources embed karein — iframes security risk bhi ho sakta hai.

<!-- Embed a YouTube video -->
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  allowfullscreen
  title="Video title for accessibility">
</iframe>

Figure & Figcaption

<figure> is a semantic container for self-contained media — an image, chart, code snippet, or diagram. <figcaption> inside it provides a visible caption that is explicitly associated with the figure by the browser. This is more meaningful than a plain <p> tag placed next to an image, and helps screen readers understand the relationship between the image and its description.

Roman Urdu: <figure> ek semantic container hai jo image, chart, ya code ke liye use hota hai. <figcaption> us media ka visible caption deta hai jise browser khud figure se jodta hai. Yeh sirf image ke neeche ek paragraph likhne se zyada meaningful hai — screen readers bhi samajhte hain ke yeh caption is image ka hai.

<!-- Semantic image with a caption -->
<figure>
  <img src="chart.png" alt="Bar chart showing monthly revenue">
  <figcaption>Monthly revenue Q1 2024</figcaption>
</figure>

Now bring it all together. This is a complete, copy-ready personal webpage that uses everything from this course: document structure, headings, links, images, lists, a table, a form, semantic layout, and basic CSS.

📌 How to use this: Copy the code below, paste it into a file named index.html, and open it in any browser. It works completely offline.

This project combines every concept from the course into one real webpage. It uses semantic structure (<header>, <main>, <footer>), a profile image, navigation links, a skills table, a contact form with labels, and a <style> block for visual design. Study how all the pieces connect — then try customising the name, colours, and content to make it your own.

Roman Urdu: Is project mein course ke sab concepts ek saath use hue hain. Semantic structure (<header>, <main>, <footer>), profile image, navigation links, skills table, labels ke saath contact form, aur visual design ke liye <style> block — sab kuch hai. Dekho kaise sab cheezein judi hain, phir apna naam, rang, aur content badal ke ise apna bana lo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jane Smith — Web Developer</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; color: #222; background: #f9f9f9; line-height: 1.7; }
    header { background: #1a1a2e; color: white; padding: 40px 24px; text-align: center; }
    nav a  { color: #c9a84c; margin: 0 12px; text-decoration: none; }
    main   { max-width: 860px; margin: 40px auto; padding: 0 24px; }
    section { margin-bottom: 48px; }
    h2     { border-bottom: 2px solid #c9a84c; padding-bottom: 8px; margin-bottom: 16px; }
    table  { width: 100%; border-collapse: collapse; }
    th, td { padding: 10px 14px; border: 1px solid #ddd; text-align: left; }
    th     { background: #1a1a2e; color: white; }
    input, textarea, select {
      width: 100%; padding: 10px; margin: 6px 0 16px;
      border: 1px solid #ccc; border-radius: 6px; font-size: 14px;
    }
    button {
      background: #c9a84c; color: white; border: none;
      padding: 12px 28px; border-radius: 6px; cursor: pointer; font-size: 15px;
    }
    footer { text-align: center; padding: 32px; color: #888; font-size: 13px; }
  </style>
</head>
<body>

  <header>
    <img src="https://i.pravatar.cc/100" alt="Jane's photo"
         style="border-radius: 50%; margin-bottom: 12px;">
    <h1>Jane Smith</h1>
    <p>Web Developer · Designer · Coffee Enthusiast</p>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>

    <section id="about">
      <h2>About Me</h2>
      <p>Hi! I'm a front-end developer with 5 years of experience building
         accessible, fast, and beautiful websites.</p>
      <p>I specialise in <strong>HTML</strong>, <strong>CSS</strong>,
         and <strong>JavaScript</strong>.</p>
    </section>

    <section id="skills">
      <h2>Skills</h2>
      <table>
        <thead><tr><th>Skill</th><th>Level</th><th>Years</th></tr></thead>
        <tbody>
          <tr><td>HTML</td><td>Expert</td><td>5</td></tr>
          <tr><td>CSS</td><td>Expert</td><td>5</td></tr>
          <tr><td>JavaScript</td><td>Advanced</td><td>4</td></tr>
        </tbody>
      </table>
    </section>

    <section id="contact">
      <h2>Contact Me</h2>
      <form>
        <label for="cname">Your Name</label>
        <input type="text" id="cname" placeholder="Alex Johnson">

        <label for="cemail">Email</label>
        <input type="email" id="cemail" placeholder="alex@example.com">

        <label for="cmsg">Message</label>
        <textarea id="cmsg" rows="4" placeholder="Say hello..."></textarea>

        <button type="submit">Send Message</button>
      </form>
    </section>

  </main>

  <footer>
    <p>&copy; 2024 Jane Smith. Built with pure HTML.</p>
  </footer>

</body>
</html>

💡 You've completed the course! You now know every foundational HTML concept. The next steps are CSS (layout, Flexbox, Grid) and JavaScript (interactivity). The structure you learned here is the foundation for everything.