Cheat sheet for HTML

Shortcuts

Basic HTML document

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <script src="jquery-3.4.1.min.js"></script>
    </body>
</html>

Basic HTML document with author tag

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
        <!-- Description is very important for SEO -->
        <meta name="description" content="Something">
        <!-- Important for SEO -->
        <meta name="author" content="Kasra">
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <!-- To resize base on the device size -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <script src="jquery-3.4.1.min.js"></script>
    </body>
</html>

Audio tag

<audio width="600" controls autoplay loop>
    <source src="audio.mp3" type="audio/mp3">
</audio>

Video tag

<video width="800" height="600" controls>
    <source src="video.mp4"  type="video/mp4">
</video>

Form tag

<form method="GET" action="a page or url">

    <input name="address" placeholder="Address Line 1" />
    <input name type="checkbox" name="married" />Married

    <input name type="radio" name="gender" value="male" />Male
    <input name type="radio" name="gender" value="female"/>Female

    <select name="education">
        <option value="highschool">High School</option>
        <option value="bachelors">Bachelors</option>
        <option value="masters">Masters</option>
        <option value="phd">PhD</option>
    </select>

    <!-- Multiple selection show three item and then scroll -->
    <select multiple name="favourite-animals" size="3">
        <option value="dog">Dogs</option>
        <option value="cat">Cats</option>
        <option value="fish">Fish</option>
        <option value="turtle">Turtles</option>
        <option value="horse">Horses</option>
        <option value="fox">Foxes</option>
        <option value="cow">Cows</option>
    </select>

    <textarea name="description" cols="50" rows="10"></textarea>

    <!-- Size in characters -->
    <input type="text" name="country-code" size="30">

    <!-- Submit button with image -->
    <input type="image" name="submit" height="100px" width="100px" src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg"   border="5px" alt="btn">

    <!-- Email input -->
    <input type="email" name="email-address"> 

    <!-- Number input -->
    <input type="number" name="age">

    <!-- Range/Volume input -->
    <input type="range" name="happiness" min="0" max="100" value="60" step="5">

    <!-- Date input -->
    <input type="date" name="birthday" value="2019-10-04" min="1900-01-01" max="2019-12-31">

    <!-- Time input -->
    <input type="time" name="appointment" min="09:00" max="18:00" required>

    <!-- Color picker -->
    <input type="color" value="#e66465" name="favorite-color"> 

    <input type="reset">

    <button type="submit">Submit</button>
</form>

Table tag

<table border="1px">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>#1</td>
            <td>Kasra</td>
            <td>30</td>
        </tr>
        <tr>
            <td>#2</td>
            <td>John</td>
            <td>45</td>
        </tr>
    </tbody>
</table>

List

<h2>An Unordered List</h2>

<ul>
  <li>John Wick</li>
  <li>The Equalizer</li>
  <li>Suicide Squad</li>
</ul>  

<h2>An Ordered List</h2>

<!-- Starts at number 2 -->
<ol start=2>
  <li>Night Wish</li>
  <li>Eminem</li>
  <li>LP</li>
</ol> 

<h2>Definition list, definition term and definition description</h2>
<!-- Definition list -->
<dl>
  <!-- Definition term -->
  <dt>Hello</dt>
  <!-- Definition description -->
  <dd>English greeting</dd>
  <dt>Hola!</dt>
  <dd>Spanish greeting</dd>
  <dt>Hallo</dt>
  <dd>Germany greeting</dd>
</dl>

Section

<body>
    <header>
        Header here
    </header>

    <main>
        <section>
            <article>Article one</article>
        </section>
    </main>

    <footer>
        Footer here
    </footer>
</body>

Pre formated text

<pre>This is a preformatted text</pre>

Typewriter text

<tt>This is a text for testing purposes only</tt>

Code block

<code>
    echo "Hello World!"
</code>

Citation

<cite>
    Citation text. In Italics
</cite>

Address

<address>
My home, address, is here
</address>

Italics

<em>Italics text</em>

Bold

<strong>Bold text</strong>

Font tag

<!-- Font size -->
<font size="10px"></font> 
<!-- Font color -->
<font color="red"></font>
<!-- Font style -->
<font face="Open Sans"> </font>

Abbr tag

<abbr title="Cascading Style Sheets">CSS</abbr>

‌Base tag

<!-- Defines a base URL for all links in the page -->
<base href="http://www.example.com/">

Text direction

<p>This paragraph will go left-to-right.</p>
<!-- Direction right to left -->
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

Formatting

<!-- Paragraph -->
<p>
    This is a paragraph tag.
</p>

<!-- Line break -->
<br>

<!-- Quote with indentation on both side, a tab length -->
<blockquote>
    My quote goes here
</blockquote>

<!-- div and span -->
<div>
    To format block content
</div>

<span>
    To format inline content
</span>

<!-- Strikethrough text -->
<del>This is outdated information</del>



<a href="https://google.com">Google</a>
<a href="mailto:[email protected]">Mail me</a>
<a href="#id">Anchor within a doc</a>

Horizontal line

<hr>

<!-- Thickness -->
<hr size="5px">

<!-- Length, starts in middle -->
<hr width="20px">

<!-- No shadow -->
<hr noshade>

Image


<!-- Basic image -->
<img  src="url" />

<!--
    Alignment: use CSS instead. Values: `left/right/center/bottom/top/middle`
    Border: use CSS instead.
    Alt: alternative when browser is not supporting image or when image is not available
    -->
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg" align="center" border="2px" height="500px" width="600px" alt="flower" />

Notes

Reference