HTML Reference

Basic Structure

Document

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundations</title>
    <style>
        body {
            font-family: sans-serif;
            color: #222;
        }
    </style>
</head>
<body>
    <!-- Content goes here -->
    <h1>Hello World</h1>
</body>
</html>

Classes and IDs

Classes are used to style and target elements.

IDs are used to target a single element. They are unique. They are used for JavaScript. And to target sections of a page

This is a link to the unique id.

<p class="highlight">Classes are used to style and target elements.</p>
<p id="unique-id">IDs are used to target a single element. They are unique. They are used for JavaScript. And to target sections of a page</p>
<div>
  <a href="#unique-id">This is a link to the unique id.</a>
</div>

Common Elements

Text Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph.

This is bold text
This is italic text This is inline text

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
<p>This is a paragraph.</p>
<strong>This is bold text</strong>
<br>
<em>This is italic text</em>
<span>This is inline text</span>

Links and Images

This is a link
Description of image

<a href="https://example.com">This is a link</a>
<br>
<img src="https://placehold.co/200x100/mediumslateblue/white" alt="Description of image">

Lists

Unordered list item 1
Unordered list item 2

Ordered list item 1
Ordered list item 2

<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
</ul>
<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
</ol>

Forms

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="submit">Submit</button>
</form>

Buttons

<!-- Buttons -->
<button>Click me</button>
<br>
<button disabled>Disabled button</button>
<br>
<button type="submit">Submit</button>
<br>
<button type="reset">Reset</button>
<br>
<button onclick="dialog.showModal()">Dialog Button</button>

More Inputs

Text
Password
Number
Range
Checkbox
Radio
Color
Date
Time
File
Select

<!-- Input Types -->
<label for="text">Text</label>
<input type="text" placeholder="Text input">
<br>
<label for="password">Password</label>
<input type="password" placeholder="Password">
<br>
<label for="number">Number</label>
<input type="number" min="0" max="100" placeholder="0">
<br>
<label for="range">Range</label>
<input type="range" min="0" max="100">
<br>
<label for="checkbox">Checkbox</label>
<input type="checkbox" id="checkbox">
<br>
<label for="radio">Radio</label>
<input type="radio" name="radio-group">
<br>
<label for="color">Color</label>
<input type="color">
<br>
<label for="date">Date</label>
<input type="date">
<br>
<label for="time">Time</label>
<input type="time">
<br>
<label for="file">File</label>
<input type="file">
<br>
<!-- Select and Options -->
<label for="select">Select</label>
<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<br>
<!-- Textarea --> 
<textarea rows="4" cols="50">Enter text here...</textarea>

Additional Elements

Click to expand

This is the expanded content.

Progress 70%
Meter 60%

<!-- Details and Summary -->
<details>
  <summary>Click to expand</summary>
  <p>This is the expanded content.</p>
</details>

<!-- Progress and Meter -->
<label for="progress">Progress</label>
<progress value="70" max="100">70%</progress>
<br>
<label for="meter">Meter</label>
<meter value="0.6">60%</meter>

<!-- Dialog -->
<dialog id="dialog">
  <p>This is a dialog box.</p>
  <button onclick="this.parentElement.close()">Close</button>
</dialog>

Media Elements

Iframe

Canvas

Video

Audio

<!-- Iframe -->
<iframe 
  src="https://beavibe.dev" 
  width="100%" 
  height="300" 
  title="Be A Vibe Website"
  style="resize: both; overflow: auto; min-height: 200px; min-width: 300px; padding-right: 20px;">
</iframe>

<!-- Canvas -->
<canvas id="myCanvas" width="200" height="200">
    Your browser does not support the canvas element.
</canvas>
<br>
<!-- Video -->
<video width="320" height="240" controls>
    <source src="../../assets/example-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<!-- Audio -->
<audio controls>
    <source src="/assets/HOME-Resonance.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<!-- Audio with additional attributes -->
<audio controls loop muted style="width: 100%; max-width: 500px;">
  <source src="/assets/HOME-Resonance.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Semantic Elements

Article Title

Article content...

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <section>
            <h2>Article Title</h2>
            <p>Article content...</p>
        </section>
    </article>
</main>

<footer>
    <p>Copyright 2024</p>
</footer>