HTML Attributes -Quipoin

Attributes

HTML attributes provide extra information about elements, or In HTML, attributes are used to define the properties or behavior of an element. They add more details and control how elements behave or appear. As they can define a link's destination, set an image's size or apply inline styles.
An attributes always

Appears inside the opening tag.

Uses the format name="value".

Example:

<img  src="image.jpg"  alt="Random Image">

Src this tells the browser where the image is located.

alt gives alternative text if the image does not load.

Commonly Used HTML Attributes

href Attribute

The href attributes is used in anchor tag (<a>) to define the destination of a hyperlink.

Example:

<a href="https://www.google.com"> Google </a>

Output:

A clickable link with name Google will appear on the page that redirects to google after clicking on it.

src Attribute

The src attribute is used in the <img> tag to define the image source.

Example:

<img  src="https://quipoin.com/assests/img/logo.png">

Output:

width and height Attribute

The width and height attribute are used to adjust the size of the image under the <img > tag.

Example:

<img  src="https://quipoin.com/assets/img/logo/png"  height="100px"  width="100px">

Output:

Alt Attribute

The alt attribute defines alternative text for an image displayed, if the image fails to load.

Example:

<img  src="https://quipoin.com/assets/img/logo.png"  alt="Logo" height="100px" width="100px">

Output:

Style Attribute

The style attribute adds inline CSS style to the element, such as color or background-color etc.

Example:

<p Style="Color:blue;">This is a paragraph in blue color</p>

Output:

lang Attribute

The lang attribute is used to declare the language of the web pages. It is declared inside the <html> tag.

Example:

<!DOCTYPE html>
<html lang="en">

<body>
</body>

</html>

title Attribute

The title attribute is used to declare extra information as a tooltip when you hover over an element.

Example:

<p title="paragraph">This is a paragraph</p>

Output:

When you hover over the paragraph you will see a tooltip saying 'paragraph'.

Note

Attributes are not case-sensitive, but it is a good practice to write them in lowercase.
Always enclose attributes values in quotes, preferably double quotes (name="value").