Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

HTML5 structural tags

Notes:

HTML5 structural tags :
W.K.T. HTML 4 has one of the most important generic container element i.e. div.

The div tag is a block level generic container tag, used to group set of block level elements together to create a section on a page. We have to use it only when no appropriate semantic element to be used is available. Div has no semantic meaning; the only way to identify it differently is by using class or id attribute. We know that different developers in different geographical locations will use different class values and id values. Hence HTML5 provides more consistent and semantically meaningful set of structural tags.

header tag:
Used to wrap the header content most commonly appears at the top of a page like logo, tag line, search prompt etc. It’s ok to use more than once a header tag in a page. For example we can also use header tag to represent heading of an article or a section. But header tag cannot be child of other header or footer tag.
It’s a not sectioning element.

footer tag:
Used to wrap the footer content most commonly appears at the bottom of a page like copyright content, other related links etc. It’s ok to use more than once a footer tag in a page. For example we can also use footer tag to represent footer of an article or a section. Footer tag can contain other sectioning elements. But footer tag cannot be child of other header or footer tag.
It’s a not sectioning element.

nav tag:
Used to wrap a section with major navigation links of a current website. Normally you find links in footer also if you want you can use nav for wrapping them too.
It’s a sectioning element.

main tag:
Placed between header and footer to wrap main content of the page. Should not be child of article, aside, header, footer or nav tags.
It’s a sectioning element.

article tag:
Used to contain standalone content of a page , that can be independently re-post able anywhere else such as blog post, images, videos, form post, comments, magazine or news paper article, interactive widgets, etc.. It can be child of section tag.
It’s a sectioning element.

section tag:
A section tag is a thematic grouping of content, with a heading. section tag can be used to create section in a page but it’s not a generic container element like div. It can be used to create sections in an article.
Ex. chapters, tabbed pages, news items etc.
It’s a sectioning element.

aside tag:
A aside tag is used to wrap content that is related to the content around it.
Ex: side bars, ads, groups of nav elements and content that is not related to main content.
It’s a sectioning element.

Interview Questions: