Learn how to embed hyperlinks and images into web pages using HTML. Understand the use of the <a> and <img> tags, and explore linking to internal and external pages.
In this section, we will explore how to add links and images to your web pages, enhancing their functionality and visual appeal. Links and images are fundamental components of the web, allowing users to navigate between pages and enjoy rich media content. By the end of this section, you’ll be able to create hyperlinks to both internal and external resources and embed images effectively.
<a>
Tag and the href
AttributeThe <a>
tag, also known as the anchor tag, is used to create hyperlinks in HTML. A hyperlink is a reference to data that the user can follow by clicking or tapping. The most crucial attribute of the <a>
tag is href
, which stands for “hypertext reference.” This attribute specifies the URL of the page the link goes to.
Here’s a simple example of a hyperlink:
<a href="https://www.example.com">Visit Example</a>
<a>
: This is the opening tag for the anchor element.href="https://www.example.com"
: The href
attribute contains the URL of the page you want to link to.Visit Example
: This is the clickable text that users will see on the web page.</a>
: This is the closing tag for the anchor element.Links can point to different types of resources, including internal pages within the same website or external pages on the internet.
To link to another page within the same website, you can use a relative path. A relative path is a way to specify the location of a file relative to the current document’s location.
Example of an internal link:
<a href="about.html">About Us</a>
In this example, clicking the link will take the user to the “about.html” page located in the same directory as the current page.
For external links, you need to use an absolute path, which includes the full URL of the resource.
Example of an external link:
<a href="https://www.google.com">Go to Google</a>
This link directs the user to Google’s homepage.
<img>
Tag and the src
and alt
AttributesThe <img>
tag is used to embed images in a web page. Unlike the <a>
tag, the <img>
tag is self-closing, meaning it doesn’t have a separate closing tag. The two most important attributes of the <img>
tag are src
and alt
.
Here’s a simple example of an image element:
<img src="images/photo.jpg" alt="A beautiful scenery">
<img>
: This is the tag used to embed an image.src="images/photo.jpg"
: The src
attribute specifies the path to the image file.alt="A beautiful scenery"
: The alt
attribute provides alternative text for the image, which is important for accessibility and SEO.When specifying paths for links and images, you can use either relative or absolute paths. Understanding the difference between these two is crucial for effective web development.
A relative path is a way to specify the location of a file relative to the current document’s location. This is useful for linking to resources within the same website.
Example:
<a href="contact.html">Contact Us</a>
<img src="images/logo.png" alt="Company Logo">
In these examples, “contact.html” and “images/logo.png” are relative paths.
An absolute path includes the full URL of the resource, starting with the protocol (e.g., http://
or https://
). This is necessary for linking to external resources.
Example:
<a href="https://www.example.com/contact.html">Contact Us</a>
<img src="https://www.example.com/images/logo.png" alt="Company Logo">
Here, the links point to resources hosted on “example.com.”
Let’s combine what we’ve learned to create a simple web page with links and images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>About Us</h2>
<p>We are a company dedicated to providing the best services to our customers.</p>
<img src="images/company.jpg" alt="Our Company Building">
</main>
<footer>
<p>Follow us on <a href="https://www.twitter.com">Twitter</a></p>
</footer>
</body>
</html>
In this example, we have:
alt
attribute.Now that you’ve seen how to add links and images, try modifying the example above:
href
attributes to point to different pages or external websites.src
attribute of the <img>
tag with a different image file path.To better understand how links and images fit into the structure of an HTML document, let’s visualize the DOM (Document Object Model) tree of our example page.
graph TD; A[html] A --> B[head] B --> C[title] A --> D[body] D --> E[header] E --> F[h1] E --> G[nav] G --> H[ul] H --> I[li] I --> J[a: Home] H --> K[li] K --> L[a: About] H --> M[li] M --> N[a: Contact] D --> O[main] O --> P[h2] O --> Q[p] O --> R[img] D --> S[footer] S --> T[p] T --> U[a: Twitter]
This diagram represents the hierarchical structure of the HTML elements in our example. The <html>
element is the root, with <head>
and <body>
as its children. The <body>
contains the main content, including the header, main section, and footer.
<a>
tag is used to create hyperlinks, with the href
attribute specifying the destination URL.<img>
tag embeds images, with src
specifying the image file path and alt
providing alternative text.For more information on HTML links and images, check out the following resources:
<a>
: The Anchor element<img>
: The Image element