Scribd
Upload
30 views7 pages

HTML Layout

The document discusses HTML layout elements and techniques for creating multicolumn page layouts. It describes semantic HTML elements like header, nav, section, article, aside, footer that define parts of a page. It also explains four techniques for multicolumn layouts: CSS frameworks, floats, flexbox and grid, detailing the pros and cons of each.

Uploaded by

abhishek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views7 pages

HTML Layout

The document discusses HTML layout elements and techniques for creating multicolumn page layouts. It describes semantic HTML elements like header, nav, section, article, aside, footer that define parts of a page. It also explains four techniques for multicolumn layouts: CSS frameworks, floats, flexbox and grid, detailing the pros and cons of each.

Uploaded by

abhishek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML LAYOUT

HTML LAYOUT
● Websites often display content in multiple columns (like a magazine or a
newspaper).
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:

● <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.
HTML Layout Techniques
● There are four different techniques to create multicolumn layouts. Each technique
has its pros and cons:
○ CSS framework
○ CSS float property
○ CSS flexbox
○ CSS grid

CSS Frameworks
If you want to create your layout fast, you can use a CSS framework, like
Materialize.css or Bootstrap.
CSS Float Layout
● It is common to do entire web layouts using the CSS float property. Float is
easy to learn - you just need to remember how the float and clear properties
work. Disadvantages: Floating elements are tied to the document flow, which
may harm the flexibility.
CSS Flexbox Layout

● Use of flexbox ensures that elements behave predictably when the page
layout must accommodate different screen sizes and different display
devices.
CSS Grid Layout
● The CSS Grid Layout Module offers a grid-based layout system, with rows
and columns, making it easier to design web pages without having to use
floats and positioning.

You might also like