The alt, href, source and style attributes in HTML

In this tutorial, we will learn about the followings;

HTML Attributes
Quotes Attributes in HTML
Quotes contain space Attributes in HTML
Single or Double Quotes Attributes in HTML
The Alt Attribute in HTML
The href Attribute in HTML
The src Attribute
The style Attribute
The Title Attribute in HTML
Width and Height Attributes in HTML

HTML Attributes

HTML elements can have attributes. Attributes are the properties for a specific HTML element.
Attributes provide detailed information about an element.
Attributes are always specified in the start tag represented by < >.
Every attribute must have a value. For example, see the mentioned font element.
<font color=”red”>this is font</font>
In this example, the font is the HTML element color is the attribute of the font and red is the value of the font element.

Quotes Attributes in HTML

Href is the attribute and it is double quoted. The values of href attribute is “https://www.t4tutorials.com”.

<html>
<body><h1>Welcome To T4-Tutorials</h1><h2>Quote Attribute Values:</h1><a href=”https://www.t4tutorials.com”>T4-Tutorials</a></body>
</html>

Quotes contain space Attributes in HTML

We cannot apply quotes around an attribute value, if the value contains spaces.It is recommended to use the quotation around the value of the attributes.

<html>
<body><h1>Welcome To T4-Tutorials</h1><h2>Quotes:</h2><p title=Welcome To T4-Tutorials>We cannot apply <b>quotes around an attribute value<b/>
if the value contains spaces……

</p>

<p><b>
Thanks For Your Love For T4-Tutorials…….
</b></p>

</body>
</html>

Single or Double Quotes Attributes in HTML

Double quotes around attribute values are the most commonly in HTML, but single quotes are also allowed to use. Sometimes, when the attribute value itself contains double quotes, then it is mandatory to use single quote.

<html>
<body><h1>Welcome To T4-Tutorials</h1><h2>Quotes:</h2><p title=Welcome To T4-Tutorials>We cannot apply <b>quotes around an attribute value<b/>
if the value contains spaces……

</p>

<p><b>
Thanks For Your Love For T4-Tutorials…….
</b></p>

</body>
</html>

The href Attribute in HTML

HTML links must be in <a> tag. The URL of the page is specified in the href

<html>
<body><h1>Welocome To T4-Tutorials</h1><h2>The href Attribute:</h2><p>HTML links are defined with the a tag……</p><a href=”https://t4tutorials.com/html”/>HTML</a>

</body>
</html>

The src Attribute

In this example img is the HTML element for putting images on the web page. The src, width, and height are the attributes of the image. Here, jpg, 300 and 100 are values of the attribute.

<html>
<body><h1>Welcome To T4-Tutorials</h1><h2>The src Attribute:</h2><p>Thanks For your Love For T4-tutorials..</p><img src=”logo.jpg” width=”300″ height=”100″>

</body>
</html>

The style Attribute

We can apply a style on any of the HTML element.

We can add a title attribute to the paragraph elements. The value of the title attribute will be displayed as a tooltip when you mouse over theh1, h2, and p.

The Title Attribute in HTML

<html>
<body><h2>The style Attribute:</h2><p>It is used to specify the styling of an element, like color:</p><p style=”color:purple”>Thanks For Your Love For T4-Tutorials…</p></body>
</html>

Width and Height Attributes in HTML

We can assign src of the image. The source can be any URL. Width and Height can be applied on the image to see the image according to your desired size.

<html>
<body><h2>Size Attributes:</h2>
<p>Thanks For Your Love For T4-Tutorials..</p><img src=”logo.jpg” width=400″ height=”100″></body>
</html>