Sites regularly show content in different segments of HTML Layout (like a magazine or a paper).
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> elementYou can read more about semantic elements in our HTML Semantics chapter.
HTML Layout Techniques
There are four unique methods to make multicolumn formats. Every method has its upsides and downsides:
- CSS framework
- CSS float property
- CSS flexbox
- CSS grid
Assuming you need to make your format quick, you can utilize a CSS system, as or Bootstrap.
CSS Float Layout
It isn’t unexpected to do whole web formats utilizing the CSS drift property. Buoy is not difficult to learn – you simply need to recall how the buoy and clear properties work. Burdens: Floating components are attached to the report stream, which might hurt the adaptability. Get familiar with glide in our CSS Float and Clear chapter.
CSS Flexbox Layout
Utilization of flexbox guarantees that components act typically when the page design should oblige distinctive screen sizes and diverse showcase gadgets.
Study flexbox in our CSS Flexbox part.
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.
Learn more about CSS grids in our CSS Grid View chapter.