Cheat sheet for HTML


Basic HTML document

<!DOCTYPE html>
        <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">
        <script src="jquery-3.4.1.min.js"></script>

Basic HTML document with author tag

<!DOCTYPE html>
        <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">
        <script src="jquery-3.4.1.min.js"></script>

Audio tag

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

Video tag

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

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>

    <!-- 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>

    <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=""   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>

Table tag

<table border="1px">



<h2>An Unordered List</h2>

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

<h2>An Ordered List</h2>

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

<h2>Definition list, definition term and definition description</h2>
<!-- Definition list -->
  <!-- Definition term -->
  <!-- Definition description -->
  <dd>English greeting</dd>
  <dd>Spanish greeting</dd>
  <dd>Germany greeting</dd>


        Header here

            <article>Article one</article>

        Footer here

Pre formated text

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

Typewriter text

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

Code block

    echo "Hello World!"


    Citation text. In Italics


My home, address, is here


<em>Italics text</em>


<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="">

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>


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

<!-- Line break -->

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

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

    To format inline content

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

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

Horizontal line


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

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

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


<!-- 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="" align="center" border="2px" height="500px" width="600px" alt="flower" />