HTML Attributes
HTML attributes give more information about HTML elements.
HTML Attributes
- Every HTML element is capable of having properties
- Attributes offer more details about the elements
- The start tag is where attributes are always supplied
- Typically, attributes are given as name/value pairs, such as name=”value”
The href Attribute
A hyperlink is defined by the <a> tag. The URL of the page that the link points to is specified by the href attribute:
Example
<a href="https://www.codingask.com">Visit CodingAsk</a>
You will learn additional about links in our HTML Links chapter.
The src Attribute
An image can be embedded into an HTML page using the <img> tag. The path to the image that will be shown is specified by the src attribute:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Html Attributes - Html Attributes" title="Html Attributes 2" data-lazy-src="img_boy.jpg"><noscript><img decoding="async" src="img_boy.jpg" alt="Html Attributes - Html Attributes" title="Html Attributes 2"></noscript>
The URL can be specified in the src property in one of two ways:
- Absolute URL : Refers to an outside image housed on a different website.Â
Example: src=”https://www.codingask.com/images/img_boy.jpg”
Notes: Copyright may apply to external photos. You might be breaking copyright laws if you use it without authorization. Furthermore, external photos are uncontrollable and can be altered or withdrawn at any time.
- Relative URL : Provides a link to a picture hosted on the website. The domain name is absent from this URL. The URL will refer to the current page if it starts without a slash. For instance, src=”img_girl.jpg”. The URL will be relative to the domain if it starts with a slash.
The width and height Attributes
Along with the width and height elements, which indicate the width and height of the image (in pixels), the <img> tag should also have these attributes:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20800'%3E%3C/svg%3E" width="600" height="800" alt="Html Attributes - Html Attributes" title="Html Attributes 3" data-lazy-src="img_boy.jpg"><noscript><img decoding="async" src="img_boy.jpg" width="600" height="800" alt="Html Attributes - Html Attributes" title="Html Attributes 3"></noscript>
The alt Attribute
If an image cannot be shown for any reason, the mandatory atl attribute for the <img> element provides a replacement text for the image. This can be the result of the user using a screen reader, a src attribute problem, or a slow connection.
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Boy With A Jacket" title="Html Attributes 4" data-lazy-src="img_boy.jpg"><noscript><img decoding="async" src="img_boy.jpg" alt="Boy With A Jacket" title="Html Attributes 4"></noscript>
Example
See what happens if we try to display an image that does not exist:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Boy With A Jacket" title="Html Attributes 5" data-lazy-src="img_tyso.jpg"><noscript><img decoding="async" src="img_tyso.jpg" alt="Boy With A Jacket" title="Html Attributes 5"></noscript>
The Style Attribute
An element can have style applied to it, including color, font, size, and more, by using the style attribute.
Example
<p style="color:black;">This is a black paragraph.</p>
The lang Attribute
To specify the languages of the Web page, you should always place the lang property inside the <html>Â tag. This is for the benefit of browsers and search engines.
The language used in the example below is English:
Example
<!DOCTYPE html>
<html lang="en">
<body>
...
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
The lang parameter allows for the addition of country codes to the language code. Thus, the first two characters specify the HTML page’s language, and the final two characters specify the nation.
The United Kingdom is the nation and English is the language in the example below:
<!DOCTYPE html>
<html lang="en-UK">
<body>
...
</body>
</html>
The title Attribute
A little additional information about an element is defined via its title attribute.
When you mouse over the element, the following value of the title attribute will appear as a tooltip:
Example
<p title="I'm a Cool">This is a title.</p>
We Suggest: Always Use Lowercase Attributes
Lowercase attribute names are not required by the HTML standard.
All attributes, including title, can be written in uppercase or lowercase, such as title or TITLE.
Nonetheless, the W3C requires lowercase characteristics for stricter document formats like XHTML and suggests lowercase attributes for HTML.
We Suggest: Always Quote Attribute Values
Quotations around attribute values are not required per the HTML specification.
Nonetheless, W3C requires quotations for stricter document formats like XHTML and suggests quotes in HTML.
GOOD:
<a href="https://www.codingask.com/html/">Visit our HTML tutorial</a>
BAD:
<a href=https://www.codingask.com/html/>Visit our HTML tutorial</a>
Sometimes using quotations is necessary. Because there is a space in this example, the title attribute will not appear correctly:
Example
<p title=About CodingAsk>
Single or Double Quotes?
Although single quotes can sometimes be used, double quotes are the most frequent way to enclose attribute values in HTML.
Single quotes must be used in some circumstances when the attribute value itself contains double quotations:
<p title='Jonas "LongGun" Melson'>
Or vice versa:
<p title='Jonas 'LongGun' Melson'>
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML attributes
HTML elements
href attribute
src attribute
absolute URL
relative URL
width and height attributes
alt attribute
style attribute
lang attribute
title attribute
HTML attributes are an essential part of HTML elements, providing additional information and functionality to web pages. These attributes are used to modify the behavior, appearance, and properties of HTML elements.
Some of the most commonly used HTML attributes include:
1. href: Specifies the URL (Uniform Resource Locator) of the linked document in an (anchor) element.
2. src: Defines the source URL of an image, video, or other media content in an,, or element.
3. width and height: Specify the dimensions of an image or other media element.
4. alt: Provides alternative text for an image, which is displayed if the image cannot be loaded or for accessibility purposes.
5. style: Allows you to apply inline CSS (Cascading Style Sheets) styles to an HTML element.
6. lang: Specifies the language of the content within an HTML element, which is important for accessibility and search engine optimization.
7. title: Provides additional information about an element, which is typically displayed as a tooltip when the user hovers over the element.
Understanding and properly using HTML attributes is crucial for creating well-structured, accessible, and visually appealing web pages. By mastering these attributes, web developers can enhance the user experience and improve the overall effectiveness of their web content.
