Hey guys,
I was trying to search here in the forum and in the support about the element tags but couldn’t find. Anyone can give a hand and explain what they are used for and why it is important to set them? Thanks 
Hey @Daniel_Sun
The tags are a list the HTML5 tags available in Webflow.
The HTML5 spec is a big subject so i’ll start by giving you a few resources I found helpful.
http://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-section-element
http://www.w3.org/TR/html-markup/elements.html
This gives a list of html elements and how they should be used. It also has list the default appearance of these elements.
This blog goes through the HTML5 elements in a series of posts.
The HTML5 elements are designed to give more semantic meaning to the generic <div>. Before HTML5 you would denoted a navigation element like this;
<div id="nav">Navigation HTML Here</div>
Now with HTML5 we use the nav element <nav></nav>
The tags let the browser and assistive technologies navigate your page more easily. For instance the <main></main> tag tells these technologies were the beginning of the main content is. Allowing a user to skip over other content and get to the main point of the page. Therefor there should only be one main element on the page.
The nav element is used to wrap your site internal navigation. Best practice is to keep any external links out of these elements. You can have multiple nav elements on a page (for example at the top and bottom of the page).
The blockquote is used to reference quotes.
The aside is used to wrap content that is a side thought or point that is related to the main content.
The address is used to wrap contact information listed on the page.
A figure is used to wrap elements that are being talked about by the content. This is most commonly used on images, when the image is a picture of whatever is being discussed. This is usually used with the figcaption element which unfortunately isn’t in Webflow.
The Header, Footer, Article, and Section can be confusing because they can be used in more ways then their names imply. This is one of the biggest criticisms of HTML5. (I’ll give an example at the end with these tags in use)
The Header is used to mark the beginning of an independent section on a page and all the content used to describe that section. Used fully you will have multiple Headers per page. (essentially any time you use a <h1> to <h6> tag). It also can be used to wrap a table of contents and navigation elements.
The footer is used at the end of any independent section. I haven’t figured out exactly how to use this consistently. For sure use it to wrap the footer of the page. It could also be used to wrap the author information at the end of an article, or the publication date of a user comment.
The Section and Article are very similar. They denote independent sections and should have an <h1> to <h6> tag
I use sections for higher level layout. To denote a featured product list section and a contact form section. I use the article to denote more specific items like individual products or blog posts. There is a lot of discussion on how to use these elements because they can be nested within each other and used for a variety of things.
Example
<body>
<header>
<nav></nav>
<h1>Main Title</h1>
<p>Tagline describing the page</P>
</header>
<main>
<section>
<header>
<h2>Product Catalog</h2>
</header>
<section>
<header>
<h3>Shoes</h3>
</header>
<article>
<header>
<h4>Nike</h4>
</header>
<p>product description</p>
<section>
<header>
<h5>Comments</h5>
</header>
<article> comment </article>
</section>
</article>
<article>
<header>
<h4>Adidas</h4>
</header>
<p>product description</p>
</article>
</section>
</section>
</main>
<footer></footer>
</body>
There are many interpretations of the HTML5 spec. The most important thing is the use the elements in a consistent manner.
3 Likes
Thanks for the clarifying information @Davidn, I will have a look at the links. I didn’t know it was quite a big subject! Thanks again