HTML Cheat Sheet

Institute It. Training | Kursus Komputer Jakarta Timur | WA. +628978298280 |

HTML Cheat Sheet




Mastering HTML: Your Ultimate Cheat Sheet for Web Development

HTML (Hypertext Markup Language) is the backbone of the web, defining the structure and content of web pages. Whether you are a novice web designer or an experienced developer, having a quick reference guide can significantly boost your productivity and efficiency. This HTML cheat sheet provides a comprehensive list of HTML elements, attributes, and their usage, serving as a handy resource for building robust and well-structured web pages.

https://intitute.blogspot.com/2018/10/html-cheat-sheet.html

HTML Cheat Sheet

Basic Structure

html
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
</body>
</html>

Document Metadata

html
<!DOCTYPE html>  <!-- Defines the document type -->
<html lang="en"> <!-- Declares the language of the document -->
<head>
    <meta charset="UTF-8"> <!-- Character encoding -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->
    <meta name="description" content="A brief description of the page"> <!-- Page description -->
    <title>Page Title</title> <!-- Page title in the browser tab -->
</head>
<body>
</body>
</html>

Text Formatting

html
<p>This is a paragraph.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<strong>Bold text</strong>
<em>Italic text</em>
<u>Underlined text</u>
<del>Deleted text</del>
<ins>Inserted text</ins>
<small>Smaller text</small>
<mark>Highlighted text</mark>
<blockquote>Blockquote text</blockquote>

Lists

html
<ul>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>
<ol>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
</ol>
<dl>
    <dt>Definition term</dt>
    <dd>Definition description</dd>
</dl>

Links

html
<a href="https://www.example.com">This is a link</a>
<a href="https://www.example.com" target="_blank">Open link in a new tab</a>
<a href="#section">Jump to section</a>

Images

html
<img src="image.jpg" alt="Description of image">
<img src="image.jpg" alt="Description of image" width="500" height="600">

Tables

html
<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
</table>

Forms

html
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob">
    
    <label for="gender">Gender:</label>
    <select id="gender" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
    
    <label>
        <input type="checkbox" name="subscribe" checked> Subscribe to newsletter
    </label>
    
    <button type="submit">Submit</button>
</form>

Media

html
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<iframe src="https://www.example.com" width="600" height="400"></iframe>

Semantic Elements

html
<header>
    <h1>Header content</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
<main>
    <article>
        <h2>Article title</h2>
        <p>Article content</p>
    </article>
</main>
<aside>
    <h2>Aside title</h2>
    <p>Aside content</p>
</aside>
<footer>
    <p>Footer content</p>
</footer>

Miscellaneous

html
<div>Generic container for content</div>
<span>Inline container for content</span>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->

This HTML cheat sheet covers the most commonly used elements and attributes, providing a quick reference for web developers. With this guide, you can efficiently structure and style your web pages, enhancing both functionality and aesthetics.

Institute It. Training | Kursus Komputer Jakarta Timur | WA. +628978298280 |
HTML Cheat Sheet




Document Outline

<!DOCTYPE>Version of (X)HTML
<html>….</html>HTML document
<head>….</head>Page information
<body>….</body>Page contests

Comments
<!– Comment Test –>
Page Information
<base />Base URL
<meta />Meta data
<title>….</title>Title
<link />Relevant resource
<style>….</style>Style resource
<script>….</script>Script resource

Document Structure 
<h1>….</h1> to <h6>….</h6>Heading
<div>….</div>Page section
<span>….</span>Inline section
<p>….</p>Paragraph
<br>Line break
<hr>Horizontal rule

Links 
<a href=””>Page link
<a href=”mailto:”>Email link
<a name=”name”>Anchor
<a href=”#name”>Link to anchor

Text Markup
<strong>….</strong>Strong emphasis
<em>….</em>Emphasis
<blockquote>….</blockquote>Long quotation
<q>….</q>Short quotation
<abbr>….</abbr>Abbreviation
<acronym>….</acronym>Acronym
<address>….</address>Address
<pre>….</pre>Pre-formatted text
<dfn>….</dfn>Definition
<code>….</code>Code
<cite>….</cite>Citation
<del>….</del>Deleted text
<ins>….</ins>Inserted text
<sub>….</sub>Subscript
<sup>….</sup>Superscript
<bdo>….</bdo>Text direction
List

<ol>….</ol>Ordered list
<ul>….</ul>Unordered list
<li>….</li>List item
<dl>….</dl>Definition list
<dt>….</dt>Definition term
<dd>….</dd>Term description


Forms
<form>….</form>Form
<fieldset>….</fieldset>Collection of fields
<legend>….</legend>Form legend
<label>….</label>Input label
<input>….</input>Form input
<select>….</select>Drop-down box
<optgroup>….</optgroup>Group of options
<option>….</option>Drop-down options
<textarea>….</textarea>Large text input
<button>….</button>Button


Tables
<table>….</table>Table
<caption>….</caption>Caption
<thead>….</thead>Table body
<tbody>….</tbody>Table body
<tfoot>….</tfoot>Table footer
<colgroup>Column group
<col />Column
<tr>….</tr>Table row
<th>….</th>Header cell
<td>….</td>Table cell

Images and Image Maps
<img />
Image
<map>….</map>
Image Map
<area />
Area of image map

Common Character Entities
&#34;   ”   Quotation mark
&#38;   &   Ampersand
&#60;   <   Less than
&#62;   >   Greater than
&#64;   @  “At” symbol
&#128;  €   Euro
&#149;  •   Small bullet
&#153;  ™  Trademark
&#163;  £   Pound
&#160;       Non-breaking space
&#169;  ©  Copyright symbol
Objects
<object>….</object>
Object
<param />
Parameter
Empty Elements
<area />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
Core Attributes
Class: id      Style: title
Note: Core attributes may not be used in base, head, html, meta, param, script, style or title elements.
Language Attributes 
dir       lang
Note: Language Attributes may not be used in base, br, frame, framest, hr, iframe, param or script elements.
Keyboard Attributes
accesskey     tabindex
Window Events
onLoad    onUnload
Form Events
onBlur        onReset
onChange   onSelect
onFocus     onSubmit
Keyboard Events
onKeydown   onKeyup
onKeypress
Mouse Events
onClick               onMouseout
onDblclick         onMouseover
onMousedown   onMouseup
onMousemove

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Disqus Comments