HTML5 semantics tags

As their name says, this is for semantic purposes only. It's for improving the automated processing of documents. You can as well use normal div element but for true semantic access you need special tags.

You as the human reader can 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 or 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: simply means italic - it's a presentational hint for the browser and does not necessarily contain deeper semantic information. 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 or completely different but also very important e.g. for visually impaired persons, in the case of a screenreader, raise the voice (which is not a visual representation at all) - whatever method seems most suited to indicate an important information.

// machine: okay, this structure looks like it might be a navigation element?