--- title: HTML date: 2021-07-20 19:16:42 background: bg-[#cc5534] tags: - web categories: - Programming intro: | This HTML quick reference cheat sheet lists the common HTML and HTML5 tags in readable layout. plugins: - copyCode - runCode --- ## Getting Started ### hello.html {.col-span-2 .row-span-2} ```html HTML5 Boilerplate

Hello world, hello CheatSheets.zip!

``` Or try it out in the [jsfiddle](https://jsfiddle.net/Fechin/1e4wz20b/) ### Comment ```html ``` ### Paragraph ```html

I'm from CheatSheets.zip

Share quick reference cheat sheet.

``` See: [The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) ### HTML link ```html CheatSheets Email Call Msg ``` --- | | | | | --- | -------- | --------------------------------------------------------------- | | | `href` | The URL that the hyperlink points to | | | `rel` | Relationship of the linked URL | | | `target` | Link target location:
`_self`, `_blank`, `_top`, `_parent` | {.left-text} See: [The \ Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) ### Image Tag ```html {.wrap} Describe image here ``` --- | | | | | --- | --------- | ---------------------------------------- | | | `src` | Required, Image location _(URL \| Path)_ | | | `alt` | Describe of the image | | | `width` | Width of the image | | | `height` | Height of the image | | | `loading` | How the browser should load | {.left-text} See: [The Image Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) ### Text Formatting Tags ```html Bold Text This text is important Italic Text This text is emphasized Underline Text 
Pre-formatted Text
Source code Deleted text Highlighted text (HTML5) Inserted text Makes text superscripted Makes text subscripted Makes text smaller Ctrl
Text Block Quote
``` ### Headings ```html

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6
``` You should only have one h1 on your page ### Section Divisions | | | | --------------- | ------------------------------------ | | `
` | Division or Section of Page Content | | `` | Section of text within other content | | `

` | Paragraph of Text | | `
` | Line Break | | `
` | Basic Horizontal Line | These are the tags used to divide your page up into sections ### Inline Frame {.row-span-2} ```html {.wrap} ``` #### ↓ Preview See: [The Inline Frame element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) ### JavaScript in HTML ```html ``` #### External JavaScript ```html ... ``` ### CSS in HTML ```html ``` #### External stylesheet ```html ... ``` ## HTML5 Tags ### Document ```html

CheatSheets.zip

``` ### Header Navigation ```html
``` ### HTML5 Tags {.row-span-4} | | | | ---------------------------------------------------------------------------------- | -------------------------------------- | | [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) | Content that’s independent | | [aside](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) | Secondary content | | [audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) | Embeds a sound, or an audio stream | | [bdi](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi) | The Bidirectional Isolate element | | [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | Draw graphics via JavaScript | | [data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data) | Machine readable content | | [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) | A set of pre-defined options | | [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) | Additional information | | [dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) | A dialog box or sub-window | | [embed](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed) | Embeds external application | | [figcaption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) | A caption or legend for a figure | | [figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) | A figure illustrated | | [footer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) | Footer or least important | | [header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) | Masthead or important information | | [main](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) | The main content of the document | | [mark](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) | Text highlighted | | [meter](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter) | A scalar value within a known range | | [nav](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) | A section of navigation links | | [output](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) | The result of a calculation | | [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) | A container for multiple image sources | | [progress](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) | The completion progress of a task | | [rp](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp) | Provides fall-back parenthesis | | [rt](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt) | Defines the pronunciation of character | | [ruby](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby) | Represents a ruby annotation | | [section](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) | A group in a series of related content | | [source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) | Resources for the media elements | | [summary](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) | A summary for the \
element | | [template](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) | Defines the fragments of HTML | | [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) | A time or date | | [track](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) | Text tracks for the media elements | | [video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) | Embeds video | | [wbr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) | A line break opportunity | ### HTML5 Video ```html {.wrap} ``` #### ↓ Preview ### HTML5 Audio ```html {.wrap} ``` #### ↓ Preview ### HTML5 Ruby ```html {.wrap} 汉 (hàn) 字 (zì) ``` #### ↓ Preview 汉 (hàn) 字 (zì) ### HTML5 kdi ```html ``` #### ↓ Preview ### HTML5 progress ```html ``` ### HTML5 mark ```html

I Love CheatSheets.zip

```

I Love CheatSheets.zip

## HTML Tables ### Table Example {.row-span-2} ```html
name age
Roberta 39
Oliver 25
``` ### HTML Table Tags {.row-span-2} | Tag | Description | | --------------------------------------------------------------------------------- | -------------------------------- | | [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) | Defines a table | | [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) | Defines a row in a table | | [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup) | Defines a group of columns | | [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col) | Defines a column within a table | | [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) | Groups the header content | | [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) | Groups the body content | | [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) | Groups the footer content | ### \
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) | Defines a header cell in a table | | [\
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) | Defines a cell in a table | | [\
](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) | Defines a table caption | | [\
Attributes | Attribute | Description | | --------- | --------------------------------------------- | | `colspan` | Number of columns a cell should span | | `headers` | One or more header cells a cell is related to | | `rowspan` | Number of rows a cell should span | See: [td\#Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attributes) ### \ Attributes | Attribute | Description | | -------------------------------------------------------------------------------- | --------------------------------------------- | | `colspan` | Number of columns a cell should span | | `headers` | One or more header cells a cell is related to | | `rowspan` | Number of rows a cell should span | | `abbr` | Description of the cell's content | | [scope](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope) | The header element relates to | See: [th\#Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attributes) ## HTML Lists ### Unordered list ```html
  • I'm an item
  • I'm another item
  • I'm another item
``` See: [The Unordered List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) ### Ordered list ```html
  1. I'm the first item
  2. I'm the second item
  3. I'm the third item
``` See: [The Ordered List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) ### Definition list ```html
A Term
Definition of a term
Another Term
Definition of another term
``` See: [The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) ## HTML Forms ### Form tags {.row-span-2} ```html



``` #### ↓ Preview



The HTML `
` element is used to collect and send information to an external source. ### Form Attribute | Attribute | Description | | ---------- | --------------------------------------------------------------------------------------------------- | | `name` | Name of form for scripting | | `action` | URL of form script | | `method` | HTTP method, `POST` / `GET` _(default)_ | | `enctype` | Media type, See [enctype](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype) | | `onsubmit` | Runs when the form was submit | | `onreset` | Runs when the form was reset | ### Label tags ```html ``` --- ```html ``` `for` in a label references an input's `id` attribute ### Input tags ```html ``` #### ↓ Preview
See: [HTML input Tags](/html#html-input-tags) ### Textarea tags ```html {.wrap} ``` #### ↓ Preview
Textarea is a multiple-line text input control ### Radio Buttons ```html ``` #### ↓ Preview
Radio buttons are used to let the user select exactly one ### Checkboxes ```html ``` #### ↓ Preview
Checkboxes allows the user to select one or more ### Select tags ```html ``` #### ↓ Preview
A select box is a dropdown list of options ### Fieldset tags ```html
Your favorite monster
``` #### ↓ Preview
Your favorite monster
### Datalist tags(HTML5) ```html ``` #### ↓ Preview
### Submit and Reset Buttons ```html
``` #### ↓ Preview
`Submit` the data to server; `Reset` to default values ## HTML input Tags {.cols-2} ### Input Attributes {.row-span-2} The input tag is an empty element, identifying the particular type of field information to obtain from a user. ```html {.wrap} ``` --- | - | | | | --- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | | `type="…"` | The type of data that is being input | | | `value="…"` | Default value | | | `name="…"` | Used to describe this data in the HTTP request | | | `id="…"` | Unique identifier that other HTML elements | | | `readonly` | Stops the user from modifying | | | `disabled` | Stops any interaction | | | `checked` | The radio or checkbox select or not | | | `required` | Being compulsory, See [required](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required#example) | | | `placeholder="…"` | Adds a temporary, See [::placeholder](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#examples) | | | `autocomplete="off"` | Disable auto completion | | | `autocapitalize="none"` | Disable auto capitalization | | | `inputmode="…"` | Display a specific keyboard, See [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) | | | `list="…"` | The id of an associated [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) | | | `maxlength="…"` | Maximum number of characters | | | `minlength="…"` | Minimum number of characters | | | `min="…"` | Minimum numerical value on range & number | | | `max="…"` | Maximum numerical value on range & number | | | `step="…"` | How the number will increment in range & number | | | `pattern="…"` | Specifies a [Regular expression](/regex), See [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) | | | `autofocus` | Be focused | | | `spellcheck` | Perform spell checking | | | `multiple` | Whether to allow [multiple](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) values | | | `accept=""` | Expected file type in [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) upload controls | {.left-text} Also see: [Attributes for the \ element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) ### Input types | | | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `type="checkbox"` | | | `type="radio"` | | | `type="file"` | | | `type="hidden"` | | | `type="text"` | | | `type="password"` | | | `type="image"` | | | `type="reset"` | | | `type="button"` | | | `type="submit"` | | #### New Input Types in HTML5 | | | | ----------------------- | -------------------------------------------------------------------- | | `type="color"` | | | `type="date"` | | | `type="time"` | | | `type="month"` | | | `type="datetime-local"` | | | `type="week"` | | | `type="email"` | | | `type="tel"` | | | `type="url"` | | | `type="number"` | | | `type="search"` | | | `type="range"` | | ### Input CSS selectors | | | | ------------- | ------------------------- | | `input:focus` | When its keyboard focused | See: [Input pseudo classes](/css#input-pseudo-classes) ## HTML meta Tags {.cols-2} ### Meta tags {.row-span-3} The meta tag describes meta data within an HTML document. It explains additional material about the HTML. ```html ``` ```html ··· ``` --- ```html ``` --- ```html ``` --- ```html ``` --- ```html ``` --- ```html ``` ### Open Graph ```html ``` Used by Facebook, Instagram, Pinterest, LinkedIn, etc. ### Twitter Cards ```html ``` See: [Twitter Card Documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary) ### Geotagging ```html ``` See: [Geotagging](https://en.wikipedia.org/wiki/Geotagging#HTML_pages) ## Also see - [HTML 4.01 Specification](https://www.w3.org/TR/REC-html40/cover.html#minitoc) _(w3.org)_