---
source: https://developer.mozilla.org/en-US/docs/Web/HTML
obj: concept
---

**HTML** (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ([CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)) or functionality/behavior ([JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head), [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title), [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body), [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header), [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer), [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section), [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p), [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span), [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside), [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio), [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas), [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist), [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav), [`<search>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search), [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output), [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol), [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "`<`" and "`>`". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the `<title>` tag can be written as `<Title>`, `<TITLE>`, or in any other way. However, the convention and recommended practice is to write tags in lowercase.

# Elements
## \<a>
The **`<a>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element (or _anchor_ element), with [its `href` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href), creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

### Attributes
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `download`
	Causes the browser to treat the linked URL as a download. Can be used with or without a `filename` value:
	
	Without a value, the browser will suggest a filename/extension, generated from various sources:
	    - The [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) HTTP header
	    - The final segment in the URL [path](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname)
	    - The [media type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type) (from the [`Content-Type`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) header, the start of a [`data:` URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs), or [`Blob.type`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/type) for a [`blob:` URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static))
- `filename`:
	defining a value suggests it as the filename. `/` and `\` characters are converted to underscores (`_`). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
- `href`
	The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:
	- Sections of a page with document fragments
	- Specific text portions with [text fragments](https://developer.mozilla.org/en-US/docs/Web/Text_fragments)
	- Pieces of media files with media fragments
	- Telephone numbers with `tel:` URLs
	- Email addresses with `mailto:` URLs

## \<article>
The **`<article>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

## \<audio>
The **`<audio>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to embed sound content in documents. It may contain one or more audio sources, represented using the `src` attribute or the [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream).

### Attributes
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `autoplay`
	A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
-`controls`
	If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
-`loop`
	A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.
-`muted`
	A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is `false`.
- `preload`
	This [enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated) attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
	
	- `none`: Indicates that the audio should not be preloaded.
	- `metadata`: Indicates that only audio metadata (e.g. length) is fetched.
	- `auto`: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.
	- _empty string_: A synonym of the `auto` value.

## \<b>
The **`<b>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use `<b>` for styling text or granting importance. If you wish to create boldface text, you should use the CSS [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) property. If you wish to indicate an element is of special importance, you should use the [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) element.

## \<blockquote>
The **`<blockquote>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see [Notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#usage_notes) for how to change it). A URL for the source of the quotation may be given using the `cite` attribute, while a text representation of the source can be given using the [`<cite>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) element.

## \<body>
The **`<body>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents the content of an HTML document. There can be only one `<body>` element in a document.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `onload`
	Function to call when the document has finished loading.
- `onoffline`
	Function to call when network communication has failed.
- `ononline`
	Function to call when network communication has been restored.

## \<br>
The **`<br>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

## \<button>
The **`<button>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a [form](https://developer.mozilla.org/en-US/docs/Learn/Forms) or opening a dialog.

By default, HTML buttons are presented in a style resembling the platform the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) runs on, but you can change buttons' appearance with [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).

### Attributes
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `autofocus`
	This Boolean attribute specifies that the button should have input [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) when the page loads. **Only one element in a document can have this attribute.**
- `disabled`
	This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.
- `form`
	The [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element to associate the button with (its _form owner_). The value of this attribute must be the `id` of a `<form>` in the same document. (If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element, if any.)
	This attribute lets you associate `<button>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
- `name`
	The name of the button, submitted as a pair with the button's `value` as part of the form data, when that button is used to submit the form.
- `type`
	The default behavior of the button. Possible values are:
	- `submit`: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a `<form>`, or if the attribute is an empty or invalid value.
	- `reset`: The button resets all the controls to their initial values, like [<input type="reset">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset). (This behavior tends to annoy users.)
	- `button`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
- `value`
	Defines the value associated with the button's `name` when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.

## \<code>
The **`<code>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the [user agent's](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) default monospace font.

## \<data>
The **`<data>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) element must be used.

### Attributes
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `value`
	This attribute specifies the machine-readable translation of the content of the element.

## \<del>
The **`<del>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) element can be used for the opposite purpose: to indicate text that has been added to the document.

## \<details>
The **`<details>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) element.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the `<summary>` element are used as the label for the disclosure widget.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `open`
	This Boolean attribute indicates whether the details — that is, the contents of the `<details>` element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.
	
	> **Note:** You have to remove this attribute entirely to make the details hidden. `open="false"` makes the details visible because this attribute is Boolean.

