html cheatsheet

HTML Cheatsheet

Share your love

Here’s a HTML cheatsheet that covers some of the most commonly used tags and attributes:

Basic Structure

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- content goes here -->
  </body>
</html>

Head Section

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Page Title</title>

Text Formatting

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph</p>
<strong>Bold</strong>
<em>Italic</em>
<sup>Superscript</sup>
<sub>Subscript</sub>
<del>Deleted Text</del>
<ins>Inserted Text</ins>
<code>Code</code>
<pre>Preformatted Text</pre>

Links and Images

<a href="https://www.codingtorque.com">Link</a>
<img src="image.jpg" alt="Alternative Text" width="100" height="100">

Lists

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

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

Tables

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

Forms

<form action="submit-form.php" 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>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  
  <button type="submit">Submit</button>
</form>

Audio Tag

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

Video Tag

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

This cheat sheet covers only a small subset of what’s possible with HTML, but it should be enough to get you started with building your own web pages. Remember to always use semantic markup and accessibility best practices when building your web pages.

Created by : Piyush Patil

If you found any mistake feel free to contact us.

Share your love

Related Posts