Why extra anchor tag gets added to the dom?

[mizanmahi]

Above I uploaded two images of HTML and CSS
When I run this code two extra anchor tags gets added to the HTML under sub-navigation. Don’t get why?

[anon58011934]

Hello,
Maybe you are using a library and that’s why these elements are getting added to the original code.

[jsdisco]

Not sure I understand, your <ul class="sub-navigation"> has four <li> children with <a> tags in them:

• Web Design
• Web Development
• Digital Marketing
• SEO

Where are the “extra anchor tags”?

[mizanmahi]

No I am not using any library, just a google fonts.

[mizanmahi]

But its getting added

[ilenia]

which ones do you mean? can you post the code instead of a screenshot?

[jsdisco]

What do you mean “it’s getting added”, aren’t you the one who wrote the HTML?

[mizanmahi]

I wrote the HTML but two anchor tags in the sub-navigation is not in the markup. You can have a look at the pictures

[mizanmahi]

Code link: GitHub - mizanmahi/prog_hero_prac

[ilenia]

what are the two anchor tags you say are not in the markup? can you please copy that code here and point them out?

[jsdisco]

Thanks I see it now, you have the submenu <a> tags nested within another <a> tag, which is invalid HTML. The <a href="#">Services</a> needs to be closed before you open the ul for the submenu:

<li>
  <a href="#">Services</a>
     <ul class="sub-navigation">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">Digital Marketing</a></li>
        <li><a href="#">SEO</a></li>
     </ul>
</li>

[mizanmahi]

These two anchor tag isn’t present at the markup.

[mizanmahi]

Why the other links are working, and how this is getting compiled can you explain?

[jsdisco]

I can’t say for sure, but browsers try to correct invalid syntax. If you forget to close a <p> tag, the browser will insert a closing tag if it finds another opening <p> tag before the first one was closed. That’s pretty much what happened here, you can see in your screenshot that the browser added a closing </a> after the word “Services”. But now it has an orphaned </a> tag after the <ul> closes. So it seems it keeps adding opening <a> tags to correct this, but it doesn’t know where the link should lead to, so it adds the default # for the href and only a space as link text. Then it comes across the next opening <a> tag, so it has to immediately close the one it just inserted again.

The exact way that browsers handle this should be somewhere in their specification, and probably the behaviour is different for different browsers. Letting them “auto-correct” your HTML is kind of a lottery, so it’s a good idea to always make sure your HTML is valid. Here’s a good online HTML validator where you can either upload a file or directly copy/paste the HTML you want to check:

https://validator.w3.org/