With HTML5's return to a language of structure, a new collection of tags was added for marking up the high-level organization of a page. These include the following:
main, which wraps the focal point of the page's content.header, which wraps the reusable top matter, often including a logo, banner image, or other branding. Be careful not to confuse this tag with head, which holds the page's metadata, or the heading tags. The heading tag h1 is often placed within the header tag.footer, which wraps the reusable bottom matter, often including social media links and copyright information.nav, which wraps the primary navigation links that the visitors use to move around your website.aside, which wraps peripheral content that is only tangentially related to the main content, like what might appear in sidebars.section, which wraps a coherent chunk of content that starts with a heading.article, which wraps a single instance of episodic content, such as a blog post or news story.An oversimplified layout that uses these elements might look something like this:
No browser or web police force will require you to use these elements. Using them will increase the semantic value of your page, making it easier for folks who use screen readers and for search engines to understand the content.
There will be situations in which you want to group content together for readability and for applying styles, but none of the tags above are a good semantic fit. In such occasions, you may use two semantically neutral tags: div and span. Neither imposes a particular meaning on the content they wrap. Browsers by default will render a div as a block element and a span as an inline element.