# 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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://nvb99.gitbook.io/me/cheat-sheet/web-development/html.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.