.HTML attributes provide additional information about HTML elements which is define additional characteristics or properties of the element such as width and height of an image.Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name="value". Attribute values should always be enclosed in quotation marks.
- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
Some attributes are required for certain elements. For instance, an <img> tag must contain a src and alt attributes. Let's take a look at some examples of the attributes usages:
<img src="~/assets/image/example.png" width="40" height="40" alt="demo image example">
<a href="https://www.findandsolve.com/" title="online learn">findandsolve</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="Sylvia">
In the given above example src inside the <img> tag is an attribute and image path provided is its value and also href inside the <a> tag is an attribute and the link provided is its value, and so on.
There are two ways to specify the URL in the src attribute:
- Absolute URL - Links to an external image that is hosted on another website. Example: src="~/assets/image/example.png".
- Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="example.png". If the URL begins with a slash, it will be relative to the domain. Example: src="/image/example.png".
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
<a href="https://www.findandsolve.com">Visit Findandsolve</a>
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):
<img src="~/assets/image/example.png" width="400" height="300">
The alt Attribute
The required alt attribute is use for specifies an alternate text for <img> tag image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.
<img src="example.png" alt="image alt name">
General Purpose Attributes
There are some attributes, like as title, id, style, class, etc. that we can use on the majority of HTML elements. The following section describes their usages.
The style Attribute
<div style="color:green;">This is a red division section.</p>
The id Attribute
<input type="text" id="fullnameId">
<div id="someContentId">Some content</div>
<p id="informationId">This is a paragraph.</p>
The class Attribute
Like id and class attribue attribute are also used to identify elements but in some cases when you want to call attribute value in multipile page or multiple html element then you will use class attribute so class attribute does not have to be unique in the document.
<input type="text" class="form-control">
<div class="divsection">Some text or content</div>
<p class="paragraphclass">This is a paragraph.</p>
The title Attribute
The title attribute to is used to provide advisory text about an element or its content. Try out the following example to understand how this actually works.
<abbr title="World Wide Web ">FindAndSolve</abbr>
<a href="images/example.jpg" title="Click here to view large image">
<img src="images/example.jpg" alt="Image Example">