# HTML ### Getting Started #### hello.html ```html HTML5 Boilerplate

Hello world, hello QuickRef.ME!

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

I'm from QuickRef.ME

Share quick reference cheat sheet.

``` See: [The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) #### HTML link ```html QuickRef 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`

See: [The \ Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes) #### Image Tag ```html 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

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 ```html ``` **↓ Preview** {% embed url="" %} 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

QuickRef.ME

``` #### Header Navigation ```html

``` #### HTML5 Tags | [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

``` **↓ Preview** {% embed url="" %} #### HTML5 Audio ```html

``` **↓ Preview** [**link**](https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3) #### HTML5 Ruby ```html 汉 (hàn) 字 (zì) ``` **↓ Preview** 汉hàn字zì #### HTML5 kdi ```html

User hrefs: 60 points
User jdoe: 80 points
User إيان: 90 points

``` **↓ Preview** * User hrefs: 60 points * User jdoe: 80 points * User إيان: 90 points #### HTML5 progress ```html ``` #### HTML5 mark ```html

I Love QuickRef.ME

``` I Love QuickRef.ME ### HTML Tables #### Table Example ```html

name	age
Roberta	39
Oliver	25

``` #### HTML Table Tags | [\](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 | | [\

Attributes | `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 | `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

I'm the first item
I'm the second item
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 ```html ``` **↓ Preview** Email: \ Password: \ \ Remember me The HTML `

` element is used to collect and send information to an external source. #### Form Attribute | `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 Click me ``` *** ```html Click me ``` `for` in a label references an input's `id` attribute #### Input tags ```html Name: ``` **↓ Preview** Username: See: [HTML input Tags](https://quickref.me/html#html-input-tags) #### Textarea tags ```html ``` **↓ Preview** Textarea is a multiple-line text input control #### Radio Buttons ```html Male Female ``` **↓ Preview** Male Female Radio buttons are used to let the user select exactly one #### Checkboxes ```html Soccer Baseball ``` **↓ Preview** Soccer Baseball Checkboxes allows the user to select one or more #### Select tags ```html City: ``` **↓ Preview** City: Sydney Melbourne Cromwell A select box is a dropdown list of options #### Fieldset tags ```html

Your favorite monster Kraken
Sasquatch

``` **↓ Preview** Your favorite monster Kraken\ Sasquatch #### Datalist tags(HTML5) ```html Choose a browser: ``` **↓ Preview** Choose a browser: #### Submit and Reset Buttons ```html Name:

``` **↓ Preview** Name: `Submit` the data to server; `Reset` to default values ### HTML input Tags #### Input Attributes The input tag is an empty element, identifying the particular type of field information to obtain from a user. ```html ``` ***


	`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
	`placeholder="…"`	Adds a temporary, See ::placeholder
	`autocomplete="off"`	Disable auto completion
	`autocapitalize="none"`	Disable auto capitalization
	`inputmode="…"`	Display a specific keyboard, See inputmode
	`list="…"`	The id of an associated 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, See pattern
	`autofocus`	Be focused
	`spellcheck`	Perform spell checking
	`multiple`	Whether to allow multiple values
	`accept=""`	Expected file type in file upload controls

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"` | 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 ### HTML meta Tags #### Meta tags 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)