Attributes in HTML are essential keywords located within the opening tag of an element to provide additional information about that specific element. CSS is necessary for controlling the behavior, appearance, and functionality of HTML elements. Each attribute follows the format name="value" and must be placed within the opening tag. Virtually every HTML element has the capability to utilize attributes for purposes such as styling, linking, adding tooltips, or embedding images and videos.
Enhancing the precision of how browsers interpret and display elements is achieved by each attribute. The W3C suggests employing lowercase letters for names and values within attributes, despite variations being permissible based on case. Multiple attributes can be included within a single tag by separating them with spaces.
Syntax
<element attribute_name="value">content</element>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property in element</p>
<p style="color: red">It will change the colour of content</p>
</body>
</html>
Output:
Explanation:
<p style="height: 50px; color: blue">It will add style property in element</p>
The preceding paragraphs have been designated with style attributes through tags. The style attribute is employed to apply CSS styles to any HTML element, enabling the paragraph to have a height of 50px and appear in a blue hue.
<p style="color: red">It will change the color of content</p>
Once more, we have included a style attribute to the paragraph in order to modify its color to red.
Note: There are some commonly used attributes are given below, and the complete list and explanation of all attributes are given in HTML attributes List.
The Title Attribute
The title attribute functions as a text tooltip in the majority of web browsers. It presents its text when a user hovers the cursor over a hyperlink or any text element. It can be applied to any text or hyperlink to provide a brief description of that specific link or text. In this instance, we will demonstrate its usage with both paragraph and heading tags.
Syntax
With <h1> tag:
<h1 title="This is heading tag">Example of title attribute</h1>
With <p> tag:
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title="This is heading tag">Example of title attribute</h1>
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip </p>
</body>
</html>
Output:
Explanation
The title attribute is frequently employed to show extra information using tooltips, improving user guidance while keeping the interface uncluttered.
The href Attribute
The primary attribute of an anchor tag in HTML is the href attribute. This attribute specifies the destination address of the hyperlink. When the href attribute is used, it creates a clickable link on the webpage. If the href attribute is empty, clicking on the link will not redirect the page.
Syntax
With link address:
<a href="https://logic-practice.com//html-anchor">This is a link</a>
Without link address:
<a href="">This is a link</a>
Output (description)
Clickable text that reloads or stays on the current page.
Explanation
The href attribute is essential for creating hyperlinks. If the href attribute is empty or missing, it will prevent the redirection from taking place.
src, width, and height Attributes
The src attribute is a crucial and obligatory attribute of the <img> element. It serves as the origin of the image that needs to be shown in the web browser. This attribute has the capability to include images from either the current directory or a different directory. It is essential that the image name or source is accurate; otherwise, the image will not be visible in the browser.
The dimensions and alternative text of an image are defined by its width, height, and alt attributes.
Example 1
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" height="400" width="600">
Note: The above example also has height and width attributes, which define the height and width of an image on the web page.
Output (description)
A 400x600 image of a white peacock with alternate text for screen readers or broken links.
Explanation
The "src" attribute specifies the image's source, while the "width" and "height" attributes determine its dimensions. Including the "alt" attribute allows you to provide a text alternative in case the image fails to load properly.
Example 2 (Absolute URL)
<img src="https://placehold.co/800x200/34495e/ffffff?text=Logo" alt="C# Tutorial banner logo">
Output:
Image from the specified external source (C# Tutorial in this case)
The alt Attribute
The alt attribute is utilized to provide alternative text for an image in cases where the image fails to load properly. It is essential for a website to maintain accessibility for all users and to enhance its search engine optimization (SEO) performance.
Example
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Girl with a jacket">
Output (description)
If the image doesn't load, the text "Girl with a jacket" is displayed.
Explanation
In cases where an image is unavailable, the screen reader will access and display the alt text in its place. This ensures that the content remains accessible and comprehensible to all users.
Quotes in HTML Attributes
Using either single or double quotes around attribute values is acceptable. It is recommended to consistently quote your data for uniformity.
Example with Double Quotes
<a href="https://logic-practice.com/"> A link to HTML. </a>
Example with Single Quotes
<a href='https://logic-practice.com/'> A link to HTML. </a>
Example Without Quotes (Not Recommended)
<a href=https://logic-practice.com/> A link to HTML. </a>
Output (description)
All render correctly, but the last one may break if the value contains spaces.
The lang Attribute
The document's language is established by the lang attribute located within the <html> tag. This setup aids in smoother handling by search engines and enables accessibility tools for individuals with disabilities.
Example
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Output (description)
Page with metadata indicating the language is U.S. English.
Conclusion
Attributes of elements enhance the functionality, appearance, and accessibility of web content. They provide developers with the ability to incorporate links (href), images (src, alt, width, height), styling properties (style), tooltips (title), and specify the language of the content (lang). While lowercase attribute names and quoted attribute values are not mandatory, adhering to these conventions as recommended practices promotes uniformity in code. Utilizing attributes effectively is essential for maintaining well-structured, user-friendly, and visually appealing web pages.