What Is HTML Layout Elements and Techniques

Sites regularly show content in different segments of HTML Layout (like a magazine or a paper).

Example
HTML Layout
HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

HTML Layout

<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
CSS Frameworks

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.

Example
HTML Layout
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.

Example
HTML Layout
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.