HTML Attribute

HTML Attribute

HTML Attribute

Here are some commonly used HTML attributes and their uses:

Attributes Description
  alt   This attribute is used in the <img> tag. If the image does not appear, the text of this attribute is displayed in the browser as an alternative.
  charset   This attribute is used in the <meta> tag. That is, it is used to determine the character encoding.
  disabled   This attribute is used in the <input> tag. That is, this attribute is used to disable a certain input element.
  href   This attribute is used in the <a> tag. That is, it is used to set the URL of a link.
  lang   Contains information about the language of the document.
  id   Sets a unique name for an element.
  src   Sets the source of an image or script.
  style   It is used to style an element online.
  title   It is used to attach additional information about an element. The content of the title attribute is displayed as a tooltip with the mouse over the title element.

Visit the HTML Attributes Reference page to see a list of all attributes of HTML elements and their usage.

alt attribute:

If the image does not appear, the alt attribute is used to set a text as an alternative to the image.

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>HTML alt attribute</title>
  5. </head>
  6. <body>
  7.   <img src="onlylearn24.png" alt="onlylearn24.com" width="140" height="140">
  8. </body>
  9. </html>

Output:

 

onlylearn24.com

 

charset attribute:

The charset attribute is used in the <meta> tag to determine the character encoding of the document.

Charset="utf-8" is used to display correctly in any language browser other than English.

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>HTML charset attribute</title>
  6. </head>
  7. <body>
  8.   <p>ইংরেজী ছাড়া অন্য যেকোনা ভাষা ব্রাউজারে সঠিকভাবে প্রদর্শন করানোর
  9.    জন্য charset="utf-8" ব্যবহার করা হয়।</p>
  10. </body>
  11. </html>

 

Output: 

 

ইংরেজী ছাড়া অন্য যেকোনা ভাষা ব্রাউজারে সঠিকভাবে প্রদর্শন করানোর
   জন্য charset="utf-8" ব্যবহার করা হয়।

 

 

href attribute:

The URLs in the HTML <a>, <area>, <base>, <link> tags are set by the href attribute.

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>HTML href attribute</title>
  5. </head>
  6. <body>
  7.   <a href="https://onlylearn24.com/">This is a link</a>
  8. </body>
  9. </html>

 

Output:

 

lang attribute:

The lang attribute is used in the <html> tag to set the language of the document.

Example:

  1. <!DOCTYPE html>
  2. <html lang="bn">
  3. <head>
  4.   <title>HTML lang attribute</title>
  5. </head>
  6. <body>
  7.   <p>Lang attribute in the <html> tag to set the language of the document
  8.     Is used.</p>
  9. </body>
  10. </html>

 

src attribute:

The src attribute is used to add source files for HTML <img> and <script> tags.

Example

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>HTML src attribute</title>
  5. </head>
  6. <body>
  7.   <img src="../onlylearn24.png" width="140" height="140">
  8. </body>
  9. </html>

Output:

 

title attribute:

Hovering the mouse over an element uses a title attribute to display text in tooltip format.

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>HTML title attribute</title>
  5. </head>
  6. <body>
  7.   <p title="This is a tooltip">The mouse over this paragraph is actually the title attribute
  8.    The value will appear in the form of tooltip.</p>
  9. </body>
  10. </html>


Output:

 

The mouse over this paragraph is actually the title attribute The value will appear in the form of tooltip.

 

 

Always write attributes in lower case

It is not mandatory to write the name of the attribute in lowercase in HTML (5).

The charset attribute can be written in capital letters or lowercase letters. E.g. Charset or CHARSET.

However, W3C recommends that HTML attributes are always written in lower case.

 

Use quotation marks in the value of attributes

Writing in the value quotation (" ") of the attribute in HTML (5) is not mandatory.

For example, href attributes can be written without quotations (" ") as described above:

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>HTML attribute</title>
  5. </head>
  6. <body>
  7.   <a href=https://onlylearn24.com/>This is a link</a>
  8. </body>
  9. </html>

Output:

But sometimes it is necessary to use quotations (" "). For example, in the following example, the value of the title attribute has a space, so it will not work properly.

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>HTML attribute</title>
  5. </head>
  6. <body>
  7.   <p title=only learn>If there is any space in the value of the attribute
  8.    However, you cannot omit quotations (" ").</p>
  9. </body>
  10. </html>

Output:

 

If there is any space in the value of the attribute However, you cannot omit quotations (" ").

 

 

Single (' ') or double (" ") quotations

Double (" ") quotations are commonly used to write the value of HTML attributes. However, we can also use single (' ') quotations.

However, single/double quotations are used in the value of the attribute as per the situation and as required.

<p title='"only" learn'>only learn 24</p>

Or use the opposite way.

<p title="'only' learn">only learn 24</p>

Summary of the chapter

 yes All HTML elements can have attributes.
yes the alt attribute provides the text for readers.
yes​​​​​​​ href determines the URL of the attribute link.
yes​​​​​​​ lang Sets the language of the attribute document.
yes​​​​​​​ The src attribute determines the source url.
yes​​​​​​​ The title attribute provides information in the form of a "tool-tip".

 

Thank You.........