The Ultimate HTML Cheat Sheetthumbnail

The Ultimate HTML Cheat Sheet

Last Updated: August 16, 2024, By: Abdelhamid Boudjit, 12 min read.

HTMLFrontendCheatSheet

HTML (Hypertext Markup Language) is the foundation of web development. Whether you're a beginner or a seasoned developer, having a cheat sheet at your fingertips can be incredibly handy. This article will serve as your ultimate guide, covering everything you need to know about HTML in a clear and easy-to-understand format.

  1. Basic Structure of an HTML Document

    Every HTML document starts with a declaration and follows a specific structure:

    html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Page Title</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>
    • <!DOCTYPE html>: Defines the document type as HTML5.
    • <html>: The root element of the document.
    • <head>: Contains metadata and links to stylesheets, scripts, etc.
    • <meta charset="UTF-8">: Sets the character encoding.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper scaling on mobile devices.
    • <title>: Sets the title of the webpage.
    • <body>: Contains the content of the webpage.

  2. HTML Elements and Tags

    HTML is composed of elements, each defined by a tag. Below are the most common tags and their functions.

    • Headings

      Headings are used to define titles and subtitles on a page. HTML offers six levels of headings, from<h1>to<h6>.

    html
    <h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Sub-subtitle</h3>

    • Paragraphs

      Paragraphs are used to define blocks of text.

    html
    <p>This is a paragraph of text.</p>

    • Links

      Links allow you to navigate to other web pages.

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

    • Images

      Images are embedded using the<img>tag.

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

    • src: The source of the image.

    • alt: Alternative text for the image (important for accessibility).

    • Lists

      Unordered Lists:

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

      Ordered Lists:

      html
       <ol>
   <li>First Item</li>
   <li>Second Item</li>
   <li>Third Item</li>
 </ol>

    • Tables

      Tables are used to display data in a tabular format.

    html
    <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
    • <table>: Defines a table.
    • <tr>: Defines a table row.
    • <th>: Defines a table header.
    • <td>: Defines a table cell.

  3. Forms and Input

    Forms are used to collect user input.

html
<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Submit" />
</form>
  • <form>: The container for form elements.
  • <label>: Defines a label for an input element.
  • <input>: Defines an input field.
  • type="text": Specifies the type of input (text, email, password, etc.).
  • type="submit": Creates a submit button.

Common Input Types

  • type="text": Single-line text field.
  • type="password": Password field.
  • type="email": Email address field.
  • type="number": Number input field.
  • type="checkbox": Checkbox input.
  • type="radio": Radio button.
  • type="submit": Submit button.
  • type="reset": Reset button.

  1. Semantic HTML

    Semantic HTML introduces meaning to the web page structure. Here are some important semantic tags:

    • <header>: Defines the header section of the page.
    • <nav>: Defines a navigation menu.
    • <section>: Defines a section of content.
    • <article>: Defines an article.
    • <aside>: Defines content aside from the main content.
    • <footer>: Defines the footer section of the page.
html
<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
 
<section>
  <article>
    <h2>Article Title</h2>
    <p>This is an article.</p>
  </article>
</section>
 
<aside>
  <p>Related content</p>
</aside>
 
<footer>
  <p>&copy; 2024 Your Website</p>
</footer>

  1. Multimedia Elements

    • Video

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

    • controls: Adds video controls (play, pause, etc.).

    • <source>: Specifies the video file.

    • Audio

    html
    <audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>
    • controls: Adds audio controls (play, pause, etc.).

  2. HTML Entities

    HTML entities are used to display reserved characters or characters that are not on your keyboard.

    • &lt;→<
    • &gt;→>
    • &amp;→&
    • &quot;→"
    • &apos;→'
    • &copy;→©
    • &reg;→®

  3. Attributes

    Attributes provide additional information about elements. Common attributes include:

    • id: Uniquely identifies an element.
    • class: Assigns a class name to an element.
    • style: Inline CSS styling.
    • title: Provides additional information (appears as a tooltip).
html
<p id="intro" class="text-center" style="color: blue;" title="Introduction">
  Hello World
</p>

  1. HTML5 APIs

    HTML5 introduced several APIs to enhance the user experience:

    • Canvas

      The<canvas>element allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

    html
    <canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

    • Geolocation

      The Geolocation API allows you to access the user's location.

    html
    <script>
  navigator.geolocation.getCurrentPosition(function (position) {
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
  });
</script>

  2. Code and Preformatted Text

    The <code> and <pre> tags are used to display code snippets and preformatted text in HTML.

    • <code> Tag

      The <code> tag is used to define a piece of computer code. It displays inline by default.

      html
      <p>
  To print "Hello World" in JavaScript, use
  <code>console.log('Hello World');</code>
</p>

    • <pre> Tag

      The <pre> tag is used to display preformatted text. Text inside <pre> is displayed in a fixed-width font, and whitespace (such as spaces and line breaks) is preserved.

      html
      <pre>
function greet() {
    console.log('Hello World');
}
</pre>

    • Combining <pre> and <code>

      You can combine <pre> and <code> to display code blocks with preserved formatting.

      html
      <pre><code>
function greet() {
    console.log('Hello World');
}
</code></pre>
      • <code>: Defines inline code snippets.
      • <pre>: Preserves whitespace and line breaks.

  3. Best Practices

    • Use Semantic Elements

      Always use semantic elements to make your HTML more meaningful and accessible.

    • Alt Text for Images

      Always providealttext for images to improve accessibility and SEO.

    • Consistent Indentation

      Use consistent indentation to make your code easier to read.

    • Avoid Inline Styles

      Avoid using inline styles (styleattribute). Instead, use external CSS.

  4. Conclusion

This cheat sheet covers the essential elements and attributes of HTML, but HTML is a vast language with a lot more to explore. Keep this guide handy as you work on your projects, and remember that the key to mastering HTML is practice and continuous learning.

Happy coding!