Javatpoint Logo
Javatpoint Logo

HTML Layouts

HTML layout specifies a way in which the webpageis arranged.


HTML Layouts

Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a webpage.

  • <header>: It is used to define a header for a document or a section.
  • <nav>: It is used to define a container for navigation links
  • <section>: It is used to define a section in a document
  • <article>: It is used to define an independent self-contained article
  • <aside>: It is used to define content aside from the content (like a sidebar)
  • <footer>: It is used to define a footer for a document or a section
  • <details>: It is used to define additional details
  • <summary>: It is used to define a heading for the <details> element

HTML Layout Techniques

You can use the following methods to create multicolumn layouts:

  • HTML tables
  • CSS float property
  • CSS framework
  • CSS flexbox

HTML Tables

HTML tables are not recommended for your page layout. The <table> element is designed to display tabular data. It is not good for a layout. It will complicate your code and make it very difficult to redesign your website after sometimes.

CSS Frameworks

CSS provides many frameworks like W3.CSS, Bootstrap etc. to create your layout fast.

CSS Float

You can create an entire web layout using CSS float property.

Advantage: It is very easy to learn and use. You just learn how the float and clear properties work.

Disadvantage: Floating elements are tied to the document flow, which may harm the flexibility.

Example:

Test it Now

CSS Flexbox

Flexbox is a new layout mode in CSS3.

Advantage: It ensures that the page layout must accommodate different screen sizes and different display devices.

Disadvantages: It does not work in IE10 and earlier.

Example:

Test it Now
Next TopicHTML Responsive




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials