vidux.sh - HTML

1 Document Structure

Every HTML5 document requires a standard declarative skeleton so web browsers can parse and render layout parameters accurately.

html · index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>
    <!-- Visible page content goes here -->
    <h1>Hello, Web!</h1>
</body>
</html>

The <head> contains metadata, styles, and configurations not visible to users, while the <body> contains everything rendered on screen.

2 Common Element Types

HTML utilizes specific tags to identify structural blocks. Modern code should favor semantic tags over generic structural wrappers.

<header> Introductory content Navbars, logos

<main> Dominant core area Unique page content

<section> Thematic block Chapters, tab groups

<article> Self-contained unit Blog posts, news articles

<div> Generic block wrapper Used purely for styling

<span> Generic inline container Targeting specific words

3 Text Formatting

HTML provides hierarchical heading elements (<h1> to <h6>) and descriptive paragraphs to structure written copy semantically.

html · text.html

<h1>Main Heading (One per page)</h1>
<h2>Sub-section Heading</h2>

<p>This is a standard paragraph containing <strong>bold text</strong> for structural emphasis and <em>italicized text</em> for conversational stress.</p>

<p>Use <code>console.log()</code> inline to show monospaced tech terms.</p>

4 Links & Attributes

Attributes provide configuration details inside the opening tag of an element. Anchors (<a>) require an href target attribute to construct hyperlinks.

html · links.html

<!-- Internal reference hyperlink -->
<a href="about.html">Visit About Page</a>

<!-- External target in a fresh sandbox tab -->
<a href="https://github.com" target="_blank" rel="noopener">GitHub</a>

<!-- Section jump link using unique ID selectors -->
<a href="#s8">Jump to Forms Section</a>

5 Images & Void Elements

Some nodes are void elements (self-closing) and do not wrap text blocks. The <img> element uses src paths and requires an informative alt description.

html · media.html

<!-- Self-contained graphic reference asset -->
<img src="assets/images/logo.png" alt="Corporate branding emblem">

<!-- Structural break lines -->
<p>First line statement.<br>Forced newline break line inside paragraph.</p>

Never omit the alt attribute. It is crucial for web accessibility (screen readers) and acts as fallback text if the image asset fails to load.

6 Lists

Organize sequential data items using ordered indexes (<ol>) or unordered bullet layouts (<ul>). Children must consist strictly of list item nodes (<li>).

html · lists.html

<!-- Unordered Bullet List Layout -->
<ul>
    <li>HTML5 Structure</li>
    <li>CSS3 Architecture</li>
</ul>

<!-- Ordered Numbered List Layout -->
<ol>
    <li>Write Code Template</li>
    <li>Validate W3C Standard</li>
</ol>

7 Tables

Tables manage multi-column tabular data matrices cleanly using a structural sequence of rows (<tr>), headers (<th>), and data cells (<td>).

html · tables.html

<table>
    <thead>
        <tr>
            <th>Language</th>
            <th>Extension</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML5</td>
            <td>.html</td>
        </tr>
    </tbody>
</table>

8 Forms & Inputs

Forms parse and capture interactive user dataset inputs. Explicitly couple text labels to inputs using matching id and for attributes.

html · forms.html

<form action="/submit-data" method="POST">
    <!-- Linked Text Label and Input Element -->
    <label for="username">User Profile Name:</label>
    <input type="text" id="username" name="username" required>

    <!-- Password Variant Masking Mask -->
    <label for="pass">Security Access Key:</label>
    <input type="password" id="pass" name="password">

    <!-- Action Confirmation Button Submit -->
    <button type="submit">Dispatch Payload</button>
</form>

With structural markup mastered, dive into CSS3 Architecture Grid Modules and Flexbox Context Engines to apply visual layouts over elements.

HTML Beginner

Table of Contents

1 Document Structure

2 Common Element Types

3 Text Formatting

4 Links & Attributes

5 Images & Void Elements

6 Lists

7 Tables

8 Forms & Inputs