Insta
leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration
Updated on June 20, 2022

HTML cheat list

Estimated reading: 4 minutes 20 views

HTML Cheat Sheet. You can print it for everyday use.

HTML Basic Documentation

<!DOCTYPE html>
    <html>
        <head>
            <title> document title </title>
        </head>
        <body> visible text... </body>
    </html>

Basic Tags

<h1> Maximum Heading </h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6> Minimum heading </h6>
<p> This is a paragraph. </p>
<br>(line break)<(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 input </kbd>
<pre> pre formatted text </pre>
<small> smaller text </small>
<strong> important text </strong>
<abbr> (abbreviation) <address> (contact information) <bdo> (text direction) <blockquote> (section cited from
                another source) <cite> (name of work) <del> (deleted text) <ins> (inserted text) <sub> (subscript
                                text) <sup> (superscript text)
Regular link: <a href=" http://www.example.com/ "> link text </a> Image link: <a href=" http://www.example.com/ ">
    <img src=" URL " alt=" Alternative text "> </a> Mail link: <a href=" mailto:webmaster@example.com "> Send e- mail
        </a> bookmarks: <a id="tips"> Tips Section </a> <a href="#tips"> skip to Tips Section </a>

Images

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

Styles/Sections

<style type=" text/css "> h1 { color: red ; } p { color: blue ; }</style>
<div> block-level element in document </div>
<span> inline element in document </span>

unordered list

<ul>
    <li> project </li>
    <li> project </li>
</ul>

ordered list

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

Definition list

<dl>
    <dt> item1 </dt>
    <dd> describe item1 </dd>
    <dt> item2 </dt>
    <dd> describe item2 </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>

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

Entities

<equivalent to <& gt ; equivalent to> © equivalent to ©

Leave a Comment

CONTENTS