Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML Timeline

1991 - Tim Berners-Lee creates HTML
1995 - HTML 2.0 is published
1997 - HTML 3.2 is published
1999 - HTML 4.01 is published
2000 - XHTML 1.0 is published
2014 - HTML becomes an official W3C recommendation
Present - HTML continues to evolve with new features

HTML documents are files that end with a .html or .htm extension. These files can be viewed using any web browser (such as Google Chrome, Safari, or Firefox). The browser reads the HTML file and renders its content for display on the user's screen.

How HTML Works

HTML uses a series of elements to define the structure and content of a web page. These elements are represented by tags, which are keywords surrounded by angle brackets, like <tagname>. Most HTML elements consist of a start tag and an end tag, with content in between.

<tagname>Content goes here...</tagname>

HTML documents have a hierarchical structure, often referred to as the DOM (Document Object Model). This structure allows browsers to parse the document and create a representation that can be manipulated with JavaScript.

HTML, CSS, and JavaScript

While HTML provides the structure of a web page, it works together with two other technologies:

CSS (Cascading Style Sheets) - Controls the presentation and layout of HTML elements
JavaScript - Adds interactivity and dynamic behavior to web pages

Together, these three technologies form the foundation of modern web development.

HTML Basics

Before diving into the details, let's understand the basic structure of an HTML document.

Basic HTML Document Structure

<!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>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Key Components

<!DOCTYPE html> - Declares the document type and HTML version
<html> - The root element of an HTML page
<head> - Contains meta information about the document
<title> - Specifies a title for the document
<body> - Contains the visible page content

HTML Comments

Comments in HTML are not displayed in the browser, but they can help document your HTML source code.

<!-- This is a comment -->
<!-- 
    This is a 
    multi-line comment 
-->

HTML Versions

HTML has evolved over the years, with HTML being the latest major version. Each version has introduced new elements, attributes, and capabilities.

HTML Features

Semantic elements like <header>, <footer>, <article>, and <section>
Form controls like date, time, email, and search
Graphics elements <canvas> and <svg>
Multimedia elements <audio> and <video>
Local storage and application cache
Web Workers and WebSockets
Geolocation API

For more detailed information on HTML basics, visit our HTML Basics page.

HTML Elements

HTML elements are the building blocks of HTML pages. Elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

Headings

HTML headings are defined with the <h1> to <h6> tags, with <h1> being the most important and <h6> the least important.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.

Links

Links are defined with the <a> tag. The link's destination is specified in the href attribute.

<a href="https://www.example.com">Visit Example.com</a>

Visit Example.com

Images

Images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes.

<img src="image.jpg" alt="Description of the image" width="300" height="200">

Lists

HTML supports ordered lists, unordered lists, and description lists.

<!-- Unordered List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<!-- Ordered List -->
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<!-- Description List -->
<dl>
    <dt>Term 1</dt>
    <dd>Description 1</dd>
    <dt>Term 2</dt>
    <dd>Description 2</dd>
</dl>

Unordered List

Item 1
Item 2
Item 3

Ordered List

First item
Second item
Third item

Description List

Term 1: Description 1
Term 2: Description 2

Tables

Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag, and rows are divided into data cells with the <td> tag. Table headers are defined with the <th> tag.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>

Name	Age	Country
John Doe	30	USA
Jane Smith	25	Canada

Div and Span

The <div> and <span> elements are used to group and style sections of HTML.

<div> is a block-level element often used as a container for other HTML elements
<span> is an inline element often used to style parts of text

<div style="background-color: lightblue; padding: 20px;">
    <h2>This is a heading in a div</h2>
    <p>This is a paragraph in the same div.</p>
</div>

<p>This is a paragraph with <span style="color: red; font-weight: bold;">some red text</span> in a span.</p>

This is a heading in a div

This is a paragraph in the same div.

This is a paragraph with some red text in a span.

HTML Attributes

HTML attributes provide additional information about HTML elements. Attributes are always specified in the start tag and usually come in name/value pairs like: name="value".

Common HTML Attributes

Attribute	Description	Example
`id`	Specifies a unique id for an element	`<div id="header">`
`class`	Specifies one or more class names for an element	`<div class="container highlight">`
`style`	Specifies an inline CSS style for an element	`<p style="color: blue;">`
`src`	Specifies the URL of the media file	`<img src="image.jpg">`
`href`	Specifies the URL of the page the link goes to	`<a href="https://example.com">`
`alt`	Specifies an alternate text for an image	`<img src="image.jpg" alt="Description">`
`title`	Specifies extra information about an element (displayed as a tooltip)	`<p title="More info">`
`lang`	Specifies the language of the element's content	`<html lang="en">`

Boolean Attributes

