Why does anchor tag affect multiple lines

Question

I'm new in HTML and I wrote this some code:

<div id = "here">
    <a href="#end">
    <p>stay here</p>
</div>
	
<button id="test" onclick="clickSpecialButton('click')">click</button>
<span onmouseover="clickSpecialButton('hover')">hover</span>
<div id="start"></div>
<h1>My first web page</h1>
<figure>
    <img src="globe_kyw.jpg" width=90 height=90>
    <figcaption>Tixall Obelisk</figcaption>
</figure>
<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/reference/">Reference</a></li>
        <li><a href="/articles/">Articles</a></li>
        <li><a href="/about/">About us</a></li>
    </ul>
</nav>
<div id="end">
    text
</div>

The result is the text in it: ("stay here", "hover", "My first web page", "Tixall Obelisk") all of it underline and it link to #end.

I wanted only what inside the div with id = "here" to be linked to #end.

What's wrong with what I did?

Answer 1

You forgot to close the a tag, try closing it after the p tag like this:

 	<div id = "here">
   <a href="#end">
       <p>stay here</p>
   </a> <!-- Notice the close tag here -->
</div>
	
        <button id="test" onclick="clickSpecialButton('click')">click</button>
	<span onmouseover="clickSpecialButton('hover')">hover</span>
	<div id="start"></div>
	<h1>My first web page</h1>
	<figure>
		<img src="globe_kyw.jpg" width=90 height=90>
		<figcaption>Tixall Obelisk</figcaption>
	</figure>
	<nav id="main_nav">
		<ul>
			<li><a href="/tutorials/">Tutorials</a></li>
			<li><a href="/reference/">Reference</a></li>
			<li><a href="/articles/">Articles</a></li>
			<li><a href="/about/">About us</a></li>
		</ul>
	</nav>
	<div id="end">
		text
	</div>