The Building Blocks of the Web

Welcome to your interactive guide to HTML. Test your skills with Optical, our Gemini-powered assistant, and accelerate your learning.

Core Concepts in Action

An HTML document has a standard structure. Click "Live Preview" to see how different elements come together.

Explore a Complete Demo

This is a complete demo page that you can create using the static site feature of `official.link`.
It includes rich elements like lists, tables, and code snippets.
Click on "Live Preview" to get the full experience.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Awesome Site on official.link</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f0f2f5; color: #333; }
        .container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        header, footer { text-align: center; padding: 10px 0; }
        h1, h2 { color: #0056b3; }
        marquee { background-color: #0056b3; color: white; padding: 10px; border-radius: 5px; font-weight: bold; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        ul { list-style-type: '✅ '; }
        pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto; }
        code { font-family: 'Courier New', Courier, monospace; }
        a { color: #0056b3; text-decoration: none; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>

    <div class="container">
        <header>
            <h1>Welcome to My Static Site!</h1>
            <p>Powered by official.link</p>
        </header>

        <marquee>Create your own static site for free on official.link!</marquee>

        <h2 style="margin-top: 30px;">Key Features You Can Build</h2>
        <ul>
            <li>Fast, responsive, and modern web pages.</li>
            <li>Easy-to-understand HTML structure.</li>
            <li>Interactive elements with simple CSS and JS.</li>
        </ul>

        <h2 style="margin-top: 30px;">Plan Comparison</h2>
        <table>
            <tr>
                <th>Feature</th>
                <th>Free Plan</th>
                <th>Pro Plan</th>
            </tr>
            <tr>
                <td>Static Pages</td>
                <td>01</td>
                <td>02</td>
            </tr>
            <tr>
                <td>Custom Domain</td>
                <td>No</td>
                <td>Yes</td>
            </tr>
        </table>

        <h2 style="margin-top: 30px;">Your First Line of Code</h2>
        <p>You can start with a simple heading like this:</p>
        <pre><code>&lt;h1&gt;Hello, World!&lt;/h1&gt;</code></pre>

        <footer>
            <p>&copy; 2025 Your Name. Built with <a href="https://official.link" target="_blank">official.link</a>.</p>
        </footer>
    </div>

</body>
</html>

Interactive Tag Reference

Select a tag to see its description and example. Then, try it yourself in the Practice Ground below!

Select an HTML Tag

Live Practice Ground

The best way to learn is by doing. Write your own HTML code below, or get a challenge from Optical to test your skills!

Your Code

Live Preview

Chat with Optical

Have a specific question? Ask Optical for an explanation, code snippet, or clarification.

Frequently Asked Questions

What is HTML?

HTML, or HyperText Markup Language, is the standard markup language used to create the structure and content of web pages.

Is HTML difficult to learn?

No, HTML is considered one of the easiest languages to learn for beginners in web development.

Ready to Build?

You have the fundamentals. Start creating your own HTML page today and bring your ideas to the web.

Start Creating for Free

on official.link