Some attributes do not need a value. These are called boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

<input type="text" disabled>
<input type="checkbox" checked>

Custom Data Attributes

HTML allows you to create custom data attributes using the data-* prefix. These attributes are designed to store custom data private to the page or application.

<div id="user" data-id="123" data-user="john" data-role="admin">John Doe</div>

<script>
    const user = document.getElementById('user');
    console.log(user.dataset.id); // "123"
    console.log(user.dataset.user); // "john"
    console.log(user.dataset.role); // "admin"
</script>

HTML Forms

HTML forms are used to collect user input. The <form> element defines a form that contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

Form Structure

<form action="/submit-form" method="post">
    <!-- Form elements go here -->
    <input type="submit" value="Submit">
</form>

Form Elements

Element	Description	Example
`<input>`	Defines an input control	`<input type="text" name="username">`
`<label>`	Defines a label for an input element	`<label for="username">Username:</label>`
`<select>`	Defines a drop-down list	`<select name="country"><option>USA</option></select>`
`<textarea>`	Defines a multi-line input control	`<textarea name="message" rows="4" cols="50"></textarea>`
`<button>`	Defines a clickable button	`<button type="submit">Submit</button>`
`<fieldset>`	Groups related elements in a form	`<fieldset><legend>Personal Info</legend>...</fieldset>`
`<legend>`	Defines a caption for a fieldset element	`<legend>Personal Info</legend>`
`<datalist>`	Specifies a list of pre-defined options for input controls	`<datalist id="browsers"><option value="Chrome"></datalist>`
`<output>`	Represents the result of a calculation	`<output name="result">0</output>`

Input Types

The <input> element can be displayed in several ways, depending on the type attribute.

Type	Description
`text`	Defines a single-line text input field
`password`	Defines a password field
`submit`	Defines a submit button
`reset`	Defines a reset button
`radio`	Defines a radio button
`checkbox`	Defines a checkbox
`button`	Defines a button
`color`	Defines a color picker
`date`	Defines a date control
`email`	Defines a field for an e-mail address
`file`	Defines a file-select field and a "Browse" button
`number`	Defines a field for entering a number
`range`	Defines a control for entering a number within a range
`search`	Defines a text field for entering a search string
`tel`	Defines a field for entering a telephone number
`time`	Defines a control for entering a time
`url`	Defines a field for entering a URL

Form Example

<form action="/submit-form" method="post">
    <fieldset>
        <legend>Personal Information</legend>
        
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <div>
            <label for="dob">Date of Birth:</label>
            <input type="date" id="dob" name="dob">
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Preferences</legend>
        
        <div>
            <label>Gender:</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
        </div>
        
        <div>
            <label>Interests:</label>
            <input type="checkbox" id="sports" name="interests[]" value="sports">
            <label for="sports">Sports</label>
            <input type="checkbox" id="music" name="interests[]" value="music">
            <label for="music">Music</label>
            <input type="checkbox" id="reading" name="interests[]" value="reading">
            <label for="reading">Reading</label>
        </div>
        
        <div>
            <label for="country">Country:</label>
            <select id="country" name="country">
                <option value="">Select a country</option>
                <option value="us">United States</option>
                <option value="ca">Canada</option>
                <option value="uk">United Kingdom</option>
            </select>
        </div>
    </fieldset>
    
    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" cols="50"></textarea>
    </div>
    
    <div>
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </div>
</form>

Form Validation

HTML introduced several attributes for form validation:

required - Specifies that an input field must be filled out
min and max - Specifies the minimum and maximum values for an input field
pattern - Specifies a regular expression that an input field's value is checked against
minlength and maxlength - Specifies the minimum and maximum length of text data

<input type="text" name="username" required minlength="3" maxlength="15">
<input type="number" name="age" min="18" max="100">
<input type="text" name="zipcode" pattern="[0-9]{5}" title="Five digit zip code">

HTML Media

HTML introduced several elements for multimedia content, including <audio>, <video>, and <canvas>.

Audio

The <audio> element is used to embed sound content in a document.

<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>

Video

The <video> element is used to embed video content in a document.

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

Canvas

The <canvas> element is used to draw graphics, on the fly, via JavaScript.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    Your browser does not support the canvas element.
</canvas>

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

SVG

SVG stands for Scalable Vector Graphics. It's an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Responsive Images

HTML introduced the <picture> element and the srcset attribute for responsive images.

<!-- Using srcset -->
<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 500px) 100vw, (max-width: 1500px) 50vw, 800px"
     alt="Responsive Image">

<!-- Using picture -->
<picture>
    <source media="(min-width: 1000px)" srcset="large.jpg">
    <source media="(min-width: 600px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

HTML Semantics

Semantic HTML introduces meaning to the web page rather than just presentation. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.

