Is it acceptable to embed a hyperlink within another hyperlink?

Question

Is it acceptable to embed a hyperlink within another hyperlink?

Is it possible to insert a link within another link? Check out the image attached below:

I am attempting to make the entire grey bar clickable, but if the user clicks on the wheel or the move arrow, they should be directed to different links. Here is my current code:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

Is this considered proper practice? Am I approaching this incorrectly? How would you handle this situation? Thank you for your assistance!

html css

Answer 1

Answer №1

Directly from the W3C guidelines for HTML4:

12.2.2 Prohibition of Nested Links

It is against the rules for links and anchors designated by the A element to be nested; an A element should not contain any other A elements.

Furthermore, since the LINK element is specified as empty in the DTD, LINK elements are also prohibited from being nested.

HTML 5 Rules

In terms of HTML5 guidelines, the regulations slightly vary.

You are not allowed to place Interactive Content within an A element. This encompasses anchor tags as well.

Answer 2

Directly from the W3C guidelines for HTML4:

12.2.2 Prohibition of Nested Links

It is against the rules for links and anchors designated by the A element to be nested; an A element should not contain any other A elements.

Furthermore, since the LINK element is specified as empty in the DTD, LINK elements are also prohibited from being nested.

HTML 5 Rules

In terms of HTML5 guidelines, the regulations slightly vary.

You are not allowed to place Interactive Content within an A element. This encompasses anchor tags as well.

Answer 3

Answer №2

Simply put, the answer is: No.

However, there is a clever workaround using pure html/css:

https://codepen.io/pwkip/pen/oGMZjb

.block {
  position:relative;
}

.block .overlay {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
}

<div class="block">
  <a class="overlay" href="#overlay-link"></a>
  <div class="inner">
    This entire box is a hyperlink. (Kind of)<br><br><br><br>
    <a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a>
  </div>
</div>

Answer 4

Simply put, the answer is: No.

However, there is a clever workaround using pure html/css:

https://codepen.io/pwkip/pen/oGMZjb

.block {
  position:relative;
}

.block .overlay {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
}

<div class="block">
  <a class="overlay" href="#overlay-link"></a>
  <div class="inner">
    This entire box is a hyperlink. (Kind of)<br><br><br><br>
    <a href="#inner-link">I'm a W3C compliant hyperlink inside that box</a>
  </div>
</div>

Answer 5

Answer №3

To enhance your nested link, encapsulate it within an object tag:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <object><a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a></object>
    <object><a href="#" class="t_icons t_icons_move sp_mngt_move"></a></object>
</a>

Answer 6

To enhance your nested link, encapsulate it within an object tag:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <object><a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a></object>
    <object><a href="#" class="t_icons t_icons_move sp_mngt_move"></a></object>
</a>

Answer 7

Answer №4

While I completely agree with the chosen response and indeed, it is not recommended to have Interactive Content within an A element, there are instances where a workaround may be necessary.

For instance, consider the scenario where you must include an interactive element inside an A tag, such as a small close button on the top right.

https://i.sstatic.net/m1HvE.png

Here is the simplified HTML code for this situation:

    <a href="#">
        <span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
        <img src="images/camera.svg" width="50" alt="Camera" />
        <em>
            Upload a profile picture
            <small>
                Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
            </small>
        </em>
        <strong>
            + 25 K
        </strong>
    </a>

In essence, we want to hide this box when the user clicks on the 'X', while still maintaining basic functionality of the A tag. The following jQuery code achieved this:

    $('.hide').click(function(e) {
            e.preventDefault();
            e.stopPropagation(); // THIS IS THE KEY PART
            
            // PERFORM CUSTOM ACTIONS HERE, SUCH AS FADING OUT THE BOX
            $(this).parent().fadeOut(300);
    });

I trust that this solution may assist others facing similar challenges. ;)

Answer 8

While I completely agree with the chosen response and indeed, it is not recommended to have Interactive Content within an A element, there are instances where a workaround may be necessary.

For instance, consider the scenario where you must include an interactive element inside an A tag, such as a small close button on the top right.

https://i.sstatic.net/m1HvE.png

Here is the simplified HTML code for this situation:

    <a href="#">
        <span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
        <img src="images/camera.svg" width="50" alt="Camera" />
        <em>
            Upload a profile picture
            <small>
                Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
            </small>
        </em>
        <strong>
            + 25 K
        </strong>
    </a>

In essence, we want to hide this box when the user clicks on the 'X', while still maintaining basic functionality of the A tag. The following jQuery code achieved this:

    $('.hide').click(function(e) {
            e.preventDefault();
            e.stopPropagation(); // THIS IS THE KEY PART
            
            // PERFORM CUSTOM ACTIONS HERE, SUCH AS FADING OUT THE BOX
            $(this).parent().fadeOut(300);
    });

I trust that this solution may assist others facing similar challenges. ;)

Answer 9

Answer №5

To enhance its appearance, I would consider reformatting it to resemble the following layout:

<div class="custom_management_bar">
    <h2><a href="#"<?php echo $v; ?></a></h2>
    <a href="#" class="t_icons t_icons_settings custom_mgmt_settings"></a>
    <a href="#" class="t_icons t_icons_move custom_mgmt_move"></a>
