HTML Attributes

 HTML elements can be modified by attributes. Attributes are placed within the opening tag in an element. Many elements support specialized attributes, and there are also a few global elements that can be used with any tag.



👉ID Attribute

The ID attribute is used to specify and identifier that uniquely identifies that element on the page. This identifiers are used with  JavaScript and CSS (Cascading Style Sheet), as you'll learn letter lessons. Here's what a tag with an attribute looks like: 

<h1 id = "theTopHeading"> Hello World!!! </h1>

👉CLASS Attribute

The CLASS attribute is another global attribute that can be used to establish arbitrary groups of elements. You can assign the same class to multiple elements so that they can be referenced as a group of via CSS and JavaScript. As you can see, the attribute is placed within the opening tag, to the right of the tag name. You can also include multiple attributes in a single tag, as follows:

<h1 id = "theTopHeading" class = "first"> Hello World!!! </h1>

Basic concept of Attributes

  • Attributes are the properties of tag which is use to add some additional information of tag content. 
  • For example, <body> tag has attributes such as text, bgcolor and background etc.
  • <body bgcolor = red text = white> </body>
  • Each tag has its own special attributes.
  • Not every tag has attributes.
  • Attributes only added to starting tag.
  • Set properties of an element.
  • Have name and value.

Example

Access Key👇

  • align
  • background
  • bgcolor
  • class
  • height
  • contenteditable
  • hidden
  • contextmenu
  • data.xxx
  • draggable
  • id
  • item
  • itemprop
  • spellcheck
  • style
  • subject
  • tabindex
  • title
  • valign 
  • width

 NOTES....

1. Custom Attributes

New features of HTML5

Start with data and would be named based on requirement 

<li data type = "text" data location = "India" data-identifier = "400708"> HTML </li>  

2. Autofocus

Used in input and textarea elements to set focus on a form field.

 <input type = "text" name = "textusername" autofocus />

3. Required

When required attribute used, no need to has JavaScript for client-side validation.

<input type = "text" name = "textusername" required />
Previous Post Next Post