HTML Attribute

In this HTML tutorial, you will learn all about the Attributes in HTML. We will also discuss the most commonly used attributes in HTML.

What all are the HTML Attributes? 

Attributes define extra features or properties of an element, such as an image's width and height. Attributes are always supplied in the start tag (or opening tag) and are often composed of name/value pairs such as name="value." Attribute values must always be surrounded by quotation marks.

  • HTML attributes are special words that convey more information about elements, or attributes are the HTML element's modifier.
  • Each element or tag can have characteristics that specify how that element behaves.
  • Attributes should always be used in combination with the start tag.
  • The Attribute should always be used in association with its name and value combination.
  • The names and values of the attributes are case sensitive, and the W3C recommends that they be expressed in lowercase only.
  • Multiple attributes can be added to a single HTML element, but there must be a space between them.

Syntax


<element attribute_name="value">content</element>
 

Example


<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <h1>This is Style attribute</h1> 
    <p style  = " height: 50px; color: blue " > It will add style property in element</p> 
    <p style  = " color: red " > It will change the color of content</p> 
</body> 
</html> 

 
HTML - Introduction

Most commonly used attributes in HTML

  • href Attribute

    A hyperlink is defined using the <a> tag. The href property defines the URL of the page to which the link leads when the tag's content is clicked.

    
    <a href=”url of target”> content<a>
  • src Attribute

    To embed an image in an HTML page, use the <img> element. The src attribute specifies the location of the picture that will be displayed.

    
    <img src=”source”>
  • width and height Attributes 

    The width and height properties, which specify the width and height of the picture or others, should also be included in the tags.

    
    <img src=”source” width=”size” height=”size”> 
  • style Attribute 

    The style property is used to apply styles to an element, such as color, font, size, and other options.

    
     <p  red”>Sample text</p>
    
  • id Attribute 

    The id property is used to provide an element within a document with a unique name or identity. This makes selecting the element using CSS or JavaScript easy.

    
    <p id="infoText">This is a paragraph.</p>
    
  • class Attribute 

    The class attribute is used to identify items in the same way as the id attribute is. However, unlike id, the class property does not have to be unique inside the document. This means that you may apply the same class to numerous components in a document.

    
    <p class="infoText">This is a paragraph.</p>
    
  • title Attribute 

    The title property is used to offer descriptive text about an element or its contents.

    
    <abbr title="World Wide Web Consortium">W3C</abbr
    

What is meant by Global Attributes?

HTML global attributes are those that are shared by all HTML elements. Both standard and non-standard elements support global characteristics. The global characteristics can be applied to all components; however, they may have no effect on some of them.

What are all the HTML Event Attributes?

An event occurs when a browser reacts to user activity. For example, if you click the submit button, the browser will display an information box. There are several event characteristics available in HTML5 that may be activated using a computer language such as JavaScript.

Windows Event Attributes

Windows events are associated with the window object and may only be used with the <body> tag. The commonly used windows events are:

  • onafterprint – It will only execute the script after the document is printed.
  • onbeforeprint – It will only execute the script before the document is printed.
  • onbeforeunload – It will only execute the script before a document is unloaded.
  • onerror – It will only execute the script when an error occurs.
  • onhashchange – It will only execute the script when the anchor part in the URL of the webpage is changed.
  • onload – It will only execute the script when the webpage is entirely loaded.
  • onmessage – It will only execute the script when a message event occurs.
  • onoffline – It will only execute the script when the network connection is disconnected, and the browser starts working offline.
  • ononline – It will be only executed the script when the browser started working online
  • onpagehide – It will only execute the script when the current webpage is hidden such as if the user has moved away from the current webpage.
  • onpageshow – It will only execute the script when the current webpage is focused.
  • onpopstate – It will only execute the script when the window's active history is changed.
  • onresize – It will only execute the script when the window is resized.
  • onstorage – It will only execute the script when web storage is updated.
  • onunload – It will only execute the script when the current webpage is unloaded, or the window is closed.

Form Event Attributes

When a user makes an action within the form, such as submitting the form or choosing an input field, a form event happens. Form events may be used with any element, although they are most commonly associated with HTML form elements.

  • onblur : It will only execute the script when the form element loses the focus.
  • onchange : It will only execute the script when the value of the element is changed.
  • onfocus :It will only be triggering an event when the element gets focused.
  • oninput :It will only execute the script when the user enters input to the element.
  • oninvalid :It will only execute the script when the element does not satisfy its predefined constraints.
  • onreset :It will only be triggering the event when the user resets the form element values.
  • onsearch :It will only be triggering the event when a search field receives some input.
  • onselect :It will only be triggering the event when the user has selected some text.
  • onsubmit :It will only be triggering the event when a form is submitted.

Keyboard Event Attributes

When a user interacts with the keyboard, a keyboard event happens.

  • onkeydown :It will only be triggering the event when the user presses down a key on the keyboard.
  • onkeypress :It will only be triggering the event when the user presses the key which displays some character.
  • onkeyup :It will only be triggering the event when the user releases the currently pressed key.

Mouse Event Attributes

  • onclick :It will only be triggering the event when the mouse clicks on the element.
  • ondblclick : It will only be triggering the event when a mouse double-click occurs on the element.
  • onmousedown : It will only be triggering the event when the mouse button is pressed on the element.
  • onmousemove: It will only be triggering the event when the mouse pointer moves over the element.
  • onmouseout :It will only be triggering the event when the mouse moves outside the element.
  • onmouseover :It will only be triggering the event when the mouse moves onto the element.
  • onmouseup :It will only be triggering the event when the mouse button is released.
  • onwheel :It will only be triggering the event when the mouse wheel rolls up or down on the element

Clipboard Event Attributes

  • oncopy :It will only be triggering the event when the user copies the content to the system clipboard.
  • oncut :It will only be triggering the event when the content of an element is cut and copied to the clipboard.
  • onpaste :It will only be triggering the event when the user pastes some content in an element.