2024-08-07

HTML cheatsheet

HyperText Markup Language is used to define the meaning and structure of documents.

Document structure

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>Document title</title>
  </head>
  <body>
    <!-- This is a comment -->
  </body>
</html>

Website structure

Header and navigation

html

<header>
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>
</header>

Main content

html

<main></main>

Aside content

html

<aside>
    <p>Aside content</p>
</aside>

Article

Independent parts of a document, such as blog posts, news articles, forum posts, or any other type of content that can stand alone.

html

<article>
    <h2>Header</h2>
    
    <p>Main content</p>
</article>

Section

Used to group together related content within a webpage.

html

<section>
    <h2>CSS blog posts</h2>
    
    <article>
        <h3>Article 1</h3>
        <p>Sample text</p>
    </article>
    <article>
        <h3>Article 2</h3>
        <p>Sample text</p>
    </article>
</section>

html

<footer>
    <p>© Copyright 2024 by MS</p>
</footer>

Generic containers

html

<div>Generic container</div>

<span>Generic inline container</span>

Headers h1 - h6

html

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

Lists

Unordered

html

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

Ordered

html

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

Description list

html

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

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

Text

html

<p>Sample paragraph</p>

html

<strong>Important text</strong>

html

<blockquote cite="https://msaja.dev/">
    <p>Quote</p>
</blockquote>

html

<cite>Marcin Saja's website</cite>

html

<pre>
    Preformatted text.
    
    It is displayed exactly
    as
    formatted
</pre>

html

<code>const x = 123;</code>

html

<kbd>Ctrl</kbd> + <kbd>V</kbd>

html

<hr />

html

<dfn>cartography</dfn>

html

<address>
    The White House<br />
    1600 Pennsylvania Avenue, N.W.<br />
    Washington, DC 20500
</address>

html

<abbr title="HyperText Markup Language">
    HTML
</abbr>

html

<em>emphasis</em>

html

<q>Inline quotation</q>

html

<var>x</var>

html

<p>word break<wbr /> opportunity</p>

html

<u>spelling mistake</u>

Links

html

<a href="https://msaja.dev">
    Visit msaja.dev
</a>

Image and multimedia

html

<img src="photo.jpg" alt="cat" />

html

<audio controls src="/song.mp3"></audio>

html

<video controls src="/movie.mp4">
  <track default kind="captions" srclang="en" src="/subtitles.vtt" />
</video>

html

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle r="45" cx="50" cy="50" fill="red" />
    An alternative text describing what your svg displays
</svg>

html

<canvas width="400" height="400">
  An alternative text describing what your canvas displays
</canvas>

html

<figure>
    <img src="cat.jpg" />
    <figcaption>Black cat</figcaption>
</figure>

Table

html

<table>
  <caption>
    Important data
  </caption>
  <thead>
    <tr>
      <th scope="col">Id</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Marcin</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Marta</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Sum</th>
      <td>2</td>
    </tr>
  </tfoot>
</table>

Form

html

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

    <label for="content">Content</label>
    <textarea id="content" name="content"></textarea>
    
    <label for="type">Type</label>
    <select id="type">
        <option value="type1">Type 1</option>
        <option value="type2">Type 2</option>
        <option value="type3">Type 3</option>
    </select>
    
    <button type="submit">
        Submit
    </button>
</form>

Script

html

<script>
    alert('Hello!');
</script>

<noscript>
    Your browser doesn't support scripting
</noscript>

Document metadata

html

<head>
    <meta charset="utf-8" />
    
    <base href="https://www.example.com/" />
    
    <link href="/style.css" rel="stylesheet" />
    
    <title>Title</title>
    
    <style>
        body {
            color: red;
        }
    </style>
</head>