Elements such as
<article></article> now perform more as traditional
<div></div> elements with HTML5. These main elements act as macrostructure semantic HTML to help keep additional common HTML tags in proper order and place.
Both of these elements can often be used to manage the same sections and be used interchangeably. However, it is important to keep in mind that the
<article></article> tag is useful for being reusable and it is also considered independently distributable. A
<section></section> tag, on the other hand, is typically used to group more than one piece or section of content.
The header section of a website is typically found at the top of a website. The header of a website will often include meta tag information, keywords, and even imported CSS files or style sheets. The header can also lay out the necessary groundwork for your website layout or design.
<footer></footer> tag operates similar to the
<header></header> tag, except the footer is typically found at the bottom of any web page. The footer of a website typically includes contact information, a site map, and additional links such as ones to social media sites to help tie the website together and boost SEO.
When you choose to use the
<main></main> element tag, you signify the main body of text or content of a website's layout. Only use the
<main></main> tag to host the inner paragraphs, written text, images, and inner content of your website. The
<main></main> tag will always come after the
<header></header> tag has been introduced and prior to the
<footer></footer> tag of any page.
Developing a successful website requires an accessible and updated navigation section. When you are building a website of any kind, you will need to add navigation links to help users properly browse your site. The use of the tag
<nav></nav> helps organize the particular section of a site designated for navigation links. Navigation menus, tables, and indexes are all possible with the
<nav></nav> semantic HTML5 tag.
If you are crafting content and you want to wrap images with text, you can use the
<figcaption></figcaption> tags. The
<figure></figure> tag wraps images around your text content without any additional effort. If you are interested in adding a caption to the image you are implementing onto your page, you can use the
<figcaption></figcaption> tag. An example of how to use the
<figcaption></figcaption> tags is available below:
<figure><img src="http://www.yourimage.com"><figcaption>This is my image caption!
<aside></aside> element will incorporate text that does not belong in the main sections of your website but should still appear in a set area or section.
<time></time> tag is useful if you want to add an automatic date to a section or area of your website.
A full list of all HTML tags can be found directly on the official website of W3 Schools.