HTML Anchor

HTML Anchor

The HTML anchor tags define a hyperlink that links to other pages on one page. It can create hyperlinks to any web page and files, locations or any other URL. "Href" features the most esssential attributes of HTML tags. It also links to the landing page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of a file to be added. In other words, the destination page is pointed out.

The HTML anchor tag syntax is given below.

<a href = "..........."> Link Text </a>

Example

<a href="second.html">Click for Second Page</a> 

Code

<html> 
<body> 
<a href="second.html">Click for Second Page</a> 
</body> 
</html> 

Output

Specify a location for Link using target attribute

If we want to open any link on another page, we can use the <a> tag . The next page will opened with the help of this link.

Example

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
</head>  
<body>  
<p>Click on <a href=" https://www.tutorialandexample.com/" target="_blank"> this-link </a>to go on home page of Tutorialandexample.</p>  
</body>  
</html>

Output

Appearance of HTML anchor tag

It will appear in the following way:

• An unvisited link is displayed underlined and blue.
• A visited link displayed underlined and purple.
• An active link is underlined and red.

HTML Image

HTML img tag is used to shows photos on the web page. HTML img tag is an empty tag containing only attributes. The closing tags are not included in the image element of HTML.

Example

<!DOCTYPE>
<html> 
<body> 
<title>My Page</title>
<h2>HTML Image Example</h2> 
<img src="Hello Friend.jpg" alt="Hello Friends"/>
</body> 
</html> 

Output

Attributes of HTML img tag

The src and alt are the key attributes of HTML img tag. All HTML image tag attributes are listed below.

Src

It is a necessary attribute that describes the image's source or direction. It instructs the user that where the server will search for the file. The image location can be on the same directory or on a different server.

Alt

If it cannot be displayed, it defines an optional text for the full-featured image. The value of the alt attribute describes the word image. The alt attribute is considered a good prospective SEO attribute.

Width

It is an optional attribute used to specify the image width that can be displayed. Right now, it is not recommended. The CSS should be applied instead of the width attribute.

Height

The height of the image is h3. The height attribute for HTML also supports elements of iframs, images and objects. You should use the height attribute instead of the CSS.

Use of height and width attribute with img tag

You've learned how to insert an image into your web page. We can set the attibutes of height and width to chnage the specifications (height and width) of the image.

Example

<!DOCTYPE html>
<html>
<head>
            <title>Image tag</title>
</head>
<body>
<h2>HTML image example with height and width</h2>
<img src="https://static.tutorialandexample.com/htmlpages/images/animal.jpg" height="180" width="300" alt="animal image">
</body>
</html>

Output

Use of alt attributed

Alt attribute can be used with tag. In case the image can not be displayed on browser, it will display an alternative text. The example for alt attribute follows:

Example

<!DOCTYPE html>
<html>
<head>
            <title>Image tag</title>
</head>
<body>
<h2>HTML image example with height and width</h2>
<img src="animal.png" height="180" width="300" alt="animal image">  
</body>
</html>

Output

How to get image from another directory/folder?

To insert an image in your web, you must have that image in your same folder where you have placed the HTML file. But if the image is in some other directory, you can access the image like this:

Example

<img src="E:/images/animal.png" height="180" width="300" alt="animal image">