Semantic Elements

HTML introduced several semantic elements that provide meaning to the structure of a web page:

Element	Description
`<header>`	Represents a container for introductory content or a set of navigational links
`<nav>`	Defines a section of navigation links
`<main>`	Specifies the main content of a document
`<article>`	Defines an independent, self-contained content
`<section>`	Defines a section in a document
`<aside>`	Defines content aside from the content it is placed in
`<footer>`	Defines a footer for a document or section
`<figure>`	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
`<figcaption>`	Defines a caption for a `<figure>` element
`<time>`	Defines a date/time
`<mark>`	Defines marked or highlighted text

Semantic Structure Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Section Title</h2>
            <article>
                <h3>Article Title</h3>
                <p>Article content goes here...</p>
                <figure>
                    <img src="image.jpg" alt="Description">
                    <figcaption>Figure Caption</figcaption>
                </figure>
            </article>
        </section>
        
        <aside>
            <h3>Sidebar</h3>
            <p>Sidebar content goes here...</p>
        </aside>
    </main>
    
    <footer>
        <p>© 2025 Website Name. All rights reserved.</p>
    </footer>
</body>
</html>

Benefits of Semantic HTML

Accessibility - Screen readers and other assistive technologies can better understand the content
SEO - Search engines can better understand the content and its importance
Maintainability - Code is easier to read and maintain
Reusability - Content can be more easily repurposed for different devices and platforms

HTML APIs

HTML introduced several APIs (Application Programming Interfaces) that allow developers to create more interactive and feature-rich web applications.

Geolocation API

The Geolocation API allows web applications to access the user's geographical location.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        // Success callback
        function(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
        },
        // Error callback
        function(error) {
            console.error("Error getting location:", error.message);
        }
    );
} else {
    console.error("Geolocation is not supported by this browser.");
}

Web Storage API

The Web Storage API provides mechanisms for storing data in the browser. It includes localStorage (persists even after the browser is closed) and sessionStorage (persists only for the duration of the page session).

// localStorage
localStorage.setItem("username", "John");
const username = localStorage.getItem("username");
localStorage.removeItem("username");
localStorage.clear();

// sessionStorage
sessionStorage.setItem("tempData", "Some data");
const tempData = sessionStorage.getItem("tempData");
sessionStorage.removeItem("tempData");
sessionStorage.clear();

Drag and Drop API

The Drag and Drop API allows users to drag and drop elements within a web page.

<div id="draggable" draggable="true" ondragstart="drag(event)">Drag me!</div>
<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>

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

Web Workers API

Web Workers allow you to run JavaScript in the background, without affecting the performance of the page.

// Main script
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
    console.log('Worker said: ' + event.data);
};

worker.postMessage('Hello Worker');

// worker.js
self.onmessage = function(event) {
    console.log('Received from main script: ' + event.data);
    self.postMessage('Hello Main Script');
};

Other HTML APIs

Canvas API - For drawing graphics via JavaScript
WebSockets API - For two-way communication with a server
Fetch API - For making HTTP requests
History API - For manipulating the browser history
File API - For handling file uploads and manipulating file data
IndexedDB API - For storing large amounts of structured data
Web Audio API - For processing and synthesizing audio
WebRTC API - For real-time communication

HTML Best Practices

Following best practices ensures that your HTML code is maintainable, accessible, and performs well.

Document Structure

Always declare the document type with <!DOCTYPE html>
Include the lang attribute in the <html> tag
Use UTF-8 character encoding
Include viewport settings for responsive design
Use semantic HTML elements to structure your content

Accessibility

Use appropriate heading levels (<h1> to <h6>) and maintain a logical hierarchy
Include alternative text for images with the alt attribute
Use <label> elements for form controls
Ensure sufficient color contrast for text
Make sure interactive elements are keyboard accessible
Use ARIA (Accessible Rich Internet Applications) attributes when necessary

Performance

Minimize the use of nested elements
Load JavaScript files at the end of the body or use the defer attribute
Use responsive images with srcset and sizes attributes
Optimize media files for the web
Use lazy loading for images and videos

Maintainability

Use consistent indentation and formatting
Add comments for complex sections
Use meaningful class and ID names
Separate structure (HTML), presentation (CSS), and behavior (JavaScript)
Validate your HTML code using tools like the W3C Validator

SEO (Search Engine Optimization)

Use descriptive title tags
Include meta description tags
Use semantic HTML elements
Ensure proper heading hierarchy
Use descriptive link text
Include structured data (Schema.org)

Mobile Considerations

Use responsive design techniques
Include the viewport meta tag
Use relative units (%, em, rem) instead of fixed units (px)
Test on multiple devices and screen sizes
Consider touch interactions