Layout

Page layout is the part of graphic design that deals in the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.wikipedia

HTML Layout Elements

• <header> - Defines a header for a document or a section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained content
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section
• <details> - Defines additional details that the user can open and close on demand
• <summary> - Defines a heading for the <details> element

Page Layout Information:

• Header: The part of a front end which is used at the top of the page. <header> tag is used to add header section in web pages.
• Navigation bar: The navigation bar is same as menu list. It is used to display the content information using hyperlink.
• Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added into the page.
• Content Section: The content section is the main part where content is displayed.
• Footer: The footer section contains the contact information and other query related to web pages. The footer section always put on the bottom of the web pages. The <footer> tag is used to set the footer in web pages.

and If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

What is CSS framework

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.

Two notable and widely used examples are Bootstrap and Foundation.

CSS frameworks offer different modules and tools:

• reset style sheet
• grid especially for responsive web design
• web typography
• set of icons in sprites or icon fonts
• styling for tooltips, buttons, elements of forms
• parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
• equalizer to create equal height content
• often used CSS helper classes (left, hide)
• Bigger frameworks use a CSS interpreter like Less or Sass. wikipedia

  you can read more about layout in this book Ch. 15, “Layout” (again; repeat of Class 4 reading)