HTML Tables

Tables are used to display structured data in rows and columns.

Tables should not be used for layout; they are meant only for data representation.

Syntax

<table>...</table>

Name
Age
Ana
22

    

HTML Lists

Lists group related items together in an ordered or unordered format.

Lists improve readability and structure content logically.

Syntax

<ul><li>Item</li></ul>

  
HTML
  
CSS

    

HTML Block & Inline

HTML elements are categorized as block-level or inline based on how they appear in the layout.

Block elements start on a new line and create structure, while inline elements flow within text content.

Syntax

<div>Block</div> <span>Inline</span>

Block element
Inline element
    

HTML Div

The div element is a container used to group content and apply styles or layout.

Divs are flexible and can hold any type of content, making them essential for page structure.

Syntax

<div>Content</div>

  Grouped content

    

HTML Classes

Classes allow you to apply styles or scripts to multiple elements at once.

Classes are essential for CSS styling and JavaScript targeting.

Syntax

<p class="note">Text</p>

Highlighted text
    

HTML Id

The id attribute uniquely identifies an element on a page.

Ids are useful for linking to specific sections or applying unique styles.

Syntax

<div id="header"></div>

Section 1
    

HTML Buttons

Buttons allow users to trigger actions such as submitting forms or running scripts.

Buttons can perform navigation, submit forms, or trigger events.

Syntax

<button>Click</button>

Click Me
    

HTML Iframes

Iframes embed another webpage or content within your page.

Iframes are commonly used to embed third-party content safely.

Syntax

<iframe src="url"></iframe>

HTML JavaScript

JavaScript makes HTML pages dynamic and interactive. You can embed scripts directly in HTML using the <script> tag, or link to an external JavaScript file.

JavaScript runs in the browser and can modify page content, handle user actions, and communicate with servers. Best practice is to place scripts at the bottom of the page or use the defer attribute.

Syntax

<script> // JavaScript code here </script>

<button onclick="showMessage()">Click Me</button>

<script>
  function showMessage() {
    alert("Hello from JavaScript!");
  }
</script>
    

Example Explained

• onclick — Event attribute that runs JavaScript when the button is clicked
• <script> — Defines a block of JavaScript code
• alert() — Displays a message dialog in the browser

HTML File Paths

File paths specify the location of resources like images, stylesheets, scripts, and other files relative to the current document or as absolute URLs.

Using relative paths keeps projects portable across different environments and servers.

Path Types

Syntax

<img src="images/photo.jpg" alt="description">

<img src="https://via.placeholder.com/150" alt="Sample">
<a href="../index.html">Go to Home</a>
    

HTML Computer Code

HTML contains several elements for defining user input and computer code.

These elements are used to display code snippets, keyboard shortcuts, and technical documentation clearly.

Syntax

<code>x = 5;</code>

x = 5; y = 6; z = x + y;
    

HTML Semantics

Semantic HTML uses meaningful tags that clearly describe the purpose of content, improving accessibility, SEO, and code readability.

Instead of relying only on generic containers, semantic elements like <article>, <section>, and <nav> provide context about what each part of the page represents.

Syntax

<article>Content</article>

  
Blog Post
  
This is a semantic article element.

    

HTML Graphics

HTML supports two powerful technologies for creating graphics on the web: Canvas (pixel-based, JavaScript-driven) and SVG (vector-based, scalable).

Choose Canvas for animations and games; choose SVG for icons, logos, and illustrations that need to be sharp at any size.

HTML Media

HTML5 introduced native support for embedding audio and video directly in web pages without needing plugins like Flash.

Media elements are widely supported and provide a seamless, accessible way to include rich content in your pages.

HTML Video

The <video> element embeds video content directly into a webpage with built-in browser controls.

Syntax

<video src="file.mp4" controls></video>

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
            

HTML Audio

The <audio> element embeds sound content such as music or podcasts directly into webpages.

Syntax

<audio controls><source src="file.mp3"></audio>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
            

HTML Plug-ins

The <object> and <embed> elements were historically used to embed external content like PDFs, Flash, or Java applets. Today, native HTML5 elements are preferred.

Syntax

<object data="file.pdf" type="application/pdf"></object>

<object data="document.pdf" type="application/pdf" width="500" height="400">
  <p>Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a></p>
</object>
            

HTML YouTube

The easiest way to embed a YouTube video is using an <iframe> with the YouTube embed URL.

