What is HTML Header Tag And Img Tag

(HTML) Header Tag

<header> tag is a semantic HTML tag, using which we can provide a different header section to different sections of the webpage.

Yes, HTML webpage can have more than one <header> tag as per requirement, and both heading tags (h1 to h6) and <header> tag have different meaning and usage, they are not the same.

Inside this tag, there is information about the heading of the section (heading h1-h6), author, date, etc.

This tag cannot be under <footer>, <address> or any other <header> tag.

Example:

<article>
<header>
<h1>Heading/<h1>
<p>Posted by Hartron Exam</p>
</header>
</article>

The <header> tag supports Global Attribute and Event Attribute.

(HTML) Image Tag

<img> tag is used to insert images in the webpage, adding useful images in the webpage increases the quality of the webpage and the user can understand properly from the images.

It is necessary to enter the source (url) of the image in its src attribute.

How to insert images in HTML?

If any good image is placed at the right place in the webpage, then it makes it easier for the user to understand the content of the webpage, which saves the user’s time and provides clarity to the webpage.

There are two common ways to use the <img> tag,

(a)- can show images
(b)- You can make an image clickable by using it in the <a> tag.

Example:

<a href=”https://www.hartronexam.com/”>
<img
src=”https://www.hartronexam.com/wp-content/uploads/2022/12/W3-logo.png”
alt=”Hartron Exam Logo”
width=”270px”
height=”90px”
/>
</a>

Important Attributes of <img> Tag

Attribute And Explanation

(1)- src- This attribute contains the link (source) of the image, for the image tag to work properly its value should be in the image format like .jpg, .png, etc.

(2)- alt- When an image is not loaded due to any reason, then the value of the description of the image kept in the alt attribute is visible to the user, so that the user knows what was there in the image which was not loaded.

This attribute is also important because when a bot or AI machine reads your page, it does not see the image, it reads the text placed in this attribute and tells that there is such an image here.

(3)- Sizing- The height of the image is determined by the value of the height attribute and the width of the image is determined by the width attribute.

It is also important to give the height and width of any image so that when the image takes time to load, it occupies its place in advance, so that the user’s attention does not get distracted due to the page size not changing after the image is loaded.

(4)- usemap- With this attribute we can put a link in any part of the image, so that by clicking on that part, we can send the user to the page of the link.

To use it, you also have to use its supporting tags like map and area tags.

This attribute is not supported in HTML5, but you can do this type of work with JavaScript.

(5)- ismap- This tag works like usemap, but its mapping is server side, by clicking on any part of it, information about it is sent to the server, then the script in the server does the further work.

(6)- crossorigin- Giving a link of any other domain in HTML causes cross origin error, that is, you cannot use the content of abc.com in any content of xyz.com.

To avoid and control this problem, you can use the crossorigin attribute, this attribute is used in <img /> tag as well as <script /> and <link /> tag.

(7)- referrerpolicy- With the help of this attribute we can send additional information to the server about the src attribute used in the <img /> tag.

(8)- loading- Using this attribute, we can tell the web browser how the image will be loaded, in which lazy, eager and auto types are present.

Image tag supports both global attribute and event attribute.

• What is Anchor Tags in HTML

• What is a Body Tag in HTML

• What are The 21 tags in HTML with Examples

• What is the Difference Between RTF and HTML

• What is Style Tag in HTML | Tag Style HTML