logo
eng-flag

HTML Cheatsheet

Table of Contents

  1. Document Structure
  2. Text Formatting
  3. Links
  4. Images
  5. Lists
  6. Tables
  7. Forms
  8. Semantic Elements
  9. Multimedia
  10. Meta Tags

Document Structure

Basic HTML Template

<!DOCTYPE html>
<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

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs and Line Breaks

<p>This is a paragraph.</p>
<p>This is another paragraph.<br>With a line break.</p>

Text Styling

<strong>Bold text</strong>
<em>Italicized text</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

<a href="https://www.example.com">Visit Example.com</a>

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

<a href="mailto:example@example.com">Send Email</a>

Images

Basic Image

<img src="image.jpg" alt="Description of image">

Image with Width and Height

<img src="image.jpg" alt="Description" width="300" height="200">

Clickable Image

<a href="https://www.example.com">
    <img src="image.jpg" alt="Click me">
</a>

Lists

Unordered List

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Ordered List

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Definition List

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>

Tables

Basic Table

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Table with Caption and Sections

<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Body Row 1, Cell 1</td>
            <td>Body Row 1, Cell 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer Row 1, Cell 1</td>
            <td>Footer Row 1, Cell 2</td>
        </tr>
    </tfoot>
</table>

Forms

Basic Form

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <input type="submit" value="Submit">
</form>

Form Elements

<form>
    <input type="text" name="text">
    <input type="password" name="password">
    <input type="radio" name="radio" value="option1">
    <input type="checkbox" name="checkbox">
    <input type="file" name="file">
    <input type="number" name="number">
    <input type="date" name="date">
    <input type="color" name="color">
    <input type="range" name="range" min="0" max="100">

    <select name="select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>

    <textarea name="textarea" rows="4" cols="50"></textarea>

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>

Semantic Elements

Structural Semantics

<header>Header content</header>
<nav>Navigation content</nav>
<main>
    <article>Article content</article>
    <section>Section content</section>
    <aside>Aside content</aside>
</main>
<footer>Footer content</footer>

Text Semantics

<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Figure caption</figcaption>
</figure>

<time datetime="2023-06-19">June 19, 2023</time>

<address>
    Contact information
</address>

Multimedia

Video

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Audio

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

Iframe

<iframe src="https://www.example.com" width="500" height="300"></iframe>

Meta Tags

Basic Meta Tags

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page description">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
</head>

Open Graph Meta Tags

<head>
    <meta property="og:title" content="Title Here">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://www.example.com/">
    <meta property="og:image" content="http://example.com/image.jpg">
    <meta property="og:description" content="Description Here">
</head>

2024 © All rights reserved - buraxta.com