HTML Cheatsheet

2020/07/21

HTML Cheatsheet

Basic components of HTML document:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    </body>
</html>

Specify W3C XHTML standard:

<html xmlns="http://www.w3.org/1999/xhtml">

Comments:

<!-- comments -->

Inside head

meta

<head>
    <style type="text/css">
    </style>
    <script>
    </script>
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>

Text

Text Tags

Self-closing tags can have opening tag without closing tag, a few examples:

Block and Inline Element

In HTML, block elements occupy at least a whole line and don’t co-exist next to other elements on the same line. Inside block elements there can be other block or inline elements.

<body>
    <div>
        <h3>Title 3</h3>
        <p>A paragraph of <em>text</em></p>
        <p>Another paragraph of <i>text</i></p>
    </div>
</body>

Special Symbols

Symbol Description Code
" double quote "
left single quote
right single quote
x multiply ×
÷ division ÷
> greater than >
< less than <
& ampersand &
long dash
| pipe |
§ section §
© copyright ©
® registration ®
trademark
euro
£ pound £
¥ Yen ¥
° Degree °
Space  

List

Ordered List

<ol type="attribute">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Unordered List

<ul type="attribute">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Definition List

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
</dl>

Table

<table>
    <caption>Table Title</caption>
    <!-- table head -->
    <thead>
        <tr>
            <th>head title 1</th>
            <th>head title 2</th>
        </tr>
    </thead>
    <!-- table body -->
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
        <tr>
            <td>data 3</td>
            <td>data 4</td>
        </tr>
    </tbody>
    <!-- table footer -->
    <tfoot>
        <tr>
            <td colspan="2">footer</td>
        </tr>
    </tfoot>
</table>

Image

<img src="path/image.png" title="Title" alt="alternative text" align=? border=? width=? height=? />

target

target specifies how a links should be opened.

<a href="URL" target="target">Clickable Text</a>

Form

Commonly used attributes for <form>:

input

<input type="TYPE" />

<form method="post">
  Name: <input type="text" />
  Password: <input type="password" maxlength="20" />
  Gender:
  <input type="radio" name="gender" value="Male" checked />Male
  <input type="radio" name="gender" value="Female" />Female
  Favourite Fruits:
  <input type="checkbox" name="fruit" value="Apple" />Apple
  <input type="checkbox" name="fruit" value="Orange" />Orange
  <input type="checkbox" name="fruit" value="Banana" />Banana
  Basic Information:<br/>
  <textarea rows="5" cols="20">Personal information</textarea>
  Skills:<br/>
  <select>
    <option selected>HTML</option>
    <option>CSS</option>
  </select>
</form>

Frame

iframe tag is used to embed another web inside a web.

<iframe src="URL" width="WIDTH" height="HEIGHT"></iframe>