HTML Cheat Sheet   By CodeBustler

HTML Basics
  • <!DOCTYPE> - Define HTML Version
  • <html> - Root of an HTML Document
  • <body> - Content Of HTML Document

  • <style> - Internal CSS Styling
  • <script> - Scripting | eg. JavaScript
  • <noscript> - Altr Content | Disable Script
Document Structure
  • <p> - Paragrap | Block
  • <h[1-6]> - Headings | Block

  • <div> - Block Section In Document
  • <span> - Inline Section In Document

  • <br /> - Inserts Single Line Break
  • <hr /> - Inserts Horizontal Line
  • <!-- --> - Comment
Meta Information
  • <head> - Info About Document
  • <title> - Defines Document Title
  • <meta> - Contains Metadata
  • <base> - To Specify Default URL
HTML Images
  • <img /> - Embeds Image | "src"
  • <map> - Clickable areas on image
  • <area /> - In conjunction with <map>
HTML List
  • <ul> - Unordered List
  • <ol> - Ordered List
  • <li> - List Item

  • <dl> - Definition List
  • <dt> - Definition Term
  • <dd> - Description Details
HTML Tables
  • <table> - Defines Table
  • <caption> - Table Caption

  • <th> - Header Cell In Table
  • <tr> - Defines Table Row
  • <td> - Define Table Data

  • <thead> - Header of Column
  • <tbody> - Set Of Table Row | Body
  • <tfoot> - Summarizing Columns
HTML Links
  • <a> - Anchor Element | "href"
  • <link /> - Relative | External Source

  • <a href="mailto:"> - Email Link
  • <a href="#name"> - Link To Anchor
HTML Text Formatting
  • <strong> - Strong Emphasis | Bold
  • <em> - Emphasis | Italic

  • <blockquote> - Long Quotation
  • <q> - Short Quotation
  • <cite> - Title of a creative work

  • <abbr> - Abbrieviation | "title"
  • <def> - Definition
  • <address> - Address | Contact Info

  • <pre> - Pre-Formatted Text
  • <code> - Display Computer Code
  • <bdo> - Text Direction | dir="rtl/ltr"

  • <ins> - Text Inserted | Underline
  • <del> - Text Removed | Strike Line

  • <sup> - Defines Superscript Text
  • <sub> - Defines Suberscript Text
HTML Semantic Elements
  • <header> - header for docm/section
  • <nav> - Set of navigation links
  • <main> - Main content of documnt
  • <footer> - Footer for docm/section

  • <section> - Section of a document
  • <article> - Self-contained content
  • <aside> - Aside from content | Sidebar
  • <details> - Details | User can view/hide
  • <summary> - Heading for a <details>

  • <figure> - Self-contained Content
  • <figcaption> - Caption for <figure>
  • <mark> - Marked/highlighted text
  • <time> - Defines a date/time

  • <output> - Display Results | Scripts
  • <progress> - Display Progress Bar
HTML Media
  • <img> - Used to embed images
  • <audio> - Used to embed audios
  • <video> - Used to embed videos
  • <picture> - Multiple sources for image

  • <iframe> - Embed extrnl WebPage/Doc
  • <embed> - Container | Extrnl Resources

  • <source> - Hover Me ⇖
  • <track> - Hover Me ⇖

  • <canvas> - Draw graphics & animation
  • <svg> - Container | SVG graphics
  • <map> - Clickable areas on image
  • <area> - In conjunction with <map>
HTML Forms
  • <form> - Defines HTML Form
  • <fieldset> - Collection Of Fields
  • <legend> - ↑ Caption For Content

  • <label> - Label for <input>
  • <input /> - Defines Input Controls

  • <select> - Drop-down Box
  • <optgroup> - Group Of Options
  • <option> - Drop-down Options

  • <textarea> - Large Text Input
  • <button> - Clickable Button
HTML Input Types
  • <input type="text"> - Single line text input
  • <input type="number"> - Numeric input field
  • <input type="email"> - Input field for e-mail address
  • <input type="password"> - Password Field
  • <input type="reset"> - Reset all values to default values
  • <input type="submit"> - Form data to a form-handler
  • <input type="button"> - Defines a button
  • <input type="search"> - Used for search fields
  • <input type="tel"> - For telephone number
  • <input type="url"> - Should contain a URL address.

  • <input type="checkbox"> - Defines a checkbox
  • <input type="radio"> - Defines a radio button

  • <input type="color"> - Input field | Color Picker
  • <input type="file"> - "Browse" button for file upload
  • <input type="hidden"> - Hidden | Not visible to a user
  • <input type="image"> - Defines image as a submit btn
  • <input type="range"> - Slider control | Def range is 0 to 100

  • <input type="time"> - To select a time | no time zone
  • <input type="date"> - Input field | Date picker
  • <input type="datetime-local"> - Specifies a date and time
  • <input type="month"> - To select a month and year
  • <input type="week"> - To select a week and year
Most Useful Attributes
  • class - Specifies a class for Element
  • id - Speci Unique id for Element

  • src - Specifies the location (URL)
  • href - Specifies the URL
  • target - Speci Where to Open <a>
  • download - Target will be downloaded

  • title - Title for an HTML element
  • alt - Alternative text for <img >
  • type - Specify the type of content
  • rel - Relatinshp betwn Document
HTML Media Attributes
  • autoplay - Auto Playing audio/video
  • controls - Display Media Controls
  • loop - Start overAgain audio/video
  • muted - Muted output | audio/video

  • poster - Cover image (Video) | "URL"
HTML Event Attributes
  • Window Events - Click Here
  • Form Events - Click Here
  • Keyboard Events - Click Here
  • Mouse Events - Click Here
  • Drag Events - Click Here
  • Clipboard Events - Click Here
  • Media Events - Click Here
  • Misc Events - Click Here
HTML Resources
  • History of HTML | By Fireship
  • Features all elements and attributes
  • HTML Symbols & Entities Codes
  • HTML Symbols & Entities Codes (2)
  • HTTP Messages | 404 Not Found etc..
  • HTTP Request Methods | GET, POST etc..
By CodeBustler
My Projects
➜