Loading Please Wait...
HTML attributes provide some extra information about the HTML Elements for better formatting and understanding of the elements by the browser.
Each and every HTML element can have attributes. Attributes are always defined in the start tag after the tag name.
Attributes are written in name-value pairs like name="value". For example href="https://lynxsia.com/".
HTML Attributes used with all the HTML elements are called Global Attributes.
For example: title, style, class, id, lang, etc.
Some attributes have the ability to trigger actions, for instance clicking and element, are called Events Attributes.
For example: onclick, onload, onchange, onresize, etc.
Attributes used with only specific elements, are called Element Specific Attributes.
For example: href, src, rel, type, colspan, etc.
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<h1>HTML Attributes Example</h1>
<a href="https://lynxsia.com/">Visit Lynxsia IT Solutions</a>
<br>
<img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png" alt="Lynxsia IT Solutions Logo" width="100" height="100">
<br>
<img src="wrong/image/url" alt="Lynxsia IT Solutions Logo" width="100" height="100">
</body>
</html>
In the above example, we use href for the <a> tag and src, alt, width, and height for the <img> tag.
The href attribute specifies the URL/path for the link/page, it is supposed to go.
The src attribute specifies the URL/path for the image to be shown.
The alt attribute specifies the alternative text for the image if the image is not showing/loaded.
The width attribute specifies the width of the image.
The height attribute specifies the height of the image.
There are two different way to specify the URL/path of a link and/or image.
In an absolute URL, we need to give the full link to the image and/or page including the domain name.
For Example: href="https://lynxsia.com/e-learning/tutorials/front-end/html/html-introduction" or src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png"
Absolute URLs are best suited if you want to link an external page/image of another server/domain. The only drawback of it is that sometimes the page/image is removed from that server and copyright issue.
In a relative URL, we need to give the link to the image and/or page without specifying the domain name.
For Example: href="/e-learning/tutorials/front-end/html/html-introduction" or src="upload/logo/lynxsia-it-solutions-logo_1661513244.png"
The Relative URLs are best suited for resources within the same website/domain/server. We also recommend using relative URLs so that any update may not affect the URLs.
If a relative URL start without a slash (/), it is relative to the current page otherwise it is related to the domain/website.
The Title attribute specifies the title of an element. The title is shown as a tooltip when you mouse over the element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<h1>Title Attributes Example</h1>
<p title="I'm a tooltip">Place mouse over this paragraph</p>
</body>
</html>
The style attribute specifies some styles for an element like color, font, size, etc.
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<h1>Style Attributes Example</h1>
<p style="color: green;">Green color paragraph</p>
</body>
</html>
HTML Attributes are not case-sensitive. You can use either uppercase, lowercase, or mixed letters to write tags. For example, href;, HREF, and Href; all are same. But W3C recommends using lowercase for the tag name and demands lowercase for stricter document types like XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<a href="https://lynxsia.com/">Visit Lynxsia IT Solutions</a>
<br>
<a HREF="https://lynxsia.com/">Visit Lynxsia IT Solutions</a>
<br>
<a Href="https://lynxsia.com/">Visit Lynxsia IT Solutions</a>
</body>
</html>
HTML Attributes are not require quotes around it. But W3C recommends using lowercase for the tag name and demands lowercase for stricter document types like XHTML
Sometimes you have to use quotes. For example, if the attribute contains some space.
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<a href="https://lynxsia.com/">Visit Lynxsia IT Solutions</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<a href=https://lynxsia.com/>Visit Lynxsia IT Solutions</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<p title=Lynxsia IT Solutions>This is a paragraph</p>
</body>
</html>
Double quotes are most common but you can use single quotes as well. Sometimes your attributes contains quotes in itself then you need to use single quotes.
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes - Lynxsia IT Solutions</title>
</head>
<body>
<p title='Lynxsia IT Solutions'>This is a paragraph</p>
<p title='Lynxsia "IT" Solutions'>This is a paragraph</p>
<p title="Lynxsia 'IT' Solutions">This is a paragraph</p>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved