HTML Cheat Sheet

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

HTML basic document

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

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

Formatting

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

Links

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

Images

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

Styles/Sections

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

Unordered list

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

Ordered list

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

Definition list

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

Tables

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

Iframe

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

Forms

<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">      
  <inputtype="radio"checked="checked">
  <inputtype="submit"value="Send">
  <inputtype="reset">
  <inputtype="hidden">
  <select>
    <option>Apple</option>
    <option selected="selected">Banana</option>
    <option>Cherry</option>
  </select>
  <textarea name="comment" rows="60" cols="20"></textarea>
</form>

Entities

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