HTML Layouts - SwatiMaurya08/html-notes GitHub Wiki

Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

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.

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

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff.

The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level.

Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.