Interactive HTML Learning

HTML Structure Flowchart

Commonly Used HTML Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Article Title</h2>
            <p>This is a paragraph within an article.</p>
        </article>
        
        <aside>
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Interactive HTML Editor

HTML Structure Explained

Basic Structure

HTML documents have a hierarchical structure. The root element is <html>, which contains <head> and <body> sections. The <head> contains metadata about the document, while the <body> contains the main content of the page.

Key Structural Elements

<header>: Contains introductory content or navigation for a page or section
<footer>: Contains footer content for a page or section
<nav>: Contains navigation links
<main>: Contains the main content of the page
<article>: Contains a self-contained composition (e.g. blog post, news article)
<section>: Groups related content
<aside>: Contains content tangentially related to surrounding content

Text Content Elements

<p>: Paragraph
<h1> to <h6>: Headings
<ul>, <ol>, <li>: Lists
<div>: Generic container for flow content

Semantic Meaning

HTML5 introduced elements with semantic meaning (like those listed above). These provide more context about the structure and purpose of content, improving accessibility and SEO.

Nesting

Elements can be nested inside each other. Proper nesting is important for valid HTML.

Attributes

Elements can have attributes that provide additional information. Common attributes include id, class, and style.

Empty Elements

Some elements like <br>, <img> don't have closing tags.

Comments

can be used to add comments to your HTML code.