HTML Fundamentals

A comprehensive guide to understanding HTML, its history, and its core concepts.

This guide covers essential concepts of HTML, designed for beginners and as a quick reference for developers looking to strengthen their foundational knowledge.

🌐 What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and design web pages. It structures content on the web using a system of tags and attributes to define headings, paragraphs, links, images, tables, and other content.

HTML is the backbone of a website and is used in conjunction with CSS (Cascading Style Sheets) for presentation and JavaScript for interactivity.

HTML provides the basic structure of a webpage, which is rendered by the browser.

📜 History of HTML

HTML was created by Tim Berners-Lee in 1991 to structure documents on the early World Wide Web. Over time, HTML has gone through several versions, evolving to meet the needs of modern web development. HTML5 is the latest version, bringing new elements, APIs, and features for building rich web applications.

The first version of HTML, primarily designed to display simple text and links.

Introduced support for forms and tables, expanding its capability.

Included support for scripting languages and more complex layouts.

Focused on separating content from presentation (with CSS) and introduced more multimedia support.

A stricter version of HTML based on XML (eXtensible Markup Language).

Added modern features like local storage, audio/video support, and semantic elements for better accessibility.

🔧 How the Web Works (HTML, CSS, JS)

The web works by combining three key technologies:

HTML: Defines the structure and content of a webpage.
CSS: Provides styling and layout to HTML elements (colors, fonts, positioning).
JavaScript: Adds interactivity and dynamic behavior (animations, form validation, event handling).

These three work together to create a seamless user experience. For example, HTML forms the skeleton, CSS makes it visually appealing, and JavaScript makes it interactive.

HTML provides the foundational structure of the page, defining headings, paragraphs, images, and links.

📖 HTML Versions (HTML4, XHTML, HTML5)

🖥️ HTML4

HTML4, released in 1999, was the most widely used version of HTML for over a decade. It separated content from presentation, relying on CSS for layout and styling. HTML4 also introduced better support for multimedia elements.

🔒 XHTML

XHTML was an XML-based version of HTML introduced in 2000. It was stricter and required all tags to be closed properly and elements to be written in lowercase. However, it was soon replaced by HTML5, which combined the flexibility of HTML with stricter syntax.

✨ HTML5

HTML5 is the current standard, designed to support modern web applications. It introduced new elements like <article>, <section>, <nav>, and <footer> for better structure and accessibility. HTML5 also added APIs like Web Storage, Geolocation, and Canvas to enhance functionality without requiring third-party plugins.

🏗️ Basic Structure of an HTML Page

Every HTML page has a basic structure that includes the following elements:

<!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 a paragraph of text.</p>
  </body>
</html>

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

HTML Fundamentals

On this page