16 Aug 2015

New Layout Tags in HTML5

HTML5’s new layout tags allow you to define sections of your blog or web page as “layout regions” without having to use a DIV tag to define them. Your site’s header is encompassed within the header tag, and your navigation or “nav bar” is surrounded by the <nav> tag. You simply use these tags just like you would a DIV tag for your layout—only now they are named for you, so you don’t need an ID unless you want one.

Article
The Article tag is used for the main content of your blog or website. Examples of relevant usage of the Article tag include newspaper articles, forum posts, user comments, and of course blog entries. It is supported by all five major browsers.

Aside
The Aside tag is used to create a “sidebar” of content, usually content that is relevant to the adjacent content. It is supported by all five major browsers. In this example, the burgundy-shaded area on the
left was created with the Aside tag.

Figure
The Figure tag is used to specify content that is contained within the flow of the main content,such as images, diagrams, code, and photos. It is contained within the actual content flow, not outside it, so  its removal should not affect the document’s flow. It is supported by all five major browsers. In the mock-up example shown, the image is within the text content, so a Figure tag is appropriate in this situation.

Footer
The Footer tag denotes content to be placed at the bottom of the page and eliminates the need for a DIV tag to contain this content. It is supported by all five major browsers. To use it, simply place your footer content inside the Footer tag in HTML5.

Header
All content to be included in the header of your blog or web page is now included in the new Header tag. It is supported by all five major browsers.
Share:

1 comment:

  1. I appreciate the effort of the blogger. I have one small question which is related to html5. If you could help me out then it would be really helpful. How is the page structure in html5 is different from html4?
    html5 training in chennai|html5 course in chennai

    ReplyDelete