HTML Cheat Sheet

HTML cheat sheet. You can print it for daily use.

HTML basic document

<!DOCTYPE html>
    <title>Document title</title>
    Visible text...

Basic Tags

<h1>The biggest headline </h1> 
<h2> ... </h2> 
<h3> ... </h3> 
<h4> ... </h4> 
<h5> ... </h5> 
<h6> Minimal heading </h6> 
<p> This is a paragraph. </P> 
<br> (line feed)
<hr> (Horizontal line)
<!-- This is a comment -->


<B> bold text </B> 
<code> computer code </code> 
<EM> emphasized text </EM> 
<I> italic text </I> 
<kbd> keyboard </kbd> 
<pre> Pre Formatted text </pre> 
<small> Smaller text </small> 
<strong> Important text </strong>
<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (part quoted from another source)
<cite> (name of job)
<del> (deleted text)
<ins> (Inserted text)
<sub> (subscript text)
<sup> (superscript text)


Common Link: <a href = " "> link text </a> 
Image Link: <a href = " "> <IMG src = " the URL " Alt = " replacement text "> </a> 
Mail link: <a href = " mailto: "> send-mail E </a> 
Bookmark:  <a ID = " Tips " > Tip section </a> <a href = " #tips " > Jump Tips section </a> 


<img loading="lazy" src="URL" alt="Alternate Text" height="42" width="42">


<style type="text/css">
  h1 {color:red;}
  p {color:blue;}
<div> Block-level elements in the document </div> 
<span> Inline elements in the document </span>

Unordered list

    <li>List item 1</li>
    <li>List item 2</li>

Ordered list

  <li>The first item </li> 
  <li>The second item </li> 

Definition list

  <dt> item 1 </dt> 
  <dd> describe item 1 </dd> 
  <dt> item 2 </dt> 
  <dd> describe item 2 </dd> 


<table border = " 1 "> 
    <th> Table title </th> 
    <th> Table title </th> 
    <td> Table data </td> 
    <td> Table data </td> 


<iframe src="demo_iframe.htm"></iframe>


<form action="demo_form.php" method="post/get">
  <input type="text" name="email" size="40" maxlength="50">
  <input type="password">
  <input type="checkbox" checked="checked">      
    <option selected="selected">Banana</option>
  <textarea name="comment" rows="60" cols="20"></textarea>


< is equivalent to < 
> is equivalent to > 
© is equivalent to ©