Links and Navigation in HTML

In the world of web development, links and navigation play a vital role in connecting content and guiding users through a website. HTML provides specific tags like <a>, <link>, and <nav> to structure and manage these connections effectively.

What is a Link?

A link connects one page to another page, file, website, or a section of the same page. When users click on it, the browser goes to the target location.

What is Navigation?

Navigation helps users move between different sections or pages of a website. Usually, navigation is made using multiple links arranged in menus, headers, footers, or sidebars.

HTML LINKS TAGS

1. <a> Tag (Anchor Tag)

The <a> tag is used to create hyperlinks that allow users to click and go to:

Another webpage
Another part of the same page
A file (PDF, image, etc.)
An email address or phone number

Basic Example:

<a href="https://eduitlearning.in">EDUITLEARNING</a>

Attributes of <a> Tag

Attribute	Description
href	The destination of the link. Can be a full URL, a relative path, an ID (#section-id), or a special protocol (mailto:, tel:).
target	Defines where to open the linked page. Values: _self (default), _blank (new tab), _parent, _top.
title	Shows tooltip text when you hover over the link.
download	Tells the browser to download the file instead of opening it.
rel	Describes the relationship between the current page and the linked page. Common values: nofollow, noopener, noreferrer.
hreflang	Defines the language of the linked page. Example: en, fr, hi.
type	Tells the browser the MIME type of the linked content (like application/pdf).
name	(Deprecated) Used in older HTML versions for bookmarks; use id now instead.

Examples of `<a>` Tag Usage

a. Open in Same Tab (Default)

b. Open in New Tab

<a href=”https://google.com” target=”_blank”>Open Google</a>

c. Download a File

<a href="report.pdf" download>Download Report</a>

d. Email Link

<a href="mailto:info@example.com">Send Email</a>

e. Phone Link (Useful for Mobile)

<a href="tel:+919876543210">Call Now</a>

f. Tooltip with `title`

<ahref="about.html"title="Learn more about us">About Us</a>

g. Link to Another Section on the Same Page

<a href="#contact">Go to Contact</a>

<h2 id="contact">Contact Us</h2>

2. <link> Tag

The <link> tag is used to link external resources to the HTML document. It is not used for clickable links on a page (like the <a> tag). It is placed inside the <head> section of the HTML document.

The <link> tag is mainly used for:

Linking CSS stylesheets
Adding favicons
Preloading assets (like fonts)
Setting up icons for mobile devices or apps

Basic Syntax

<link rel="stylesheet" href="styles.css">

<link> is a self-closing
It is a void element, meaning it doesn’t have a closing tag like </link>.
You write it like:

Most Common Use Cases of <link> Tag

a. Linking a CSS File

b. Adding a Favicon

<linkrel="icon"href="favicon.ico"type="image/x-icon">

c. Preloading Fonts

<linkrel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Attributes of <link> Tag

Attribute	Description
rel	Required. Specifies the relationship between the current document and the linked file. Example: stylesheet, icon, preload, manifest, etc.
href	Required (for most uses). The URL/path of the resource to link.
type	Specifies the MIME type of the linked resource (example: text/css for stylesheets, image/png for icons).
media	Defines which devices or screen sizes the linked resource is for (example: screen, print, (max-width: 600px)).
as	Used when rel=”preload” or rel=”prefetch” to define the type of content being loaded (script, style, font, etc.).
crossorigin	For cross-origin resources like fonts or scripts. Values: anonymous, use-credentials.
sizes	Used with icons. Defines the size of the icon (example: 16×16, 32×32).
title	Optional. Describes the link. Mostly unused.

Examples for Common `rel` Value

i. rel = “stylesheet”

ii. rel = “icon”

<link rel="icon" href="favicon.ico" type="image/x-icon">

iii. rel = “preload”

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

HTML NAVIGATION TAGS

1. `<nav>` — Navigation Section Tag

Defines a section of the page that contains navigation links (like menus or tables of contents).
It’s a semantic tag, so search engines and screen readers understand it as a navigation area.

Syntax:

<nav>

<!– navigation links here –>

</nav>

2. `<ul>` — Unordered List

Creates a bulleted list.
Often used in navigation bars to hold <li> (list items) that contain <a> tags.

Syntax:

<ul>

</ul>

3. `<div>` — Generic Container

It’s not specifically for navigation but often used to group navigation menus for styling or layout.
Doesn’t affect meaning, just structure.

Syntax:

</div>

Navigation menu Structure

Explanation of Each Element

<nav>:
Represents a section of the page intended for navigation links. It semantically indicates that the enclosed content is for site navigation.
<ul>:
Creates an unordered list, grouping together multiple list items. In navigation menus, it’s commonly used to list the different navigation options.
<li>:
Denotes a list item within the unordered list. Each <li> typically contains a single navigation link.
<a>:
The anchor tag, used to define hyperlinks. Within a navigation menu, each <a> tag directs the user to a different page or section of the website.

Important Interview Questions

1. What is the difference between <a> and <link> tags?

<a> tag is used to create clickable links that users can follow (navigate to).
<link> tag is used to link external resources like CSS stylesheets, not clickable by users.

Example:

<a href=”page.html”>Click Here</a>

2. Can we use multiple <nav> tags in a single HTML document?

Yes, you can use multiple <nav> tags.
They are used to semantically define different navigation sections like:

Main navigation
Footer links
Sidebar menus

3. What happens if the href attribute is missing in an <a> tag?

If href is missing:

The link becomes non-clickable.
It may still be styled like a link but won’t navigate anywhere.

<a>Broken Link</a> <!– Not a real link — >

4. What is the purpose of the target=”_blank” attribute in <a> tag?

It opens the link in a new tab or window.

5. Can a <div> or <span> be used inside a <nav> tag?

Yes, but only to group elements or apply styling. They don’t have any semantic meaning.

<nav>

</nav>

6. What is the use of the rel attribute in <a> or <link> tags?

It defines the relationship between the current page and the linked resource.

Examples:

rel=”stylesheet” (used in <link>)
rel=”nofollow” (used in <a> for SEO control)

7. What is the default behavior of an <a> tag when clicked?

It navigates to the URL provided in href. If href is a full URL, it goes to that website.
If it’s a relative path, it opens a file from your project.

8. What is the semantic meaning of the <nav> tag?

The <nav> tag tells the browser, search engines, and screen readers that the enclosed links are for main navigation on the page.

9. Can we put images inside an <a> tag?

Yes, to make the image clickable like a link.

10. What is internal, external, and anchor linking in HTML?

Internal link: Links to another page in the same website.
Example: <a href=”about.html”>About Us</a>
External link: Links to another website.
Example: <a href=”https://google.com”>Google</a>
Anchor link: Jumps to a specific section in the same page.
Example:

<a href="#contact">Go to Contact</a>
...
<div id="contact">Contact Section</div>

📣 Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel