Why so many div tags and unnecessary mark up?

I've just spent the last couple of hours browsing other peoples websites and viewing the source code. I was just curious to see how other developer(s) had decided what HTML elements to use to effectively mark up the content of each page.

This is just an estimate but I'd say roughly 90% of the websites I visited and I visited quite a lot, the mark up puzzled me. The number of divs that were being used was overkill in my opinion but this seems to be the norm and common across most sites. A lot of unnecessary mark up was being used as well.

A little example I came across was, a billboard/banner section at the top of a website introducing what the website was about with a heading, sub heading and a call to action button to contact the company. The mark up for this button that this particular developer had used was a div tag that contained a paragraph tag than contained an anchor tag. I was scratching my head thinking, why have they did this? Thinking about the box model and all HTML elements being a rectangular box, would it not have been better to just have used an anchor tag with a class of button or call-to-action instead and then used CSS to position it?

Another example was a header area that contained a logo on the left and some navigation links on the right. Some developers had done something similar to the following:

<header class="nav-bar"> <div class="logo"> <a href="#"> <img src="images/logo.png" alt="Company Name"> </a> </div> <div class="main-nav"> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> </div> </header>

Would it not have been quicker, easier to read and understand what's going on as well as reduce the size of the page by doing the following instead:

<header class="nav-bar"> <a href="#" class="logo"> <img src="images/logo.png" alt="Company Name"> </a> <nav class="main-nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> </header>

I know most of this is personal preference where some developers may think a certain element is best used for a specific piece of content where another might think another would be more appropriate. In the end, there's no right or wrong really but I was just a bit baffled as to why so much extra mark up is being used when there doesn't need to be. I know that these examples are really trivial but when this approach is used when marking up a full website then it can quickly and unnecessarily add to the size of your web pages as well as make it difficult to read, maintain and fix any future issues.

What's your guys thoughts on this? I'm really interested to hear what other peoples points of view are.