Layout is that the design of web page how should looks the webpage. When you create the professional web page then you must follow the design and set the modules. We will place the modules according to HTML layouts. Latest update of html is html5 and define the layouts with elements. For example, we define all elements below.
- <header> – Defines a header for a document or a section
Header section is always in top of the web page and also define the document section or logo of company and also put the ads in header section.
- <nav> – Defines a container for navigation links
Nav element is use to create the menu or navbar for define link or different pages of your website. Nav is use after the header section. Professional style is that to define the navbar in top of header.
- <section> – Defines a section in a document
Section is defining the body of website and also use to define the different section for identifying specific area of website. Section is using for parts of different codes of area in website.
- <article> – Defines an independent self-contained article
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
- <aside> – Defines content aside from the content (like a sidebar)
Content show in left side or right side then you will use the aside element. it is show sidebar in which subscriber, link of different social website which you can follow or like the pages.
- <footer> – Defines a footer for a document or a section
Footer is show in bottom of the website which is show to detail of copy right and also show the owner of the website.
- <details> – Defines additional details
The <details> tag specifies additional details that the user can view or hide on demand. The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag. The content of a <details> element should not be visible unless the open attribute is set.
- <summary> – Defines a heading for the <details> element
The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.
We are show the layout of professional design look like this templet. You can easy set the responsive of every device for every device how show the website.