HTML5 Features

Web Workers for Background Tasks Web Workers allow scripts to run in the background without affecting the main thread. Creating a Web Worker Server-Sent Events (SSE) SSE allows servers to push updates to the client over HTTP. Implementing SSE Server-side (Node.js example) Client-side Web Components Web Components allow custom, reusable HTML elements. Creating a Custom […]

  • Post author:
  • Post category: HTML
  • Reading time: 43 mins read
  • Post last modified: April 7, 2025

Web Workers for Background Tasks

Web Workers allow scripts to run in the background without affecting the main thread.

Creating a Web Worker

// worker.js
onmessage = function(e) {
    postMessage("Worker received: " + e.data);
};
JavaScript
// main.js
let worker = new Worker("worker.js");
worker.postMessage("Hello, Worker!");
worker.onmessage = function(e) {
    console.log(e.data);
};
JavaScript

Server-Sent Events (SSE)

SSE allows servers to push updates to the client over HTTP.

Implementing SSE

Server-side (Node.js example)

const express = require('express');
const app = express();
app.get('/events', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    setInterval(() => {
        res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);
});
app.listen(3000);
JavaScript

Client-side

<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
    console.log("New Event: ", event.data);
};
</script>
HTML

Web Components

Web Components allow custom, reusable HTML elements.

Creating a Custom Element

class MyElement extends HTMLElement {
    connectedCallback() {
        this.innerHTML = "<p>Hello from Web Component!</p>";
    }
}
customElements.define("my-element", MyElement);
JavaScript
<my-element></my-element>
HTML

HTML5 introduces powerful features for modern web applications. Next, we’ll discuss performance and optimization.

Tags:

Leave a Reply