HTML Controls, HTML Elements

Hi, I am very confused about these two controls/elements ... can anyone clarify that for me?

HTML Elements (in Web Matrix):

eg. Button ... I have the below button created in my aspx page and a function "submit" which will redirect to another page. However, when I click on this button, nothing happend! If I change the onclick TO onserverclick ... then it works ... why is the "onserverclick" not in the property of the HTML elements? Or I just make it work accidentally?

<input onclick="submit" type="button" value="HTML button" runat="server" /
HTML Controls (from http://www.w3schools.com/aspnet/aspnet_examples.asp):

eg: Button ... I use the following tag and it works ...

<button id="btnAdd" type="button" runat="server" onserverclick="submit">Add To Cart</button
But, what's the diff between HTML elements and HTML controls?? I see there is diff between these two tags ... what situation we should use each of them??