Layout

HTML Layout Elements

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

HTML5 Semantic Elements

<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 page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. The page layout techniques we’ll be covering in more detail in this module are

Normal flow
The display property
Flexbox
rid
Floats
Positioning
Table layout
Multiple-column layout

Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

to know mor plese visi this link