HTML_attributes

Research/HTML

HTML_attributes

RIEM 2023. 5. 2. 18:52

HTML Attributes

Let’s study HTML attributes. Why do we need HTML attributes? Because it can give more detailed information about HTML elements. Think about it. There are so many <div> tags without difference. How can we differentiate those?

Features of HTML Attributes

All HTML elements can contain attributes
Attributes give more information about elements
Attributes must be specified in the start tag
Attributes normally come with pairs name/value format, for e.g., name=”value”

The href Attribute

<a> tag defines a hyperlink. The href attribute can connect with other external resource.

<a href="http://www.businessoffashion.com">Visit Bof</a>

The src Attribute

The <img> tag is useful when you embed an image in an HTML page. The ‘src’ attribute defines the path to the image.

Two ways to define the URL in the src attribute

There are two ways to specify the url. First one is 1)Absolute URL and the other one is 2)Relative URL. Let’s see how each way works.

1.Absolute URL

src="https://www.w3schools.com/images/img_girl.jpg"

Can you see the difference between Absolute URL and Relative URL? Yeah. Absolute URL is longer than Relative one. Absolute URL links to an external image which is hosted on another website. It means the image is from another guy’s source. So you should be careful when you use images from others. Check copyright issues. Additionally, you have no total control on image source. If the original source is deleted, then you can not use it anymore.

2.Relative URL

src="/images/img_girl.jpg"

Relative URL links to an image which is hosted inside our website. So you don’t have to write all the addresses. You can simply command computer like ‘bring that img_girl jpg file from the folder called ‘images’.

For this, you can use slash to direct addresses. Without a slash, our computer will see the current page like src=”imag_girl.jpg”. With a slash, it will follow a relative directory like src=“/images/img_girl.jpg”.

In summary, there are two ways to get images. One is Absolute URL and the other one is Relative URL. You can use Absolute URL when you get images from other websites. Cons is you have no control on images and possibility to infringe copyright. If you want to use images from your own website, you can just use Relative URL.

The width and height Attributes

The <img> tag needs width and height attributes to set the size of an image.

The alt Attribute

Sometimes you need the alt attribute to define an alternate text for an image in case of any issue of displaying images. There can be slow connection, errors in src attribute or user who use a screen reader and etc.

The style Attribute

You can use style attribute to add styles to an element. Color, font, size and etc.

This is in red color

The lang Attribute

You should contain the lang attribute within the <html> tag to declare the language of the Web page. You can also put country codes as well. This assists search engines and browsers.

<!DOCYTYPE HTML>
<html lang="en">
//<html lang=”en-US”>
<head>
<title>This is my html site</title>
</head>

<body>
</body>

</html>

If you want your own language and country code, check this out.

The title Attribute

The title attribute gives detailed information about an element. You can see the value of the title attribute as a tooltip when you hover your mouse over the element.

Password