Syntax

<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  allowfullscreen>
</iframe>
            

HTML Web APIs

HTML5 introduced several powerful browser APIs that allow JavaScript to access device features and browser capabilities directly.

These APIs make it possible to build rich, app-like experiences entirely in the browser without plugins.

HTML Geolocation

The Geolocation API allows you to get the user's current geographic location with their permission.

Syntax

navigator.geolocation.getCurrentPosition(successFn);

<button onclick="getLocation()">Get My Location</button>
<p id="demo"></p>

<script>
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    document.getElementById("demo").innerHTML = "Geolocation not supported.";
  }
}
function showPosition(position) {
  document.getElementById("demo").innerHTML =
    "Lat: " + position.coords.latitude +
    "<br>Lon: " + position.coords.longitude;
}
</script>
            

HTML Drag & Drop

The HTML Drag and Drop API enables elements to be dragged and dropped using mouse or touch events.

Syntax

<div draggable="true" ondragstart="drag(event)">Drag me</div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img.png" draggable="true" ondragstart="drag(event)">

<script>
function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
            

HTML Web Storage

Web Storage allows web applications to store data locally in the user's browser — more securely and with larger capacity than cookies.

Syntax

localStorage.setItem("key", "value");
localStorage.getItem("key");

<button onclick="saveData()">Save</button>
<button onclick="loadData()">Load</button>
<p id="result"></p>

<script>
function saveData() {
  localStorage.setItem("username", "LearnX User");
  alert("Saved!");
}
function loadData() {
  var name = localStorage.getItem("username") || "No data found";
  document.getElementById("result").innerText = name;
}
</script>
            

HTML Web Workers

Web Workers let you run JavaScript in a background thread, keeping the main UI thread free and responsive.

Syntax

const worker = new Worker("worker.js");
worker.postMessage("start");
worker.onmessage = (e) => console.log(e.data);

<!-- main.html -->
<button onclick="startWorker()">Start Worker</button>
<p id="result"></p>

<script>
let w;
function startWorker() {
  if (typeof(Worker) !== "undefined") {
    w = new Worker("worker.js");
    w.onmessage = (e) => {
      document.getElementById("result").innerText = e.data;
    };
  }
}
</script>

<!-- worker.js file -->
<!-- postMessage("Worker is running!"); -->
            

HTML Server-Sent Events (SSE)

Server-Sent Events allow a server to push real-time updates to the browser over a persistent HTTP connection.

Syntax

const source = new EventSource("/stream");
source.onmessage = (e) => console.log(e.data);

<!-- Client-side -->
<div id="updates"></div>
<script>
const source = new EventSource("/sse-endpoint");
source.onmessage = function(e) {
  document.getElementById("updates").innerHTML += e.data + "<br>";
};
</script>

<!-- Server-side (Node.js example) -->
<!-- res.setHeader("Content-Type","text/event-stream"); -->
<!-- res.write("data: Hello World\n\n"); -->
            

HTML Quiz

Test your HTML knowledge with these questions! Try to answer each one before revealing the answer.

HTML Exercises

Practice makes perfect! Try these hands-on exercises to reinforce your HTML skills.

<!DOCTYPE html>
<html>
<head>
  <title>Exercise Page</title>
</head>
<body>
  <h1>My Page Title</h1>
  <p>First paragraph goes here.</p>
  <p>Second paragraph goes here.</p>
</body>
</html>
            

HTML Accessibility

Accessible HTML ensures that your website can be used by everyone, including people with visual, auditory, motor, or cognitive disabilities.

ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes add accessibility information to HTML elements:

<!-- Button with ARIA label -->
<button aria-label="Close menu">×</button>

<!-- Navigation with role -->
<nav aria-label="Main navigation">
  <a href="#home">Home</a>
</nav>

<!-- Image with descriptive alt -->
<img src="chart.png" alt="Sales growth chart showing 40% increase in Q3 2025">

<!-- Accessible form -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
            

HTML Summary

You have now covered all the major HTML topics. Here's a quick recap of the most important concepts:

What's Next?

Now that you know HTML, the natural progression is:

1. CSS — Style your HTML pages with colors, fonts, and layouts
2. JavaScript — Add interactivity and dynamic behavior
3. A Framework (React, Vue) — Build modern web applications

HTML Tag List

A reference of the most commonly used HTML tags and their purpose: