HTML Layout Elements
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
header
main
nav
article
section
aside
address
footer
Using these elements isn’t as complicated as it might appear at first glance, and most are fairly self-explanatory. We’ll make a quick pass over each new element, and then draw up an HTML template you can use these new tags to add rich semantic meaning to your markup.
List of all New HTML 5 Elements – W3School
<header>
The header element is used to contain the content that appears at the top of every page of your website: the logo, tagline, search prompt, and possibly a navigational menu. In most cases, the header element is best positioned as a direct descendant of the body element, but it’s also ok to place it inside the main element if you prefer.
<main>
Use the main element between header and footer elements to contain the primary content of your web page. The main element cannot be a descendant of an article, aside, header, footer, or nav element. Instead, it should be a direct descendant of the body element. Think of it as the direct replacement for the div id=”main” you’ve used in the past to wrap up your entire page contents.
It’s also ok to use more than one main element on a webpage. For example, if your blog homepage includes your five most recent posts, it would be appropriate to wrap each post in it’s own main element – or you could wrap each in article tags.
<nav>
Navigational menus are commonly placed at the top of a web page, in a sidebar, or in the page footer. Wherever you happen to place a navigational menu, wrap it in nav tags. Note that you don’t need to use nav tags for every link, just for blocks of links that provide either sitewide navigation or navigation for a specific part of a website.
<article>
If your website includes blog posts, articles, or any other content that could just as well appear on another website as syndicated content, wrap that content in an article post. You can use an article element just about anywhere other than nested within an address element, but in most cases an article element will be a direct descendant of a main element or of a section element that is a direct descendant of a main element.
<section>
The section element is used to identify content that is a major sub-section of a larger whole. For example, if you’ve posted a long-form ebook in HTML format, it would be reasonable to wrap each chapter in a section element. Likewise, if you have a sidebar (semantically wrapped in aside tags) that contains four sections – ads, a search prompt, related posts, and a newsletter signup form – it would be ok to wrap each of these four sections in section tags since a written outline of the sidebar contents would include a line item for each of the four sections.
There is some confusion about when to use a section and when to use a div. Here’s a good rule of thumb to help you know when to use each:
- Use a div if you’re wrapping up some content purely to make it easier to style the content or to make it easier for some JavaScript to get ahold of it.
- Use a section if you would list the content as an item when writing out an outline of the document.
<aside>
If your website contains information that isn’t directly related to the main content of the page, it would be appropriate to wrap that information in aside tags. For example, if you write a post that includes some technical terms, and you add definitions for those terms in a sidebar, it would make sense to wrap those definitions in aside tags. It is also common for the entire sidebar of a blog-type website to be wrapped in aside tags to make it clear that the sidebar is not part of the primary content of the page.
<address>
The address element provides contact information for the nearest parent article or body element that contains it. Use the address element inside an article to provide contact information for the article’s author. Use it outside of an article in the main or footer elements, or as a direct descendant of the body element, to provide contact information for the website’s owner.
<footer>
The footer appears at the bottom of a section of a document. Typically, the footer is a direct descendant of the body element, but it can also be used within a main element, a section, or an article. The most common use of the footer element is to place it at the bottom of an HTML document to contain things like a copyright notice, links to related content, address information about the owner of the website, and links to administrative things like privacy policies and website’s terms of service.
Code :
Output :
 |
| Layout Design |
