Knowledge Web - HTML guide

1. Basics: Structure of an HTML Document

Code Example: Basic HTML Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, HTML!</h1>
    <p>This is a simple webpage.</p>
</body>
</html>

Key Concepts

<!DOCTYPE html>: Declares the document type.
<html>: Root element of the page.
<head>: Metadata about the page (not visible to users).
<body>: Content displayed on the page.

2. Headings and Paragraphs

Code Example: Text Content

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text.</p>
<p>You can add <strong>bold</strong> or <em>italic</em> text.</p>

Key Concepts

Headings range from <h1> (largest) to <h6> (smallest).
<p>: Paragraphs.
Text Formatting:
- <strong>: Bold text.
- <em>: Italics.

3. Links and Images

Code Example: Hyperlinks

<a href="https://www.google.com" target="_blank">Visit Google</a>

Code Example: Images

<img src="image.jpg" alt="A descriptive text about the image" width="300">

Key Concepts

<a>: Anchor tag for links. target="_blank" opens in a new tab.
<img>: Embeds images. Always include alt for accessibility.

4. Lists

Code Example: Ordered and Unordered Lists

<h3>Unordered List:</h3>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<h3>Ordered List:</h3>
<ol>
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ol>

Key Concepts

<ul>: Unordered list (bullets).
<ol>: Ordered list (numbers).
<li>: List item.

5. Tables

Code Example: Basic Table

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

Key Concepts

Table Elements:
- <table>: The table container.
- <tr>: Table row.
- <td>: Table cell.
- <th>: Header cell.

6. Forms

Code Example: Input Fields

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="age">Age:</label>
    <input type="number" id="age" name="age">
    
    <button type="submit">Submit</button>
</form>

Key Concepts

<form>: Wraps input fields and buttons.
<input>: Text, numbers, passwords, etc.
<button>: Submits the form.

7. Divs and Spans

Code Example: Layout Containers

<div style="background-color: lightgray; padding: 10px;">
    <h2>Div Example</h2>
    <p>This is a block-level container.</p>
</div>

<span style="color: red;">This is inline text.</span>

Key Concepts

<div>: Block-level container for grouping content.
<span>: Inline container for small elements.

8. Multimedia

Code Example: Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Code Example: Video

<video controls width="500">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Key Concepts

<audio> and <video> embed media players.
Use <source> to provide multiple formats for compatibility.

9. Semantic HTML

Code Example: Semantic Elements

<header>
    <h1>Website Title</h1>
</header>
<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
</nav>
<main>
    <section id="home">
        <h2>Welcome</h2>
        <p>This is the home section.</p>
    </section>
    <section id="about">
        <h2>About Us</h2>
        <p>Information about our website.</p>
    </section>
</main>
<footer>
    <p>&copy; 2024 My Website</p>
</footer>

Key Concepts

Semantic tags like <header>, <nav>, <main>, <section>, and <footer> improve structure and accessibility.

10. Inline CSS and External Stylesheets

Code Example: Inline CSS

<p style="color: blue; font-size: 18px;">This text is styled inline.</p>

Code Example: External Stylesheet

<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles.css">

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

Key Concepts

Inline CSS styles are quick but not reusable.
Use external stylesheets for consistent, reusable styling.

11. JavaScript in HTML

Code Example: Inline Script

<script>
    document.addEventListener("DOMContentLoaded", function () {
        console.log("Page loaded!");
    });
</script>

Code Example: External Script

<!-- Link to external JavaScript -->
<script src="script.js"></script>

// script.js
console.log("Hello from external JavaScript!");

12. Advanced Topics

Meta Tags

<meta name="description" content="Learn HTML quickly!">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Favicons

<link rel="icon" href="favicon.ico" type="image/x-icon">

Responsive Design

<style>
    @media (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }
</style>

16. Metadata and the `<head>` Section

Code Example: Metadata in Action

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A complete guide to HTML.">
    <meta name="author" content="John Doe">
    <meta name="keywords" content="HTML, Web Development, Guide">
    <title>Advanced HTML Concepts</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Key Concepts

<meta charset="UTF-8">: Ensures proper encoding for characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes websites responsive.
Favicon (<link rel="icon">): Adds a small icon for browser tabs.

17. Forms: Advanced Features

Code Example: Validation and File Upload

<form action="/submit" method="POST" enctype="multipart/form-data">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required minlength="5" maxlength="15">
    
    <label for="file">Upload a File:</label>
    <input type="file" id="file" name="file" accept=".jpg, .png, .gif">
    
    <button type="submit">Submit</button>
</form>

Key Features

Validation Attributes:
- required: Makes a field mandatory.
- minlength and maxlength: Limits text input length.
- accept: Specifies acceptable file types.
Enctype:
- multipart/form-data: Required for file uploads.

18. Tables: Merging Cells

Code Example: Spanning Rows and Columns

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th colspan="2">Contact Information</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>[email protected]</td>
        <td>+123456789</td>
    </tr>
    <tr>
        <td rowspan="2">Alice</td>
        <td>25</td>
        <td colspan="2">[email protected]</td>
    </tr>
</table>

Key Features

colspan: Spans columns.
rowspan: Spans rows.

19. Audio and Video: Advanced Features

Code Example: Audio and Video Attributes

<audio controls loop>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>

<video controls autoplay muted>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Key Features

