Semantic Markup

Semantic Markup

A semantic element clearly describes its meaning to both the browser and the developer.

non-semantic elements: <div> and <span> - Tells nothing about its content.

semantic elements: <form>, <table>, and <article> - Clearly defines its content.

While HTML has included semantic markup since its inception, HTML5 introduced even more semantic tags such as <section>, <article>, <footer>, <nav>, <aside>, <mark>, and <time>. All of these semantic tags make it clearer what information is on the webpage and its importance.

You might have seen some web pages mashup with <div> and <span> tags, which give no information on what that part of the page is about. However, using semantic markup, developers can provide information to search engines, crawlers, or other developers about what that part of the page is about.

The following HTML5 tags can be used in the place of <div> tags to break your page content into meaningful parts.

• <header> — This element provides introductory content for a section, article, or entire web page.

• <nav> — Navigation menu links would all be placed in a <nav> tag.

• <main> — The body of a page should go in the <main> tag. There should be only one per page.

• <article> — This element represents an independent article on a web page. For example, a blog post.

• <section> — The <section> element is a way of grouping together nearby content of a similar theme.

• <aside> — This element represents content that’s less important. It’s mostly used for sidebars.

• <footer> — The <footer> element is at the base of a page or section. It might include contact information and some site navigation. 

• There are many more tags…