Nested Links in HTML: Allowed or Not?

Nesting Links: Permitted or Forbidden?

In web development, a common question arises: is it permissible to nest a link within another link?

W3C HTML4's Stance

According to W3C HTML4 guidelines, nesting links is prohibited. The A element cannot contain any other A elements.

HTML5's Perspective

In HTML5, the rules have slightly evolved. While nesting links is still not allowed, there is a new constraint: interactive content, which includes anchor tags (A elements), cannot be placed inside an A element.

Best Practices

Despite these restrictions, certain layouts may require a clickable region that encompasses multiple clickable elements.

Alternative Approaches

• Using CSS: Assign the clickable area to a parent element and use CSS to style the appropriate link behavior.
• Using JavaScript: Use event handlers to capture clicks and determine the intended action based on the target element.

Example

Consider the given code snippet:

<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>

To make the entire gray bar clickable, you can assign the click event handler to the parent element and use jQuery as follows:

$('.sp_mngt_bar').click(function(e) {
  if (e.target.className.indexOf('sp_mngt_move') > -1) {
    // Handle move icon click
  } else if (e.target.className.indexOf('sp_mngt_settings') > -1) {
    // Handle settings icon click
  } else {
    // Handle main link click
  }
});

The above is the detailed content of Nested Links in HTML: Allowed or Not?. For more information, please follow other related articles on the PHP Chinese website!