HTML - Attributes

a - download : filename

download="filename"


Parameter :

filename - Optional. Specifies the new filename for the downloaded file.


Example :

<a href="download_link" download="file_name">


The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.


The optional value of the download attribute will be the new name of the file after it is downloaded. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).


If the value is omitted, the original filename is used.

a - href

<a href="URL">


Possible values for URL:


  • An absolute URL - points to another web site. (like href="http://www.example.com/default.htm")
  • A relative URL - points to a file within a web site. (like href="default.htm")
  • Link to an element with a specified id within the page - (like href="#section2")
  • Other protocols - (like https://, ftp://, mailto:, tel:, sms:, file:, etc..)
  • A script - (like href="javascript:alert('Hello');")

a - referrerpolicy : no-referrer | no-referrer-when-downgrade | origin | origin-when-cross-origin | same-origin | strict-origin-when-cross-origin | unsafe-url

The referrerpolicy attribute specifies which referrer information to send when the user clicks on the hyperlink.


Attribute Values

no-referrer

No referrer information is sent.


no-referrer-when-downgrade

Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok).


origin

Sends the origin (scheme, host, and port) of the document.


origin-when-cross-origin

Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request


same-origin

Sends a referrer for same-origin request. Sends no referrer for cross-origin request


strict-origin-when-cross-origin

Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP).


unsafe-url

Sends the origin, path, and query string (regardless of security). Use this value carefully !

a - rel : noopener | noreferrer | nofollow

This prevent the external page gaining any access to the original page and also won't pass any referrer information to the external page.


  • Willing to protect your site users from potentially malicious external links (noopener)
  • Unwilling to appear in a website’s analytics data as Referred traffic (noreferrer)
  • Unwilling to endorse the content or creator you’re linking to (nofollow)

accesskey

The accesskey attribute specifies a shortcut key to activate/focus an element.


Note: The way of accessing the shortcut key is varying in different browsers: 


Internet Explorer

Windows - [Alt] + accesskey


Chrome

Windows - [Alt] + accesskey
Linux - [Alt] + accesskey
Mac - [Control] [Alt] + accesskey


Firefox

Windows - [Alt] [Shift] + accesskey
Linux - [Alt] [Shift] + accesskey
Mac - [Control] [Alt] + accesskey


Safari

Windows - [Alt] + accesskey
Mac - [Control] [Alt] + accesskey


Opera

Windows
- Opera 15 or newer: [Alt] + accesskey
- Opera 12.1 or older: [Shift] [Esc] + accesskey


However, in most browsers the shortcut can be set to another combination of keys.


Tip: The behavior if more than one element has the same access key differs:


  • IE, Firefox: The next element with the pressed access key will be activated
  • Chrome, Safari: The last element with the pressed access key will be activated
  • Opera: The first element with the pressed access key will be activated

contenteditable : true | false

This attribute specifies whether the content of an element is editable or not.

fetchpriority : high | low | auto

fetchpriority="high | low | auto"


Parameter :

high - Fetch the resource at a high priority relative to other resources.
low - Fetch the resource at a low priority relative to other resources.
auto - Default mode, which indicates no preference for the fetch priority. The browser decides what is best for the user.


Example :

<link rel="stylesheet" href="style.css" fetchpriority="high">
<img src="logo.png" alt="Logo" fetchpriority="high">
<script src="analytics.js" fetchpriority="low"></script>


This attribute allows you to signal to the browser the relative priority of a resource fetch compared to other resources. This can be useful when you want to indicate which resources are more or less important for the user experience.

Form Events

  1. onreset - Resets a form.
  2. onsubmit - Submits a form.

hidden

The hidden attribute is a boolean attribute.


When present, it specifies that an element is not yet, or is no longer, relevant.


Browsers should not display elements that have the hidden attribute specified.


The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the hidden attribute, and make the element visible.

http-equiv : content-security-policy | content-type | default-style | refresh

This attribute provides an HTTP header for the information/value of the content attribute.

Input - accept : file_extension | audio/* | video/* | image/* | media_type

accept = " file_extension | audio/* | video/* | image/* | media_type "


Parameters :

file_extension - Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from
audio/* - The user can pick all sound files
video/* - The user can pick all video files
image/* - The user can pick all image files
media_type - A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types


Example :

<input type="file" id="img" name="img" accept="image/*">


The accept attribute specifies a filter for what file types the user can pick from the file input dialog box.


Note: The accept attribute can only be used with <input type="file">.


Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.

Input - multiple

<input multiple>


Example :

<input type="file" id="files" name="files" multiple>


The multiple attribute is a Boolean attribute.


When present, it specifies that the user is allowed to enter more than one value in the <input> element.


Note: The multiple attribute works with the following input types: email, and file.


Tip: For <input type="file">: To select multiple files, hold down the CTRL or SHIFT key while selecting.


Tip: For <input type="email">: Separate each email with a comma, like: mail@example.com, mail2@example.com, mail3@example.com in the email field.