HTML Documentation

Learn HTML5 - the foundation of web development

Table of Contents

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements.

HTML5 is the latest version, introducing new elements, attributes, and behaviors.

Basic HTML Structure

Every HTML document should have the following basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

HTML Elements

HTML elements are the building blocks of HTML pages. They are defined by tags.

Common HTML Elements

Element Description Example
<h1> - <h6> Headings (h1 is largest, h6 is smallest) <h1>Heading</h1>
<p> Paragraph <p>A paragraph.</p>
<a> Anchor (link) <a href="url">Link</a>
<img> Image <img src="image.jpg" alt="Description">
<div> Division/Section <div>Content</div>
<span> Inline container <span>Text</span>
<ul>, <ol>, <li> Lists <ul><li>Item</li></ul>
<table> Table <table><tr><td>Cell</td></tr></table>

HTML Attributes

Attributes provide additional information about HTML elements.

Common Attributes

Attribute Description Example
id Unique identifier for an element <div id="header">
class Class name(s) for styling <div class="container main">
style Inline CSS styles <p style="color: red;">
src Source URL for images, scripts, etc. <img src="image.jpg">
href Hyperlink reference <a href="https://example.com">
alt Alternative text for images <img alt="Description">
title Tooltip text <p title="Tooltip">

HTML Forms

Forms are used to collect user input.

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <input type="submit" value="Submit">
</form>

Form Input Types

Type Description
textSingle-line text input
passwordPassword field (masked)
emailEmail address input
numberNumeric input
dateDate picker
checkboxCheckbox
radioRadio button
fileFile upload
submitSubmit button
resetReset button
buttonClickable button

Semantic HTML

Semantic elements clearly describe their meaning to both the browser and developer.

<!DOCTYPE html>
<html>
<head>
    <title>Semantic Example</title>
</head>
<body>
    <header>
        <h1>Website Header</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Article content...</p>
        </article>
        
        <section>
            <h2>Section Title</h2>
            <p>Section content...</p>
        </section>
    </main>
    
    <aside>
        <h3>Sidebar</h3>
        <p>Sidebar content...</p>
    </aside>
    
    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

Common Semantic Elements

Element Description
<header>Introductory content or navigation
<footer>Footer for a document or section
<nav>Navigation links
<main>Main content of the document
<article>Self-contained composition
<section>Thematic grouping of content
<aside>Content tangentially related to the content around it
<figure>Self-contained content, often with a caption
<figcaption>Caption for a <figure>
<time>Represents a specific period in time

HTML Examples

Simple Web Page

<!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 my first web page!</p>
    <p>Here's a <strong>bold</strong> word and an <em>italic</em> word.</p>
    <img src="my-image.jpg" alt="My Image" width="300">
    <p><a href="https://example.com">Visit Example.com</a></p>
</body>
</html>

Image Gallery

<div class="gallery">
    <h2>My Photos</h2>
    <div class="photo">
        <img src="photo1.jpg" alt="Photo 1">
        <p>Caption for photo 1</p>
    </div>
    <div class="photo">
        <img src="photo2.jpg" alt="Photo 2">
        <p>Caption for photo 2</p>
    </div>
    <div class="photo">
        <img src="photo3.jpg" alt="Photo 3">
        <p>Caption for photo 3</p>
    </div>
</div>
Try HTML in Playground