Audio Attributes:
- loop: Replays the audio.
- controls: Displays playback controls.
Video Attributes:
- autoplay: Plays automatically.
- muted: Starts the video with sound muted.

20. Semantic Tags: Additional Examples

Code Example: Enhanced Structure

<article>
    <header>
        <h2>Article Title</h2>
        <p>Published on <time datetime="2024-12-12">December 12, 2024</time></p>
    </header>
    <p>This is the content of the article.</p>
    <footer>
        <p>Written by John Doe</p>
    </footer>
</article>

Key Semantic Tags:

<article>: Independent content like a blog post.
<time>: Machine-readable dates.
<footer>: Footer of a section or document.

21. The `<iframe>` Tag

Code Example: Embedding Websites

<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>

Key Concepts

Attributes:
- src: URL of the embedded content.
- frameborder: Border visibility (deprecated; use CSS instead).
- sandbox: Restricts iframe functionality for security.

22. HTML Entities

Code Example: Displaying Special Characters

<p>&lt;This is a tag&gt;</p>
<p>&copy; 2024 My Company</p>
<p>&#9731; (Snowflake symbol)</p>

Key Concepts

23. The `<canvas>` Tag

Code Example: Drawing Shapes

<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 100); // Draws a blue rectangle
</script>

Key Concepts

The <canvas> tag is used for graphics, animations, and games.
JavaScript is required for functionality.

24. ARIA (Accessible Rich Internet Applications)

Code Example: Accessibility with ARIA

<button aria-label="Submit form">Submit</button>

<div role="alert">
    This is an important alert message!
</div>

Key Concepts

aria-label: Describes the purpose of an element for screen readers.
role: Defines the role of an element (e.g., alert, button, navigation).

25. Progressive Enhancement

Code Example: Default Functionality with JS Enhancement

<a href="/download" id="download-link">Download File</a>

<script>
    document.getElementById('download-link').addEventListener('click', function (e) {
        e.preventDefault();
        alert('File will download in a moment.');
    });
</script>

Key Concepts

Ensure the website works without JavaScript.
Add advanced features for browsers that support them.

26. The `<details>` and `<summary>` Tags

Code Example: Collapsible Content

<details>
    <summary>Click to reveal more information</summary>
    <p>This is the hidden content that appears when you click.</p>
</details>

Key Features

Native HTML support for expandable/collapsible sections.
Works without JavaScript.

27. Custom Data Attributes

Code Example: Using `data-` Attributes

<button data-id="1234" onclick="handleClick(this)">Click Me</button>

<script>
    function handleClick(button) {
        console.log(button.dataset.id); // Logs "1234"
    }
</script>

Key Concepts

data-* Attributes allow custom attributes to store metadata.

28. Best Practices for Writing HTML

Use Semantic Tags: Prefer <article> over <div> when applicable.
Keep it Accessible:
- Use alt for images.
- Add aria-* for assistive technologies.
Indentation:
- Use consistent indentation (2 or 4 spaces).
Minimize Inline Styles:
- Use external stylesheets for maintainability.
Validate Your Code:
- Use tools like W3C Validator to catch errors.

1. Basics: Structure of an HTML Document

Code Example: Basic HTML Skeleton

Key Concepts

2. Headings and Paragraphs

Code Example: Text Content

Key Concepts

3. Links and Images

Code Example: Hyperlinks

Code Example: Images

Key Concepts

4. Lists

Code Example: Ordered and Unordered Lists

Key Concepts

5. Tables

Code Example: Basic Table

Key Concepts

6. Forms

Code Example: Input Fields

Key Concepts

7. Divs and Spans

Code Example: Layout Containers

Key Concepts

8. Multimedia

Code Example: Audio

Code Example: Video

Key Concepts

9. Semantic HTML

Code Example: Semantic Elements

Key Concepts

10. Inline CSS and External Stylesheets

Code Example: Inline CSS

Code Example: External Stylesheet

Key Concepts

11. JavaScript in HTML

Code Example: Inline Script

Code Example: External Script

12. Advanced Topics

Meta Tags

Favicons

Responsive Design

16. Metadata and the <head> Section

Code Example: Metadata in Action

Key Concepts

17. Forms: Advanced Features

Code Example: Validation and File Upload

Key Features

18. Tables: Merging Cells

Code Example: Spanning Rows and Columns

Key Features

19. Audio and Video: Advanced Features

Code Example: Audio and Video Attributes

Key Features

20. Semantic Tags: Additional Examples

Code Example: Enhanced Structure

Key Semantic Tags:

21. The <iframe> Tag

Code Example: Embedding Websites

Key Concepts

22. HTML Entities

Code Example: Displaying Special Characters

Key Concepts

23. The <canvas> Tag

Code Example: Drawing Shapes

Key Concepts

24. ARIA (Accessible Rich Internet Applications)

Code Example: Accessibility with ARIA

Key Concepts

25. Progressive Enhancement

Code Example: Default Functionality with JS Enhancement

Key Concepts

26. The <details> and <summary> Tags

Code Example: Collapsible Content

Key Features

27. Custom Data Attributes

Code Example: Using data- Attributes

Key Concepts

28. Best Practices for Writing HTML

Additional Resources

16. Metadata and the `<head>` Section

21. The `<iframe>` Tag

23. The `<canvas>` Tag

26. The `<details>` and `<summary>` Tags

Code Example: Using `data-` Attributes