HTML Attributes

HTML attributes provide you more information about the HTML components.

HTML Attributes

All HTML elements can have their characteristics
Attributes provide information about elements that are not provided by the element itself.
In the beginning, tag attributes are always given
In name and value pairs attributes generally appear as name="value"

It is used for html attributes list and tags with examples, attributes to define inline styles, what is attributes reference, what are core html attributes, and arir attributes, what is meant by html attributes.

The href Attribute

A hyperlink is defined using the a tag. The href element gives the URL of the page to which the link leads:

Example

<a href="https://www.simmanchith.com">Visit simmanchith</a>

Result of the above query

Visit simmanchith

It is used for html href attribute target and value, button href, data and class attribute, href title attribute, href download and disabled attribute, html link, link download, link target, link attribute do in html.

The src Attribute

An image is embedded in an HTML page using the img tag. The path of the picture to be shown is set in the src attribute:

Example

<img src="html-resources/img-computer.jpg">

Result of the above query

The src property may be used in two ways to indicate the URL:

1. Absolute URL- A link with complete URL from a same website or different website.

Example: src="https://www.simmanchith.com/tutorial/html/html-resources/img-computer.jpg".

Notes: Copyright may be used for external images. You may be in violation of copyright laws if you do not receive permission to use it. Furthermore, external pictures cannot be controlled; they might be withdrawn or modified quickly.

2. Relative URL - Points to an image housed on the same server as the webpage. The domain name is not included in this URL. The URL will be relative to the current page if it does not begin with a slash.

Example: src="html-resources/img-computer.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/html-resources/img-computer.jpg".

Tip: Relative URLs are usually the best option. If you change your domain, you won't break.

It is used for html src attribute tags and img, data-src, svg src attribute, and src alt attribute, div src, iframe src attribute, and input src attribute.

The width and height Attributes

The width and height properties, which specify the width and height of the image (in pixels), should also be included in the img tag:

Example

<img src="html-resources/img-computer.jpg" width="250" height="200">

Result of the above query

It is used for html table width and height attributes, html div width height attributes, using the width and height attributes in html, the width and height attribute for tag values are given with.

The alt Attribute

If an image cannot be shown for whatever reason, the mandatory alt property for the img element gives an alternate text for the picture. This might be due to a sluggish connection, an src attribute problem, or the user using a screen reader.

Example

<img src="html-resources/img-computer.jpg" alt="A computer on a table">

Result of the above query

Example

See what happens if a picture that does not exist is displayed:

<img src="html-resources/img_computer2.jpg" alt="A computer on a table">

Result of the above query

It is used for html alt attribute img, and div, alt attribute link, html alt attribute video, and anchor, alt input, and empty, alt attribute limit, and line, check alt attribute html.

The style Attribute

Color, typeface, size, and other styles may be applied to an element using the style property.

Example

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

Result of the above query

This is a blue paragraph.

It is used for html style attribute list, syntax, example, and background image, style attribute hover, and bold, style attribute important, and add, button style attributes, and style guide.

The lang Attribute

To define the language of the Web page, always use the lang attribute inside the html tag. This is for the benefit of search engines and web browsers.

The following example specifies English as the language:

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

Country codes in the lang property may also be appended to the language code. The first two letters, therefore, determine the HTML page language and the following two characters describe the nation.

The following example identifies the language as English and the nation as the United States:

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

It is used for html lang attribute values, lang attribute invalid, and missing, multiple languages.

The title Attribute

The attribute title defines additional details on an item.

When you hover your cursor over an element, the value of the title property will appear as a tooltip:

Example

<p title="A simple paragraph">This is a paragraph.</p>

Result of the above query

This is a paragraph.

We Suggest: Always Use Lowercase Attributes

No lower case attribute names are required for the HTML standard.

The title element (and all other attributes) can be expressed in capital letters or lowercase letters, such as title or TITLE.

Lowercase characteristics are recommended in HTML and require smaller attributes for more stringent forms of documents such as XHTML.

It is used for lowercase html attribute values, and data lowercase.

We Suggest: Always Quote Attribute Values

Quotes surrounding attribute values are not required per the HTML specification.

However, supports quotes in HTML and requires them in tougher document formats like XHTML.

Good:

<a href="https://www.simmanchith.com/html/">Visit our HTML tutorial</a>

Bad:

<a href=https://www.simmanchith.com/html/>Visit our HTML tutorial</a>

You may need to utilize quotation marks on occasion. Because there is a space in this example, the title property will not be shown correctly:

Example

<p title=About simmanchith>

It is used for html attribute quote escape, and marks, html attribute quote single, and double, html alt quote.

Single or Double Quotes?

In HTML, double quotes are most commonly used around attribute values, however, single quotes can also be used.

When the property value itself contains double quotations, it is important to use single quotations in several cases:

<p title='Rock "Sniper" Tripleh'>

Or vice versa:

<p title="Rock 'Sniper' Tripleh">