As their name says, this is for semantic purposes only. It's for improving the automated processing of documents. Automated processing happens more often than you realize - each website ranking from search engines is derived from automated processing of all the website out there.
If you visit a web page, you as the human reader can immediately (visually) distinguish all the page elements and more importantly understand the content.
However, machines are dumb and cannot do this:
Imagine a web-crawler or a screenreader trying to analyze your webpage with divs everywhere. How shall they know, what part of the document you intended to be the navigation or the main article, or some not-so-important sidenote? They could guess by analyzing your document structure using some common criteria which are a hint for a specific element. E.g. an ul list of internal links is most likely some kind of page navigation. However if instead a nav element would be used, the machine immediately knows what the purpose of this element is.
Example: You, as the user (reading a page without seeing the actual markup), don't care if an element is enclosed in an <i> or <em> tag. Probably in most browsers it will be rendered as italic text, and as long as it stands out of the text to easily recognize it, you are okay with it.
However, there is a bigger difference in terms of semantics: <i> simply means italic - it's a presentational hint for the browser and does not necessarily contain deeper semantic information. <em> however means emphasize, which semantically indicates an important piece of information. Now the browser is not bound to the italic instruction any more, but could render it visually in italic or bold or underlined or in a different color... For visually impaired persons, the screenreaders can raise the voice - whatever method seems most suited in a specific situation to emphazize this important information.
// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>
// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>
