HTML5 - Attributes
What are the HTML5 attributes?
Some HTML5 attributes are globally defined and they can be made use of with any element but others are specially defined for specific elements only. All attributes always posses a name and a value and they look like the example below:
<div class = "example">...</div>
Attributes can only be specified mainly within starting tags and must never be used in end tags.
All HTML5 attributes are case insensitive and can be written in all uppercase or mixed case, but it's a best practice to just use lowercase for better readability
Standard Attributes
The following are standard attributes supported by HTML5.
| Attribute | Options | Function |
|---|---|---|
| accesskey | User-Defined | This Specifies a keyboard shortcut to access an element. |
| align | right, left, center | This helps to horizontally align tags |
| background | URL | This Places a background image behind an element |
| bg color | numeric, hexadecimal, RGB values | This Places a background color behind an element |
| class | User-Defined | This helps to Classify an element for use with Cascading Style Sheets. |
| contenteditable | true, false | This helps to Specify if the user can edit the element's content or not. |
| context menu | Menu id | This helps to Specify the context menu for an element. |
| data-XXXX | User-Defined | This is a custom attribute. Web Developers can define their own attributes. Must start with "data-". |
| draggable | true, false, auto | This helps to specify whether or not a user is allowed to drag an element. |
| height | Numeric Value | This helps to specify the height of tables, images, or table cells. |
| hidden | hidden | This helps to specify whether the element should be visible or not. |
| id | User-Defined | This helps in naming an element for use with Cascading Style Sheets. |
| item | List of elements | This is used to group elements. |
| itemprop | List of items | This is used to group items. |
| spellcheck | true, false | This helps to specify if the element must have it's spelling or grammar checked. |
| style | CSS Style sheet | This helps to specify an inline style for an element. |
| subject | User define id | This helps to specify the element's corresponding item. |
| tab index | Tab number | This helps to specify the tab order of an element. |
| title | User-Defined | This provides the "Pop-up" title for your elements. |
| valign | top, middle, bottom | This helps to vertically align tags within an HTML element. |
| width | Numeric Value | This is to help to specify the width of tables, images, or table cells. |
Custom Attributes
This is a very new feature that is being introduced in HTML 5 is the introduction of custom data attributes.
A custom data attribute always begins with data- and will be named according to how you prefer.
Below is a simple example showing an example of custom attributes:
<div class = "example" data-subject = "physics" data-level = "complex"> ... </div>
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
