HTML attributes

❮ Prev

HTML attributes provide additional information about HTML elements.

  • All HTML elements can have Attributes.
  • Attributes provide additional information about the elements.
  • Attributes are always included in the Start tag.
  • Attributes usually come in pairs of name/value such as: attributename="value"

Here are some attributes, understand them:


The style attribute

The style attribute is used to add style ie. additional information to an element, such as color, font size, etc.

Example
<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

lang attribute you should always include the lang attribute within the <html> tag to declare the language of the web pages. It aims to help search engines and browsers understand the language of the page.

The following example illustrates English as a page language:

Example
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

The "href" attribute

The <a> tag defines a hyperlink. href attribute specifies the URL of the page to which the link goes:

Example
<a href="https://www.codingerweb.com">

The class attribute

The class attribute allows space to add one or more class names to an element, referring to the class in the style sheet.

The following example adds two classes using the class attribute p-urdu and text-center:

Example
<p class="p-urdu text-center">This is a paragraph.</p>

The title Attribute

The title attribute describes some additional information about an element.

When you hover the mouse over the element, the title attribute will appear as the value tooltip:

Example I
<p title="Tooltip text">This is a paragraph.</p>
Example II
<p title="This is a past tense sentence">We went to the market.</p>
Result

Hover the mouse over the following text, the tooltip will appear:

We went to the market.


The "src" attribute

One of the HTML attributes is the src attribute that is inserted within the <img> tag using the <img> tag. HTML is used to embed an image in a page. The src attribute shows the path of the displayed image:

Example
<img src="my_image.jpg">

The "width" and "height" attributes

The <img> tags also contain the width attribute and the height attribute, which define the width and height of the image in pixels:

Example
<img src="my_image.jpg" width="400" height="600">

The "alt" attribute

The alt attribute required for the <img> tag defines an alternate text for an image, if for some reason the image cannot be displayed. This could be due to an error in the behavior, or an error in the src attribute, or if the user uses a screen reader, then an alternative text appears on the screen.

Example
<img src="my_image.jpg" alt="A man on the motorcycle">

You will learn more about images in our HTML Images chapter.


Note:

Here are a few attributes to clarify HTML attributes, you will learn a lot about HTML attributes and their features in the next tutorial.

❮ Prev
Related Articles
Some Important CSS Tutorials:
  1. CSS Introduction
  2. CSS Template
  3. CSS Syntax
  4. CSS Selector
  5. CSS Selectors Group
  6. how to add css in html?
  7. CSS Cascading Order
  8. Cascading Priority Scheme
  9. CSS Specificity
Some Important HTML Tutorials:
  1. HTML Introduction
  2. HTML Templates
  3. HTML Elements
  4. HTML document
  5. HTML Editor
  6. HTML basic tags
  7. HTML Attribute
  8. HTML style Attribute
  9. width and height Attributes
Categories