ATTRIBUTES IN HTML

Hey, welcome back to my blog, So, as a fast learner, we often tend to skip many short and important sub-topics considering to be not important but least, we know that those topics are yet the most important ones, so here I am back with another topic from my HTML series that is Attributes. So in my previous blog, we learned where, how, and why attributes are used. So, now in this blog, we will be learning and talking more in detail about Attributes.

(I know I know you are probably thinking right now that — “Elements and tags were not enough as an important topic that now we are going read 1000 words more just about attributes !!!!!!!” Cool cool, I know this frustration but don’t worry this blog will be really short but equally very important too so, Don’t miss it.)

Ok, so a quick recap: What are attributes? — Attributes are used inside HTML elements to provide additional information about the elements, easier words just to alter the content inside these tags in a better way, attributes are mentioned in the start tags and usually, they are to be written in the following way -

<tag attribute1=”value1" attribute2=”value2">’’content’’</tag>

Some points to be noted -

• Attributes are always mentioned with their “values” specified.
• Attributes are not Case-Sensitive but are often suggested that attributes are to be written in lower case.
• Attribute values are not necessarily to be written in quotation marks but to code conveniently and receive proper output, quotation marks are suggested.

( While using quotation marks, use can use both singles (‘ ’) and double(“ ”) quotation marks, unless you mention quotes inside the attribute value, the entire attribute value must be quoted differently, for eg-

<p title=’John “ShotGun” Nelson’> or <p title=”John ‘ShotGun’ Nelson”>)

There are many attributes in HTML but I will be mentioning only a few of the most used attributes.

1. href Attribute — The href attribute specifies the URL of the page the link goes to and can be used only with <a> tag, for eg-

<a href=”https://www.google.com">Visit google</a>

(here, a is an HTML element used to specify a hyperlink.)

2. src attribute — The src attribute specifies the path to the media to be displayed and can be used along with only media-related elements, for eg -

<img src=”img_girl.jpg”>

(here, the img element is used to embed an image)

(here’s a catch, you can mention two types of link in the src attribute which are as follows -

1. Absolute link — These links are the ones which can lead to the images found on the internet for example -

https://images.complex.com/complex/images/c_scale,f_auto,q_auto,w_1920/fl_lossy,pg_1/ok26lkxxcptihvwljzaw/girl-in-red?fimg-ssr-default

2. Relative link — These links are the ones that directly lead to the images in your local system for example -

/photos/img_girl.png

In general, most of the time, it is recommended to use Relative links because on the internet most of the images you find have copyright so, while you host it on the web server, the image may not appear due to copyright issues whereas the image present in your local system has no copyright and it will appear while hosted on a web server. )

3. height and weight attribute — These attributes specify the height and weight of the content present inside the element respectively. These are to be used with any tag which will include some media file or html file which is to be embedded. For eg -

<object data=snippet.html” width=”500" height=”200"></object>

Or

<img src=”img_girl.jpg” width=”500" height=”600">

Ok so, as promised My blog won’t be too long, I have kept it short. Now, check out the following images where you will find a table filled with all the attributes used in HTML. Some may take a parabola turn from your head

(=^ェ^=) but no worries, my further blogs will have a must mention of them.

Though You can find this table on the W3schools website (https://www.w3schools.com/tags/ref_attributes.asp ) too I’ve decided to mention everything in this blog so, that whenever you want to learn something about attributes or check out any attribute you can just come to my blog and take a quick view through the topic. No need to roam around the internet then.

Thank you so much for reading my blog and Happy Coding !!!