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 simmanchithThe 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.
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
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
Related Links
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
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> 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
Related Links
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.
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> 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'> <p title="Rock 'Sniper' Tripleh">