firefox creating an extra a tag in html
Question
Sorry for the little information on the title, Here's my html:
<body>
<header class="header">
<nav class="flex flex-jc-sb flex-ai-c">
<a href="#" class="header__logo">
<img src="img/logo.svg" alt="">
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#"><a>
<a href="#">Blog</a>
<a href="#">Careers</a>
</div>
<a class='btn' href="#">Button</button>
</nav>
</header>
<body>
but firefox is creating an extra a tag outside the header inside the body, same as the last one: <a class='btn' href="#">Button</button> .
chromium is also acting same
2 answers
solution1
2 2022-02-01 07:47:08
If you use HTML Validation service , you will find bunch of problems, among others:
Unclosed element a.
From line 22, column 9; to line 22, column 32
↩↩ <a class='btn' href="#">Button
Here you opened <a> tag, but incorrectly closed it with </button>
<a class='btn' href="#">Button</button>
so browser will do best effort to figure out correct DOM
solution2
1 2022-02-01 07:50:29
Make sure you are opening and closing the right tags. It is not making an extra tag, it is closing the tag since you are closing an undefined button, not the actual anchor tag.
You can fix this by replacing <a class='btn' href="#">Button</button> with <a class='btn' href="#">Button</a> .
It is not a browser issue, it is a code issue.
solution3
0 2022-02-01 08:10:17
Always make sure that you are opening and closing the correct tags.If you open an anchor tag then you should have close that and if you open button tag then you should have close that too
You can fix this by replacing Button with Button.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.