HTML Framework

The Foundation of Web Development

Structure Semantics Accessibility Web Standards

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of web pages.

HTML consists of a series of elements that you use to enclose, wrap, or mark up different parts of the content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on.

Key Features of HTML

Markup Language

Uses tags to define elements and structure content

Document Structure

Defines the hierarchical structure of web documents

Hypertext

Creates connections between documents via hyperlinks

Accessibility

Supports creating accessible web content for all users

Basic HTML Document Structure

Every HTML document follows a basic structure that includes essential elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>

Declares the document type and HTML version

<html>

The root element that wraps all content

<head>

Contains meta information about the document

<body>

Contains the visible content of the document

Common HTML Elements

HTML provides a wide range of elements to structure content. Here are some of the most commonly used ones:

Element Description Example
<h1> to <h6> Heading elements <h1>Main Title</h1>
<p> Paragraph <p>This is a paragraph.</p>
<a> Anchor (hyperlink) <a href="page.html">Link</a>
<img> Image <img src="image.jpg" alt="Description">
<div> Division or section <div>Content here</div>
<span> Inline container
<ul>, <ol>, <li> Lists <ul><li>Item</li></ul>

HTML Version History

HTML 1.0 (1993)

The first version of HTML with basic text formatting elements and hyperlinks.

HTML 2.0 (1995)

Standardized HTML with form elements and table support. Became the official standard.

HTML 3.2 (1997)

Added support for tables, applets, text flow around images, and superscripts/subscripts.

HTML 4.01 (1999)

Introduced stylesheets, scripting, and accessibility features. A major milestone.

XHTML (2000)

Reformulation of HTML as an XML application with stricter syntax rules.

HTML5 (2014)

Major revision with new semantic elements, multimedia support, and APIs for web applications.

HTML Semantic Elements

HTML introduced new semantic elements that clearly define different parts of a web page, making the structure more meaningful:

<header>

Represents introductory content or navigational aids

<nav>

Defines a section of navigation links

<main>

Specifies the main content of the document

<article>

Represents self-contained composition

<section>

Defines a section in a document

<footer>

Represents the footer of a document or section

HTML in Action

Here's a simple example of HTML creating a basic web page structure with semantic elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Web Page</title>
</head>
<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</nav>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Article content...</p>
        </article>
    </main>
    
    <footer>
        <p>© 2025 My Website</p>
    </footer>
</body>
</html>

Website Title

Article Title

Article content...

© 2025 My Website