## \<div>
The **`<div>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is the generic container for flow content. It has no effect on the content or layout until styled in some way using [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS).

## \<em>
The **`<em>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element marks text that has stress emphasis. The `<em>` element can be nested, with each level of nesting indicating a greater degree of emphasis.

## \<embed>
The **`<embed>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.

### Attributes
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `height`
	The displayed height of the resource, in [CSS pixels](https://drafts.csswg.org/css-values/#px). This must be an absolute value; percentages are _not_ allowed.
- `src`
	The URL of the resource being embedded.
- `type`
	The [MIME type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type) to use to select the plug-in to instantiate.
- `width`
	The displayed width of the resource, in [CSS pixels](https://drafts.csswg.org/css-values/#px). This must be an absolute value; percentages are _not_ allowed.

## \<footer>
The **`<footer>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a footer for its nearest ancestor [sectioning content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#sectioning_content) or [sectioning root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#sectioning_root) element. A `<footer>` typically contains information about the author of the section, copyright data or links to related documents.

## \<form>
The **`<form>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a document section containing interactive controls for submitting information.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `accept-charset`
	Space-separated [character encodings](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding) the server accepts. The browser uses them in the order in which they are listed. The default value means [the same encoding as the page](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding). (In previous versions of HTML, character encodings could also be delimited by commas.)
- `autocomplete`
	Indicates whether input elements can by default have their values automatically completed by the browser. `autocomplete` attributes on form elements override it on `<form>`. Possible values:
	- `off`: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see [The autocomplete attribute and login fields](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).)
	- `on`: The browser may automatically complete entries.
- `name`
	The name of the form. The value must not be the empty string, and must be unique among the `form` elements in the forms collection that it is in, if any.

### Attributes for form submission
The following attributes control behavior during form submission.

- `action`
	The URL that processes the form submission. This value can be overridden by a [`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction) attribute on a [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [`<input type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit), or [`<input type="image">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) element. This attribute is ignored when `method="dialog"` is set.
- `enctype`
	If the value of the `method` attribute is `post`, `enctype` is the [MIME type](https://en.wikipedia.org/wiki/Mime_type) of the form submission. Possible values:
	- `application/x-www-form-urlencoded`: The default value.
	- `multipart/form-data`: Use this if the form contains [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements with `type=file`.
	- `text/plain`: Useful for debugging purposes.
- `method`
	The [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) method to submit the form with. The only allowed methods/values are (case insensitive):
	- `post`: The [`POST`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) method; form data sent as the [request body](https://developer.mozilla.org/en-US/docs/Web/API/Request/body).
	- `get` (default): The [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET); form data appended to the `action` URL with a `?` separator. Use this method when the form [has no side effects](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent).
	- `dialog`: When the form is inside a [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog), closes the dialog and causes a `submit` event to be fired on submission, without submitting data or clearing the form.
- `target`
	Indicates where to display the response after submitting the form. It is a name/keyword for a _browsing context_ (for example, tab, window, or iframe). The following keywords have special meanings:
	- `_self` (default): Load into the same browsing context as the current one.
	- `_blank`: Load into a new unnamed browsing context. This provides the same behavior as setting [`rel="noopener"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#rel) which does not set [`window.opener`](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener).
	- `_parent`: Load into the parent browsing context of the current one. If no parent, behaves the same as `_self`.
	- `_top`: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as `_self`.

## \<h1>
The **`<h1>`** to **`<h6>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) elements represent six levels of section headings. `<h1>` is the highest section level and `<h6>` is the lowest. By default, all heading elements create a [block-level](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) box in the layout, starting on a new line and taking up the full width available in their containing block.

## \<head>
The **`<head>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element contains machine-readable information ([metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata)) about the document, like its [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title), [scripts](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script), and [style sheets](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style).

- Elements that can be used inside the `<head>`:
    - [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
    - [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
    - [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
    - [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
    - [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
    - [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
    - [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)
    - [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)

## \<header>
The **`<header>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

## \<hr>
The **`<hr>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

## \<html>
The **`<html>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents the root (top-level element) of an HTML document, so it is also referred to as the _root element_. All other elements must be descendants of this element.

## \<iframe>
The **`<iframe>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a nested [browsing context](https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context), embedding another HTML page into the current one.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `height`
	The height of the frame in CSS pixels. Default is `150`.
- `loading`
	Indicates how the browser should load the iframe:
	- `eager`: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
	- `lazy`: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
- `name`
	A targetable name for the embedded browsing context. This can be used in the `target` attribute of the [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form), or [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) elements; the `formtarget` attribute of the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) elements; or the `windowName` parameter in the [`window.open()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open "window.open()") method.
- `src`
	The URL of the page to embed. Use a value of `about:blank` to embed an empty page that conforms to the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#inherited_origins). Also note that programmatically removing an `<iframe>`'s src attribute (e.g. via [`Element.removeAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute)) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.
- `width`
	The width of the frame in CSS pixels. Default is `300`.

## \<img>
The **`<img>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds an image into the document.

- `alt`
	Defines an alternative text description of the image.
- `height`
	The intrinsic height of the image, in pixels. Must be an integer without a unit.
- `src`
	The image [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL). Mandatory for the `<img>` element. On [browsers](https://developer.mozilla.org/en-US/docs/Glossary/Browser) supporting `srcset`, `src` is treated like a candidate image with a pixel density descriptor `1x`, unless an image with this pixel density descriptor is already defined in `srcset`, or unless `srcset` contains `w` descriptors.
- `width`
	The intrinsic width of the image in pixels. Must be an integer without a unit.

## \<ins>
The **`<ins>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a range of text that has been added to a document. You can use the [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) element to similarly represent a range of text that has been deleted from the document.

## \<li>
The **`<li>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to represent an item in a list. It must be contained in a parent element: an ordered list ([`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)), an unordered list ([`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)), or a menu ([`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

## \<mark>
The **`<mark>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents text which is **marked** or **highlighted** for reference or notation purposes due to the marked passage's relevance in the enclosing context.

## \<meta>
The **`<meta>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents [metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata) that cannot be represented by other HTML meta-related elements, like [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script), [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) or [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title).

```html
<meta name="name" content="value">
```

## \<nav>
The **`<nav>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

## \<ol>
The **`<ol>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents an ordered list of items — typically rendered as a numbered list.

### Attributes
This element also accepts the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `reversed`
	This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.
- `start`
	An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering `type` is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use `start="4"`.

## \<optgroup>
The **`<optgroup>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element creates a grouping of options within a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `disabled`
	If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.
- `label`
	The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.

## \<option>
The **`<option>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to define an item contained in a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), an [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), or a [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) element. As such, `<option>` can represent menu items in popups and other lists of items in an HTML document.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `disabled`
	If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones. If this attribute is not set, the element can still be disabled if one of its ancestors is a disabled [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) element.
- `label`
	This attribute is text for the label indicating the meaning of the option. If the `label` attribute isn't defined, its value is that of the element text content.
- `selected`
	If present, this Boolean attribute indicates that the option is initially selected. If the `<option>` element is the descendant of a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element whose [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple) attribute is not set, only one single `<option>` of this [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element may have the `selected` attribute.
- `value`
	The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.

## \<p>
The **`<p>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

## \<pre>
The **`<pre>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or [monospaced](https://en.wikipedia.org/wiki/Monospaced_font), font. Whitespace inside this element is displayed as written.

## \<progress>
The **`<progress>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `max`
	This attribute describes how much work the task indicated by the `progress` element requires. The `max` attribute, if present, must have a value greater than `0` and be a valid floating point number. The default value is `1`.
- `value`
	This attribute specifies how much of the task that has been completed. It must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. If there is no `value` attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

## \<s>
The **`<s>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element renders text with a strikethrough, or a line through it. Use the `<s>` element to represent things that are no longer relevant or no longer accurate. However, `<s>` is not appropriate when indicating document edits; for that, use the [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) and [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) elements, as appropriate.

## \<section>
The **`<section>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

## \<selection>
The **`<select>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a control that provides a menu of options.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `autocomplete`
	A string providing a hint for a [user agent's](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) autocomplete feature. See [The HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for a complete list of values and details on how to use autocomplete.
- `autofocus`
	This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the `autofocus` attribute.
- `disabled`
	This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset); if there is no containing element with the `disabled` attribute set, then the control is enabled.
- `form`
	The [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element to associate the `<select>` with (its _form owner_). The value of this attribute must be the [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) of a `<form>` in the same document. (If this attribute is not set, the `<select>` is associated with its ancestor `<form>` element, if any.)
	
	This attribute lets you associate `<select>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
- `multiple`
	This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When `multiple` is specified, most browsers will show a scrolling list box instead of a single line dropdown.
- `name`
	This attribute is used to specify the name of the control.
- `required`
	A Boolean attribute indicating that an option with a non-empty string value must be selected.
- `size`
	If the control is presented as a scrolling list box (e.g. when `multiple` is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is `0`.

## \<source>
The **`<source>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies multiple media resources for the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), the [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element, or the [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) element. It is a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element), meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for [image file formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) and [media file formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats).

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `type`
	The [MIME media type of the image](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) or [other media type](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers), optionally with a [`codecs` parameter](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter).
- `src`
	Required if the `source` element's parent is an [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) element, but not allowed if the `source` element's parent is a [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
	Address of the media resource.

## \<span>
The **`<span>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#class) or [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) attributes), or because they share attribute values, such as [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#lang). It should be used only when no other semantic element is appropriate. `<span>` is very much like a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) element, but [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is a [block-level element](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) whereas a `<span>` is an [inline-level element](https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content).

## \<strong>
The **`<strong>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

## \<style>
The **`<style>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the `<style>` element.

## \<sub>
The **`<sub>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.

## \<sup>
The **`<sup>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.

## \<table>
The **`<table>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

## \<tbody>
The **`<tbody>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element encapsulates a set of table rows ([`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) elements), indicating that they comprise the body of the table ([`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)).

## \<td>
The **`<td>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a cell of a table that contains data. It participates in the _table model_.

## \<th>
The **`<th>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the [`scope`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope) and [`headers`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#headers) attributes.

## \<thead>
The **`<thead>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a set of rows defining the head of the columns of the table.

## \<tr>
The **`<tr>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a row of cells in a table. The row's cells can then be established using a mix of [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) (data cell) and [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) (header cell) elements.

## \<textarea>
The **`<textarea>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

### Attributes
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `autocomplete`
	This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:
	- `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
	- `on`: The browser can automatically complete the value based on values that the user has entered during previous uses.
- `autofocus`
	This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.
- `cols`
	The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is `20`.
- `disabled`
	This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset); if there is no containing element when the `disabled` attribute is set, the control is enabled.
- `form`
	The form element that the `<textarea>` element is associated with (its "form owner"). The value of the attribute must be the `id` of a form element in the same document. If this attribute is not specified, the `<textarea>` element must be a descendant of a form element. This attribute enables you to place `<textarea>` elements anywhere within a document, not just as descendants of form elements.
- `maxlength`
	The maximum string length (measured in UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.
- `minlength`
	The minimum string length (measured in UTF-16 code units) required that the user should enter.
- `name`
	The name of the control.
- `placeholder`
	A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.
- `readonly`
	This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the `disabled` attribute, the `readonly` attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.
- `required`
	This attribute specifies that the user must fill in a value before submitting a form.
- `rows`
	The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.

## \<title>
The **`<title>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines the document's title that is shown in a [browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser)'s title bar or a page's tab. It only contains text; tags within the element are ignored.

## \<ul>
The **`<ul>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents an unordered list of items, typically rendered as a bulleted list.

## \<video>
The **`<video>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds a media player which supports video playback into the document. You can use `<video>` for audio content as well, but the [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element may provide a more appropriate user experience.

### Attributes
Like all other HTML elements, this element supports the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).

- `autoplay`
	A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
- `controls`
	If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
- `height`
	The height of the video's display area, in [CSS pixels](https://drafts.csswg.org/css-values/#px) (absolute values only; [no percentages](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)).
- `loop`
	A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.
- `muted`
	A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is `false`, meaning that the audio will be played when the video is played.
- `poster`
	A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.
- `src`
	The URL of the video to embed. This is optional; you may instead use the [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element within the video block to specify the video to embed.
- `width`
	The width of the video's display area, in [CSS pixels](https://drafts.csswg.org/css-values/#px) (absolute values only; [no percentages](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)).

### Events
|Event Name|Fired When|
|---|---|
|[`audioprocess`](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event "audioprocess") Deprecated|The input buffer of a [`ScriptProcessorNode`](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode) is ready to be processed.|
|[`canplay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event "canplay")|The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.|
|[`canplaythrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event "canplaythrough")|The browser estimates it can play the media up to its end without stopping for content buffering.|
|[`complete`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/complete_event "complete")|The rendering of an [`OfflineAudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) is terminated.|
|[`durationchange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event "durationchange")|The `duration` attribute has been updated.|
|[`emptied`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event "emptied")|The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the [`load()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load) method is called to reload it.|
|[`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event "ended")back has stopped because the end of the media was reached.|
|[`error`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event "error")|An error occurred while fetching the media data, or the type of the resource is not a supported media format.|
|[`loadeddata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event "loadeddata")|The first frame of the media has finished loading.|
|[`loadedmetadata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event "loadedmetadata")|The metadata has been loaded.|
|[`loadstart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event "loadstart")|Fired when the browser has started to load the resource.|
|[`pause`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event "pause")back has been paused.|
|[`play`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event "play")back has begun.|
|[`playing`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event "playing")back is ready to start after having been paused or delayed due to lack of data.|
|[`progress`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event "progress")|Fired periodically as the browser loads a resource.|
|[`ratechange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event "ratechange")|The playback rate has changed.|
|[`seeked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event "seeked")|A _seek_ operation completed.|
|[`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event "seeking")|A _seek_ operation began.|
|[`stalled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event "stalled")|The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.|
|[`suspend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event "suspend")|Media data loading has been suspended.|
|[`timeupdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event "timeupdate")|The time indicated by the `currentTime` attribute has been updated.|
|[`volumechange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event "volumechange")|The volume has changed.|
|[`waiting`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event "waiting")back has stopped because of a temporary lack of data.|

## \<script>
The **`<script>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The `<script>` element can also be used with other languages, such as [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)'s GLSL shader programming language and [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON).

```html
<script src="javascript.js"></script>
```

## \<input>
The **`<input>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent). The `<input>` element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

The available types are as follows:

| Type                                                                                             | Description                                                                                                                                                                                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button)                 | A push button with no default behavior displaying the value of the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) attribute, empty by default.                                                                                                                                                                           |
| [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)             | A check box allowing single values to be selected/deselected.                                                                                                                                                                                                                                                                                              |
| [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color)                   | A control for specifying a color; opening a color picker when active in supporting browsers.                                                                                                                                                                                                                                                               |
| [date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)                     | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.                                                                                                                                                                                         |
| [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.                                                                                                                                                                                         |
| [email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email)                   | A field for editing an email address. Looks like a `text` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.                                                                                                                                                                            |
| [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)                     | A control that lets the user select a file. Use the [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept) attribute to define the types of files that the control can select.                                                                                                                                                 |
| [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden)                 | A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden!                                                                                                                                                                                                                       |
| [image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image)                   | A graphical `submit` button. Displays an image defined by the `src` attribute. The [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt) attribute displays if the image [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src) is missing.                                                                   |
| [month](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month)                   | A control for entering a month and year, with no time zone.                                                                                                                                                                                                                                                                                                |
| [number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)                 | A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads.                                                                                                                                                                                                           |
| [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)             | A single-line text field whose value is obscured. Will alert user if site is not secure.                                                                                                                                                                                                                                                                   |
| [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)                   | A radio button, allowing a single value to be selected out of multiple choices with the same [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) value.                                                                                                                                                                         |
| [range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)                   | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) and [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) to define the range of acceptable values. |
| [reset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset)                   | A button that resets the contents of the form to default values. Not recommended.                                                                                                                                                                                                                                                                          |
| [search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)                 | A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.                                                                  |
| [submit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)                 | A button that submits the form.                                                                                                                                                                                                                                                                                                                            |
| [tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel)                       | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.                                                                                                                                                                                                                                               |
| [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)                     | The default value. A single-line text field. Line-breaks are automatically removed from the input value.                                                                                                                                                                                                                                                   |
| [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)                     | A control for entering a time value with no time zone.                                                                                                                                                                                                                                                                                                     |
| [url](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url)                       | A field for entering a URL. Looks like a `text` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.                                                                                                                                                                                      |
| [week](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week)                     | A control for entering a date consisting of a week-year number and a week number with no time zone.                                                                                                                                                                                                                                                        |

# Attributes
## Global Attributes
| Name      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| autofocus | The **`autofocus`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is a Boolean attribute indicating that an element should be focused on page load, or when the [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) that it is part of is displayed.                                                                                                                                                                                          |
| class     | The **`class`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the [class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) or functions like the DOM method [`document.getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName).        |
| data-*    | The **`data-*`** [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) form a class of attributes called **custom data attributes**, that allow proprietary information to be exchanged between the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and its [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) representation by scripts.                                                                                                  |
| hidden    | The **`hidden`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is an [enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated) attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.                                                                                                             |
| id        | The **`id`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a [fragment identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment)), scripting, or styling (with [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS)).                                            |
| lang      | The **`lang`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in [RFC 5646: Tags for Identifying Languages (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646).                                     |
| style     | The **`style`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) contains [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element have mainly the purpose of allowing for quick styling, for example for testing purposes. |

## Normal Attributes
| Name        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ----------- |   |
| disabled    | The Boolean **`disabled`** attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| max         | The **`max`** attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) of the element is greater than this, the element fails [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). This value must be greater than or equal to the value of the [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) attribute. If the `max` attribute is present but is not specified or is invalid, no `max` value is applied. If the `max` attribute is valid and a non-empty value is greater than the maximum allowed by the `max` attribute, constraint validation will prevent form submission. |
| maxlength   | The **`maxlength`** attribute defines the maximum [string length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) that the user can enter into an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). The attribute must have an integer value of 0 or higher.                                                                                                                                                                                                                                                                                                                                                     |
| min         | The **`min`** attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) of the element is less than this, the element fails [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). This value must be less than or equal to the value of the `max` attribute.                                                                                                                                                                                                                                                                                                                                                  |
| minlength   | The **`minlength`** attribute defines the minimum [string length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) that the user can enter into an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). The attribute must have an integer value of 0 or higher.                                                                                                                                                                                                                                                                                                                                                     |
| placeholder | The **`placeholder`** attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| readonly    | The Boolean **`readonly`** attribute, when present, makes the element not mutable, meaning the user can not edit the control.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| required    | The [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML) **`required`** attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |