HTML Document Structure

Modern HTML5 documents maintain a core strutcural framework:

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

Text Formatting Elements

Headings and text containers serve different layout purposes:

<h1>Main Heading</h1>
<h2>Subsection</h2>
<h3>Sub-subsection</h3>

<span>Inline text element</span>
<div>Block-level container</div>
<p>Paragraph element</p>

Block elements (headings, divs, paragraphs) occupy full width and support dimension properties. Inline elements (spans, anchors) flow horizontally and ignore width/height settings.

Hyperlinks and Navigation

Basic Links

<a href="https://example.com" target="_blank">External Link</a>

Target attributse control link behavior: _self (current window), _blank (new tab), _parent (parent frame), _top (top frame).

Anchor Navigation

<!-- Destination anchor -->
<a id="section-one">Section One</a>

<!-- Local navigation -->
<a href="#section-one">Go to Section One</a>

<!-- Cross-page anchor -->
<a href="otherpage.html#section-two">Link to Another Page Section</a>

Fixed Position Navigation

<div style="position: fixed; bottom: 20px; right: 20px;">
    <a href="#top">Back to Top</a>
</div>

List Structures

Unordered Lists

- First item
- Second item
- Third item

Ordered Lists

3. Item three
4. Item four
5. Item five

Description Lists

<dl>
    <dt>Topic Title</dt>
    <dd>Description one</dd>
    <dd>Description two</dd>
    <dt>Another Topic</dt>
    <dd>Single description</dd>
</dl>

Styled List Layout

<link rel="stylesheet" href="styles.css">

<div class="news-container">
    - <time>2023-12-01</time>### Article Title
    
    Brief summary of the article content...
</div>

Tables

Basic Table Structure

| Header Cell | Another Header |
|---|---|
| Data Cell | More Data |

Complex Tables with Merging

| Name | Amount | Date |
|---|---|---|
| John Doe | 1000 | 2023-01-15 |
| 1500 | 2023-01-16 |
| Total transactions: 2 |

Inline Frames

<iframe src="content.html" name="workspace" 
        style="width: 100%; height: 500px; border: none;">
</iframe>

<nav>
    <a href="page1.html" target="workspace">Page 1</a>
    <a href="page2.html" target="workspace">Page 2</a>
</nav>

Forms and Input Controls

Form Structure

Forms collect user data through various input elements:

<form action="/submit" method="post">
    <input type="text" name="username" required>
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

GET requests show parameters in URL and suit read operations. POST requests hide data and handle create/update/delete actions.

Input Types

<input type="text" placeholder="Enter text">
<input type="password" placeholder="Password">
<input type="radio" name="choice" value="yes"> Yes
<input type="radio" name="choice" value="no"> No
<input type="checkbox" name="options" value="opt1"> Option 1
<input type="file" name="upload">
<input type="submit" value="Send">
<input type="reset" value="Clear">

Selection Controls

<select name="country">
    <optgroup label="North America">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
    </optgroup>
    <option value="uk">United Kingdom</option>
</select>

<textarea name="message" rows="5" cols="40">
Default message content
</textarea>

HTML5 Enhanced Inputs

<form>
    <label>Color: <input type="color" name="bg-color"></label>
    <label>Range: <input type="range" min="0" max="100" step="10"></label>
    <label>Date: <input type="date" name="event-date"></label>
    <label>Email: <input type="email" name="user-email"></label>
</form>

Validation Elements

<meter value="75" min="0" max="100" low="30" high="80">75%</meter>
<progress value="30" max="100"></progress>

Form Validation

Built-in validation uses element attribtues:

<form>
    <input type="text" required pattern="[A-Za-z]{3,}">
    <input type="number" min="1" max="100" required>
    <input type="email" required>
    <input type="submit">
</form>

Custom validation through JavaScript:

<form>
    <input type="email" id="usermail" required>
    <input type="submit" onclick="return validateEmail()">
</form>

<script>
function validateEmail() {
    const email = document.getElementById('usermail');
    if (!email.checkValidity()) {
        alert('Please enter a valid email address');
        return false;
    }
    return true;
}
</script>