HTML Cheat Sheet

Return to TOC

Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

Head Elements

Element Description Example
<title> Defines the title of the document <title>My Webpage</title>
<meta> Defines metadata about the document <meta charset="UTF-8">
<link> Defines the relationship between the document and an external resource (most used to link stylesheets) <link rel="stylesheet" href="styles.css">
<style> Defines style information for the document <style>body {font-family: Arial;}</style>
<script> Defines a client-side script <script src="script.js"></script>

Text Formatting

Element Description Example
<p> Defines a paragraph <p>This is a paragraph.</p>
<br> Inserts a single line break <br>
<hr> Defines a thematic change in the content <hr>
<b> Defines bold text <b>This text is bold.</b>
<i> Defines italic text <i>This text is italic.</i>
<u> Defines underlined text <u>This text is underlined.</u>
<strong> Defines important text <strong>This text is important.</strong>
<em> Defines emphasized text <em>This text is emphasized.</em>
<mark> Defines marked/highlighted text <mark>This text is highlighted.</mark>
<small> Defines smaller text <small>This text is small.</small>
<del> Defines deleted text <del>This text is deleted.</del>
<ins> Defines inserted text <ins>This text is inserted.</ins>
<sub> Defines subscripted text <sub>H<sub>2</sub>O</sub>
<sup> Defines superscripted text <sup>E=mc<sup>2</sup></sup>

Links

<a href="https://www.example.com">This is a link</a>

Images

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

Lists

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

Ordered Lists <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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Forms

<form action="submit_form.php" 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>
  <input type="submit" value="Submit">
</form>

Semantic Elements

Element Description Example
<header> Defines a header for a document or section <header>This is a header.</header>
<nav> Defines a set of navigation links <nav><a href="#">Home</a> | <a href="#">About</a></nav>
<section> Defines a section in a document <section>This is a section.</section>
<article> Defines an independent, self-contained content <article>This is an article.</article>
<aside> Defines content aside from the content it is placed in <aside>This is an aside.</aside>
<footer> Defines a footer for a document or section <footer>This is a footer.</footer>