Why does an HTML <a> tag inside a section/div produce a duplicate outside of the section/div?

I've been trying to make a scroller for a website with some arrows on the side, but the arrows are going crazy and duplicating themselves in following sections. I've simplified the problem to the below - when I put one a-tag inside a section, where the a-tag is a colored shape thanks to some CSS, it produces a duplicate after the section ends. Here is some code below to try out:

<head>
<style>
a#block { height:30px; width:30px; display:block; background:blue; }
</style>
</head>

<body>
    <section>
        <a id="block"/>
    </section>
</body>

I realise that the above looks like terrible use of mark up, but it's for a reason. The block is a simplification of an action arrow (hence the tag), and the section is necessary as there will be more inside of it.

I have no idea why this is happening, I never thought that HTML elements could duplicate. Any ideas?

Solution

<a id="block"/> is not valid HTML. <a> must have a closing tag: <a id="block"></a>.

Always validate your code when you get odd errors. It can be very enlightening.