KandZ – Tuts

We like to help…!

HTML 💻 30 Cheatsheet

Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <style>
        /* CSS styles */
    </style>
</head>
<body>

    <!-- Content goes here -->

</body>
</html>

Headings

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

Paragraphs and Text Formatting

<p>This is a <strong>bold</strong> paragraph.</p>
<p>This is an <em>italic</em> paragraph.</p>
<p>This is a <u>underlined</u> paragraph.</p>
<p>This is a <mark>highlighted</mark> paragraph.</p>
<p>This is a <ins>inserted</ins> paragraph.</p>
<p>This is a <del>deleted</del> paragraph.</p>

Links

<a href="https://www.example.com" target="_blank">Visit Example.com</a>
<a href="mailto:info@example.com">Contact Us</a>

Images

<img src="image.jpg" alt="Description of image">
<img src="image.jpg" alt="Image not found" width="300" height="200">

Lists

Unordered List (Bullet Points)

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

Ordered List (Numbered)

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

Description List

<dl>
    <dt>Term 1</dt>
    <dd>Description of term 1.</dd>
    <dt>Term 2</dt>
    <dd>Description of term 2.</dd>
</dl>

Division and Span

<div>This is a division.</div>

<p>This is a span within a paragraph <span style="color: red;">highlighted text</span>.</p>

Tables

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Forms

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

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

    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>

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

    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br><br>

    <label for="cars">Choose a car:</label>
    <select id="cars" name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select><br><br>

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

Semantic Elements (HTML5)

<header>
    <h1>Website Header</h1>
</header>

<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</nav>

<section>
    <article>
        <h2>Article Heading</h2>
        <p>This is an article.</p>
    </article>
</section>

<aside>
    <h3>Sidebar Title</h3>
    <p>Some sidebar content.</p>
</aside>

<footer>
    <p>Contact us: info@example.com</p>
</footer>

Comments

<!-- This is a comment -->

Attributes

  • Class: <div class="example"></div>
  • ID: <div id="uniqueId"></div>
  • Style: <p style="color: red;"></p>
  • Data Attributes: <div data-info="extra information"></div>

Multimedia Elements

Audio

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

Video

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

Iframes

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

Buttons

<button type="button">Click Me!</button>
<input type="button" value="Submit">

Horizontal Rule

<hr>

Preformatted Text

<pre>
This is a preformatted text.
It preserves both      spaces and line breaks.
</pre>

Blockquote

<blockquote cite="https://www.example.com/source">
    "The only way to do great work is to love what you do." - Steve Jobs
</blockquote>

Citation

<p>According to <cite>The World Factbook</cite>, there are over 7 billion people in the world.</p>

Code and Inline Code

<p>This is a code element: <code>print("Hello, World!")</code>.</p>

<pre><code class="language-python">
def hello():
    print("Hello, World!")
hello()
</code></pre>

Marked Text

<p>He was <mark>very</mark> interested in the project.</p>

Small Text

<p>This is a normal text. This is <small>smaller text.</small>.</p>

Subscript and Superscript

<p>Water: H<sub>2</sub>O</p>
<p>The equation: E = mc<sup>2</sup></p>

Details and Summary

<details>
    <summary>Click to expand</summary>
    <p>This is some detailed information.</p>
</details>

Meter Element

<meter value="0.6" min="0" max="1">60%</meter>

Progress Element

<progress value="70" max="100">70%</progress>

Time Element

<p>The event starts at <time datetime="2023-09-15T14:00">2 PM</time>.</p>

Leave a Reply