HTML5 Tutorial
HTML5 Demo
HTML5 Tools
HTML5 Useful References
HTML5 Tag Reference
HTML5 Resources
Selected Reading
- HTML5 - Web RTC
- HTML5 - Web CORS
- HTML5 - Web Messaging
- HTML5 - IndexedDB
- HTML5 - Web Workers
- HTML5 - Drag & drop
- HTML5 - Microdata
- HTML5 - Geolocation
- HTML5 - Audio & Video
- HTML5 - Canvas
- HTML5 - WebSocket
- HTML5 - Server-Sent Events
- HTML5 - Web SQL Database
- HTML5 - Web Storage
- HTML5 - MathML
- HTML5 - SVG
- HTML5 - Web Forms 2.0
- HTML5 - Events
- HTML5 - Attributes
- HTML5 - Syntax
- HTML5 - Overview
- HTML5 - Home
HTML5 Demo
- HTML5 - Web slide Desk
- HTML5 - Web Worker
- HTML5 - Drag and Drop
- HTML5 - Geo-Location
- HTML5 - Video Players
- HTML5 - Audio Players
- HTML5 - Canvas
- HTML5 - Server Sent Events
- HTML5 - Web Storage
HTML5 Tools
- HTML5 - Color Code Builder
- HTML5 - Online Editor
- HTML5 - Validation
- HTML5 - Modernizr
- HTML5 - Validator.nu Validation
- HTML5 - QR Code
- HTML5 - Velocity Draw
- HTML5 - MathML
- HTML5 - SVG Generator
HTML5 Useful References
- HTML5 - Char Encodings
- HTML5 - Entities
- HTML5 - URL Encoding
- HTML5 - Fonts Reference
- HTML5 - Color Names
- HTML5 - Quick Guide
HTML5 Tag Reference
HTML5 Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML5 - Attributes
HTML5 - Attributes
As explained in the previous chapter, elements may contain attributes that are used to set various properties of an element.
Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look pke as shown below in the example.
Following is the example of an HTML5 attributes which illustrates how to mark up a span element with an attribute named class using a value of "example" −
<span class = "example">...</span>
Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.
Standard Attributes
The attributes psted below are supported by almost all the HTML 5 tags.
| Attribute | Options | Function |
|---|---|---|
| accesskey | User Defined | Specifies a keyboard shortcut to access an element. |
| apgn | right, left, center | Horizontally apgns tags |
| background | URL | Places an background image behind an element |
| bgcolor | numeric, hexidecimal, RGB values | Places a background color behind an element |
| class | User Defined | Classifies an element for use with Cascading Style Sheets. |
| contenteditable | true, false | Specifies if the user can edit the element s content or not. |
| contextmenu | Menu id | Specifies the context menu for an element. |
| data-XXXX | User Defined | Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-". |
| draggable | true,false, auto | Specifies whether or not a user is allowed to drag an element. |
| height | Numeric Value | Specifies the height of tables, images, or table cells. |
| hidden | hidden | Specifies whether element should be visible or not. |
| id | User Defined | Names an element for use with Cascading Style Sheets. |
| item | List of elements | Used to group elements. |
| itemprop | List of items | Used to group items. |
| spellcheck | true, false | Specifies if the element must have it s spelpng or grammar checked. |
| style | CSS Style sheet | Specifies an inpne style for an element. |
| subject | User define id | Specifies the element s corresponding item. |
| tabindex | Tab number | Specifies the tab order of an element. |
| title | User Defined | "Pop-up" title for your elements. |
| vapgn | top, middle, bottom | Vertically apgns tags within an HTML element. |
| width | Numeric Value | Specifies the width of tables, images, or table cells. |
For a complete pst of HTML5 Tags and related attributes, please check our reference to .
Custom Attributes
A new feature being introduced in HTML 5 is the addition of custom data attributes.
A custom data attribute starts with data- and would be named based on your requirement. Here is a simple example −
<span class = "example" data-subject = "physics" data-level = "complex"> ... </span>
The above code will be perfectly vapd HTML5 with two custom attributes called datasubject and data-level. You would be able to get the values of these attributes using JavaScript APIs or CSS in similar way as you get for standard attributes.
Advertisements