Description:
HTML attributes are additional parts of HTML tags. HTML attributes provide
additional information about HTML elements. Learning HTML attributes is very
important. The first part of HTML tags uses attributes as we know that almost
all HTML tags have two parts, the first one is called the starting tag and the
second is called the closing tag. Go to to learn about basic of HTML.
The Table of content is given below
Headlines.
This article is almost final in our HTML course. Before we read
all about HTML,
all the basic tags of HTML,
the main tags of HTML,
the main elements of HTML (special tags)
and now we will learn the attributes of HTML. To make it easier to learn
and understand, we are dividing HTML attributes into four groups according to
their use, such as Identifier attributes, styling attributes, functional
attributes and Helping attributes.
Explain in Details.
Attributes also have two parts, the first is defined as a name and the second
as a value and is associated with an equal sign "=" like
name="value"
. A tag can have more than 1 attribute and an attribute can have more than 1
value. We cannot use numeric or special characters except the hyphen symbol
(-) or space in the attribute name while space can be left between attribute
values. If there is a space between attribute values, they will be two values
of the attribute such as
class="black bold"
whereas if we combine black and bold with hyphen symbol (-) it will be
the single value as
class="black-bold"
. HTML does not need to use attribute names in lowercase or uppercase letters
but we recommend using lower case because it is compatible with XML.
- Identifier Attributes.
Identifier Attributes used for identify any tag. The identifier
usually has three attributes such as
id, class and name attribution. The name attribute is used with input tags while the
id and class attribution can be used with any tag. id and
class are mostly used for attaching an element to CSS and JavaScript. In the
future, we will learn about CSS and JavaScript, how to use them and how to
integrate them with HTML.
- Explain id & class in Detail.
If you want to get detailed information of ID and class, only a little attention is required.
Let's take the example of a school. So in a school we divide students into different groups.
So why do we do it? So that we can identify them according to their educational level. This system is called class. This shows that when we want to separate objects with the same value, we create classes of them. So when we want to give same style to multiple elements in documents we use class. A class is specified with a dot, similar to .classname in CSS. For example I've 5 html button. I want three buttons text color red and two button background cyne. In this case we need inly two CSS classes with required properties then we attach those classes with targeted elements. If you dont know about css then go to What is HTML, CSS & JS (JavaScript). Main Difference between HTML, CSS & JS (JavaScript)? this post.
<style>.color-red{color: red;};.bg-cyan{background: cyan;};</style><Button class="color-red">Button 01</Button>
<Button class="color-red">Button 02</Button>
<Button class="color-red">Button 03</Button>
<Button class="bg-cyan">Button 04</Button>
<Button class="bg-cyan">Button 05</Button>
You can use any class name as you want. You can also use more than one class for same element.
<style>.ex-red{ color: red; }.ex-bg{ background: black; }.ex-shadow{ box-shadow: 1px 1px 3px cyan; }</style><div class="ex-red ex-bg ex-shadow">Example</div>
Example
When we want to identify students individually in a school, we use a specific roll number for each student which is actually the student's identity. According to ID rules we cannot use same ID for more than one person in a field and cannot use multiple IDs for same person. So an id is a very clean identification of an element in a document. We identify an id in CSS with # like #anyid.
- Styling Attributes.
There are some styling attributes exist but the global styling attribute is
"style" where you can directly attach CSS. Go to to learn basic of CSS. Example of styling attribute is style="color: red;" .
<span style="color: red;">Assalam-o-Alaikum World!</span>
Assalam-o-Alaikum World!
Other styling attributes are width and height. Their values can be define as percent: from 100 like 85%, cm: centimeters, mm: millimeters, in: inches (1in = 96px = 2.54cm), px: pixels (1px = 1/96th of 1in), pt: points (1pt = 1/72 of 1in) and pc: picas (1pc = 12 pt).
Recommend:
<img alt="img tag" src="https://i.ibb.co/zrkCkWX/ftr.jpg" height="auto" width="100%"/>
- Functional Attributes.
Functional attributes are used to attach instant or short-term JavaScript to
the HTML tag. We will learn JavaScript in detail in the future. Functional
attributes are also called HTML event and event handler attributes.
The following is an example of Functional attribute. When you click ("onclick"
triger is a Functional attribute while "alert('Assalam-o-Alaikum World!');" is JavaScript function.)
<button onclick="alert('Assalam-o-Alaikum World!');">Tryit!</button>
Below is the almost whole list of Functional attributes.
Window Event Attributes
Window Events triggered for a window object and apply in <body> tag
| Attributes | Value | Description | In HTML5? |
|---|---|---|---|
| onafterprint | js_script | Script is run after the document is printed | NEW |
| onbeforeprint | js_script | Script is run before the document is printed | NEW |
| onbeforeunload | js_script | Script is run before the document is unloaded | NEW |
| onerror | js_script | Script is run when any error occur | NEW |
| onhaschange | js_script | Script is run when document has changed | NEW |
| onload | js_script | Event fires after the page loading finished | |
| onmessage | js_script | Script is run when document goes in offline | NEW |
| onoffline | js_script | Script is run when document comes in online | NEW |
| onpagehide | js_script | Script is run when document window is hidden | NEW |
| onpageshow | js_script | Script is run when document window become visible | NEW |
| onpopstate | js_script | Script is run when document window history changes | NEW |
| onredo | js_script | Script is run when document perform redo | NEW |
| onresize | js_script | Event fires when browser window is resized | NEW |
| onstorage | js_script | Script is run when web storage area is updated | NEW |
| onundo | js_script | Script is run when document performs undo | NEW |
| onunload | js_script | Event fires when browser window has been closed |
Form Events
Form Events triggered by perform some action inside HTML form elements.
| Attributes | Value | Description | In HTML5? |
|---|---|---|---|
| onblur | js_script | Event fire when element loses focus | |
| onchange | js_script | Event fire when element value is changed | |
| oncontextmenu | js_script | Event fire when context menu is triggered | NEW |
| onfocus | js_script | Event fire when element gets focus | |
| onformchange | js_script | Event fire when form changes | NEW |
| onforminput | js_script | Event fire when form get input field | |
| oninput | js_script | Event fire when element get input field | NEW |
| oninvalid | js_script | Event fire when element is invalid | NEW |
| onreset | js_script | Event fire when clicked on form reset button | REMOVE |
| onselect | js_script | Event fire after allow to select text in an element | |
| onsubmit | js_script | Event fire when form is submitted |
Keyboard Events
| Attributes | Value | Description | In HTML5? |
|---|---|---|---|
| onkeydown | js_script | Event fire when pressing a key | |
| onkeypress | js_script | Event fire when press a key | |
| onkeyup | js_script | Event fire when releases a key |
Mouse Events
Mouse Events triggered by mouse action.
| Attributes | Value | Description | In HTML5? |
|---|---|---|---|
| onclick | js_script | Event fire when mouse click on element | |
| ondblclick | js_script | Event fire when mouse double click on element | |
| ondrag | js_script | Script is run when element is dragged | NEW |
| ondragend | js_script | Script is run at end of drag operation | NEW |
| ondragenter | js_script | Script is run when element has dragged to a valid drop target | NEW |
| ondragleave | js_script | Script is run when element leaves valid drop target | NEW |
| ondragover | js_script | Script is run when element is dragged over on valid drop target | NEW |
| ondragstart | js_script | Script is run at start of drag operation | NEW |
| ondrop | js_script | Script is run when dragged element is dropped | NEW |
| onmousedown | js_script | Event fire when mouse button is pressed down on element | |
| onmousemove | js_script | Event fire when mouse pointer moves over an element | |
| onmouseout | js_script | Event fire when mouse pointer moves out an element | |
| onmouseover | js_script | Event fire when mouse pointer moves over on element | |
| onmouseup | js_script | Event fire when mouse button is released over an element | |
| onmousewheel | js_script | Event fire when mouse wheel being rotated | NEW |
| onscroll | js_script | Event fire when element scrollbar being scrolled | NEW |
Media Events
Media Events triggered by common media elements like <img>, <audio>, <embed>, <object>, and <video>.
| Attributes | Value | Description | In HTML5? |
|---|---|---|---|
| onabort | js_script | Script is run when element is abort | |
| oncanplay | js_script | Script is run when file is ready for start playing | NEW |
| oncanplaythrough | js_script | Script is run when file is played all way without pausing for buffering | NEW |
| ondurationchange | js_script | Script is run when media length changes | NEW |
| onemptied | js_script | Script is run when something unavailable/disconnects | NEW |
| onended | js_script | Script is run when media has reach to end position | NEW |
| onerror | js_script | Script is run when error occurs file loaded time | NEW |
| onloadeddata | js_script | Script is run when media is loaded | NEW |
| onloadedmetadata | js_script | Script is run when meta data are loaded | NEW |
| onloadstart | js_script | Script is run when file being loaded | NEW |
| onpause | js_script | Script is run when media is paused | NEW |
| onplay | js_script | Script is run when media is ready to start playing | NEW |
| onplaying | js_script | Script is run when media is actually start for playing | NEW |
| onprogress | js_script | Script is run when browser is process of getting media data | NEW |
| onratechange | js_script | Script is run when playback rate changes | NEW |
| onreadystatechange | js_script | Script is run when ready state changes for each time | NEW |
| onseeked | js_script | Script is run when seeking attribute value set to false, that indicate seeking has ended | NEW |
| onseeking | js_script | Script is run when seeking attribute value set to true, that indicate seeking has active | NEW |
| onstalled | js_script | Script is run when browser is unable to fetch media data for any reason | NEW |
| onsuspend | js_script | Script is run when fetching media data is stopped before it is completely loaded for any reason | NEW |
| ontimeupdate | js_script | Script is run when playing position has changed | NEW |
| onvolumechange | js_script | Script is run each time volume is changed | NEW |
| onwaiting | js_script | Script is run when media has paused(for buffer more data) | NEW |
- Helping Attributes.
The Helping Attributes are used to make an element more describable or
storing strings as a backup in a tag. Go to Data Types in coding to learn about string and related coding data types and names.
Helping Attributes can be built-in like title="value" and custom like data
storing Attributes. Data store attributes are custom attributes that anyone
can create. An example of a data store attribute is data-url="https://mrdl.orgfree.com" . Hover on Tryit! button and Then their will be a title display as pop.
<button title="Click for Test" onclick="alert('Assalam-o-Alaikum World!');">Tryit!</button>
The other list of Helping Attributes is given below:
accesskey:
is used to access keyboard shortcuts, but it may Varey in different browser.
in case of chrome browser accesskey are used to click an anchor tag,
active/focus any tag.
<style> customtag1 textarea { width: -webkit-fill-available; height: max-content; } customtag1 textarea:focus { color: red; } customtag1 a:active { color: yellow; background: black; } </style> <customtag1> <textarea accesskey="t">Press Alt + t to focus me</textarea> <br><!--Press Alt + a to open link--> <a href="https://mrdl.orgfree.com" accesskey="a">Mr. Downloader</a> </customtag1>
href:
is used for anchor <a> and link <link> tag to specify another
location or attaching file.
contenteditable:
used to specify whether the text of the tag is editable or not. The two values
of this attribute are true and
false. The
true value is the default value which
means that if you only add contenteditable the content will be editable
as contenteditable="true"
while
contenteditable="false"
specified that the content is not editable.
<span contenteditable>This is Edit able as it is default of contenteditable</span> <br> <span contenteditable="true">This is Edit able as it is true value of contenteditable</span> <br> <span contenteditable="false">This is Edit able as it is false value of contenteditable</span>
This is Editable as it is default of contenteditable
This is Editable as it is true value of contenteditable
This is not Editable as it is false value of contenteditable
This is Editable as it is true value of contenteditable
This is not Editable as it is false value of contenteditable
dir:
Used to determine the direction of the element content. It has three values
like ltr which means left to right, rtl which means right to left and auto
which is the default.
Left to right:<p dir="ltr">12345</p><br>Right to left:<p dir="rtl">12345</p>
Left to right:
Right to left:
12345
Right to left:
12345
draggable:
an enumerated attribute indicating whether the element can be dragged, using
the Drag and Drop API. It can have the following values:
true, which indicates that the element may be dragged.
false, which indicates that the element may not be dragged.
dropzone: an enumerated attribute indicating what types of content can be dropped on
an element, using the Drag and Drop API. It can have the following values:
copy, which indicates that dropping will create a copy of the element that
was dragged.
move, which indicates that the element that was dragged will be moved to
this new location.
link, will create a link to the dragged data.
part: part attribute consists of a list separated by the space of the name of
the part of the element. Part names allow CSS to select and style specific
elements in the shadow tray via :: part pseudo-element. It's like a class
attribute.
ping: The ping attribution provides a list of URLs to be notified if the user
follows the hyperlink. When the user clicks on the hyperlink, the ping attribute
will send a short HTTP POST request to the specified URL.
This attribute is useful for monitoring / tracking. One or more valid
URLs should be separated from the list by space.
rel: The rel attribute is used to describe the relationship of an object to a
document. For example, when we want to attach a CSS file or a favicon to a web
document, we use the rel attribute. This is only used with href
attribute. It is used only with the href attribute. For Example:
<link rel="icon" type="image/x-icon"
href="/images/favicon.ico">
or <a rel="nofollow" href="http://mrdl.orgfree.com/">Mr.
Downloader</a>
.
spellcheck: The spellcheck attribute explains whether the element can be checked
for spelling errors. It may have the following values:
true, which indicates that the element should, if possible, be checked for
spelling mistakes.
Wrong, which indicates that the element should not be checked for spelling
mistakes.
target: Specifies where to display the linked URL. This is a name, or keyword,
for browsing context: a tab, window, or
<iframe>
. The following keywords have special meanings:
_self: Load the URL in the same browsing context as it is now. This is the default
behavior.
_blank: Load the URL into a new browsing context. This is usually a tab, but users
can configure the browser to use the new Windows instead.
_parent: Load the URL in the current parent browsing context. It behaves as if it
were not a parent.
_top: Load the URL in the advanced browsing context (ie "top" browsing context
which is the current ancestor, and has no parent). It behaves as if it were
not a parent.
title: The title attribute specifies additional information about an element.
Information is often displayed as tooltip text when the mouse moves over the
element.
<!-- Below code is an example of an anchor tag, title attribute, target attribute and href attribute--><a title="Go to Downloader" href="http://mrdl.orgfree.com/" target="_blank">Mr. Downloader</a>
translate: translate attribution which is used to indicate whether the attribute
values of an element and the values of its text node children are to be
translated when the page is localized, or left unchanged. It may contain the
following values:
Empty string or
yes, indicating that the element will be translated.
No, that indicates that the element will not be translated.
type: type attribute is used to identify the type of element. It is only used
with button tags, input tags and tags that are used to link external sources
to the current document.
<input type="date"> <input type="range"><button type="button">Button</button><link rel="stylesheet" type="text/css" href="example.css"><script type="text/javascript">document.write("Hello JavaScript!");</script><embed type="image/jpg" src="https://i.ibb.co/zrkCkWX/ftr.jpg" height="auto" width="100%"/>
Final Lines.
If you are here, it means that you have learned a lot about html, because here our HTML is almost complete. Something may be missing, but it is almost done. We will learn the next developing HTML after CSS and JavaScript courses such as creating a clean web theme, creating tables and some other long topics like iframe etc.
And for regular web developing it is necessary to know CSS while JavaScript is recommended for web functionality.
««« Thanks again for reading our blog. If you have any questions, feel
free to ask. Your support is enough for us to share this post with your
friends. And a good comment for our hard work. »»»
Thank you ツ
3 Comments