</div>

Answer 10

To enhance its appearance, I would consider reformatting it to resemble the following layout:

<div class="custom_management_bar">
    <h2><a href="#"<?php echo $v; ?></a></h2>
    <a href="#" class="t_icons t_icons_settings custom_mgmt_settings"></a>
    <a href="#" class="t_icons t_icons_move custom_mgmt_move"></a>
</div>

Answer 11

Answer №6

Avoid using nested links, as it is not allowed. To simulate the same functionality without nested links, follow these steps:

Utilize HTML formatting by @mikevoermans and attach a click event to it

<div class="sp_mngt_bar">
    <h1><a href="#"><?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> 
</div>

The click event function should be structured like this:

$(".sp_mngt_bar").bind("click", function(e) {   
    var target = $(e.target);
    if(target.has('.t_icons_settings') { //Perform action for settings } 
    else if(target.has('.t_icons_move') { //Perform action for move }
    else { //Perform default action for sp_mngt_bar
});

Answer 12

Avoid using nested links, as it is not allowed. To simulate the same functionality without nested links, follow these steps:

Utilize HTML formatting by @mikevoermans and attach a click event to it

<div class="sp_mngt_bar">
    <h1><a href="#"><?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> 
</div>

The click event function should be structured like this:

$(".sp_mngt_bar").bind("click", function(e) {   
    var target = $(e.target);
    if(target.has('.t_icons_settings') { //Perform action for settings } 
    else if(target.has('.t_icons_move') { //Perform action for move }
    else { //Perform default action for sp_mngt_bar
});

Answer 13

Answer №7

Instead of directly answering the question, one possible solution is to attach the click event to a span or div:

<a href="outer-link">
  Outer Link
  <span class='inner-link'>Inner Link</span>
</a>

$('.inner-link').click(function (e) {
    // Prevent the click-through to the underlying anchor
    e.stopPropagation();

    // Navigate to a different page
    window.location.href = 'new-page.html';
    // Alternatively, execute a JavaScript function
    doSomething();

    return false;
});

Answer 14

Instead of directly answering the question, one possible solution is to attach the click event to a span or div:

<a href="outer-link">
  Outer Link
  <span class='inner-link'>Inner Link</span>
</a>

$('.inner-link').click(function (e) {
    // Prevent the click-through to the underlying anchor
    e.stopPropagation();

    // Navigate to a different page
    window.location.href = 'new-page.html';
    // Alternatively, execute a JavaScript function
    doSomething();

    return false;
});

Answer 15

Answer №8

To solve this issue, one approach is to absolutely position a link inside the parent link container:

<div style="position: relative">
  <a href="#">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <div id="placeholder" style="height: 24px">
  </a>
  <div style="position: absolute; bottom: 0">
    <a href="#"></a>
  </div>
</div>

Answer 16

To solve this issue, one approach is to absolutely position a link inside the parent link container:

<div style="position: relative">
  <a href="#">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <div id="placeholder" style="height: 24px">
  </a>
  <div style="position: absolute; bottom: 0">
    <a href="#"></a>
  </div>
</div>

Answer 17

Answer №9

@Jules provided a concise answer:

.parent {
  position:relative;
}

.overlay-link {
  position:absolute;
  inset: 0;
}

This is how it would look in HTML:

<div class="parent">
    <a class="overlay-link" href="..."/>
    <div class="child">
                    
    </div>
</div>

Answer 18

@Jules provided a concise answer:

.parent {
  position:relative;
}

.overlay-link {
  position:absolute;
  inset: 0;
}

This is how it would look in HTML:

<div class="parent">
    <a class="overlay-link" href="..."/>
    <div class="child">
                    
    </div>
</div>

Is it acceptable to embed a hyperlink within another hyperlink?

Answer №1

12.2.2 Prohibition of Nested Links

HTML 5 Rules

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Converting dates from JavaScript to Central Daylight Time (CDT) using the new

Adaptive video player for complete YouTube experience

Changing position with flair in CSS

Compatibility of AngularJs form options across various browsers

Animating the width of an image with CSS3 animations

Using jQuery and cheerio to iterate through a collection of items

Expanding image in card to fit device width using Ionic

The top navbar's dropdown menu gets concealed by the overlapping second navbar

Issue with radio button list not functioning properly in Mozilla and Chrome browsers

Assigning a unique identifier to a button that will vary depending on the selected radio input

Switch out a static full-page image background for an engaging HTML5 video

Ways to adjust the text size in jqGrid?

The collapsed navbar button in Bootstrap is unresponsive

Is there a way to access a CSV file, process its content line by line, decode it using base64, and store the decoded data in a different file?

Unfortunately, I am unable to paste the specific URL into the browser's address bar

Issue with HTML CSS: There is a gap between the words "Get" and "started", causing "get" to appear on

ElegantFrameload - Displaying an HTML webpage

Interactive YouTube Video Player that keeps video playing in original spot upon clicking the button

Switching the choice within a dropdown menu to trigger an onchange event using JavaScript

Using HTML and CSS to stack a DIV on top of another using z-index