Creating Anchor Tag Inside Anchor Tag

Creating anchor tag inside anchor tag

As @j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.

On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.

So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.

There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.

(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

How do you make an anchor link inside tag non-clickable or disabled?

document.getElementById('someLink').onclick = e => {
    if(e.path.map(p => p.tagName).includes('I'))
       e.preventDefault();

 /*  OR

if(e.target.tagName ===  'I')
    e.preventDefault();
*/
}

have some tag inside anchor tag and text-indent not working

To handle such compliances I prefer not to make the DOM dirty instead, a clean approach would be to add a new element with the required warning message and assign id to that element. No add the aria-describedby attribute, setting its value to the appropriate id of the message to be announced.
basic reference of how it can be done:

<a href="#" target="_blank" aria-describedby="new-win-52" class="" title="link">External Link</a>
<span hidden="" id="new-win-52">Opens in new window</span>

I want to Pass the text inside anchor tag when clicked on that tag and to show the same text on the directed page

You should add the heading in the link href.

      <a href="{% url 'content' %}?heading={{topic.heading}}" style="color: white; text-decoration: none;">
        <h1 name="headings" data-tooltip="{{ topic.description }}" data-tooltip-location="bottom">
          {{ topic.heading }}
        </h1>
      </a>

This will output something like <a href="http://localhost:8000/content?heading=foobar"></a>, then when user clicks on this link, the heading parameter will be added in request.GET.

You need to modify your view accordingly heading = request.GET['heading'].

ReactJs not rendering anchor tag as a link when anchor tag comes inside the string response

Try setting the innerHTML instead of rendering this as a string.

<p dangerouslySetInnerHTML={
  element.paragraph.body.replace("<p>","").replace("</p>","")
}></p>

Read the documentation for more details.

HTML anchor tag takes entire line

Regular anchor Tags are inline elements. You have to check if in your CSS, you already assign anchors globally to a block element. a { display: block;}

For fast fix:
Wrap your code anchor line (Breadcrumbs) in a container and assign with a unique id or class Name. Then you can assign only for this line the anchors to a inline element.

a {
 display: block;
}
.anchor-regular a {
  display: inline;
}

<a href="">test block </a> <a href="">test block</a>
<div class="anchor-regular">
<a href="">First Link</a> / <a href="">Second Link</a> / <a href="">Third Link</a>
</div>