Semantic elements describe their meaning or purpose to the browser and to the developer. HTML5 has new semantically rich elements that can convey the purpose of the element to both developers and browsers.
Earlier, developers used IDs and classes with <div> tags. Though, this conveyed meaning to the developers, but it didn't helped browsers to understand the purpose of that markup. For example
The <div> tag defines a division or a section in an HTML document. This division is for footer section of the web page. But for the browser, footer is just a name of the id. It does not have any semantic structure.
The <nav> element defines a menu bar or navigation links.
The <section> element defines a section in a document. A section is a thematic grouping of content, typically with a heading. It can be used together with h1-h6 to indicate the document structure.
The <article> element specifies independent, self-contained content. For example, blog post or news article.
The <aside> element defines some content aside from the content that is generally placed in a sidebar.