: It represents the footer of a section/document.
To learn more about HTML semantic elements, click here .
HTML layout techniques
The HTML layout techniques assist in creating a multicolumn layout and the techniques may be chosen from one of the following provided here.
CSS frameworks
CSS frameworks would assist in creating a responsive and attractive layout of a web page. These frameworks include various built-in classes equipped with styles thus you do not need to create your own styles. Among various CSS frameworks, W3.CSS and Bootstrap are widely used.
How to use the W3.CSS framework
It is a well-defined modern CSS framework supposed to provide high functionality of styles for a web page. Its purpose is to provide a diverse alternative to the Bootstrap framework. To use the w3.css class, you have to just insert the following link to your HTML page.
<link rel = “stylesheet” href = “https://www.w3schools.com/w3css/4/w3.css” >
How to use the Bootstrap framework
The bootstrap framework is another CSS framework that also has built-in classes to provide various kinds of styles to HTML pages. To use the Bootstrap framework, you have two possibilities:
– download Bootstrap
– use the CDN link directly in your HTML document (recommended)
The following CDN links assist you in importing Bootstrap instances to style your web page.
Paste the following link in your head tag (recommended)
<link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css” >
Place the following script at the end (recommended) of the tag of the document
<script src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” ></ script
By placing the above links, you would be able to use various Bootstrap classes to style your HTML page accordingly.
CSS float
This technique is quite helpful in placing HTML elements. By default, the elements are placed one after another. However, you can use the float/clear property to manipulate the default placement of elements. The clear property is used to break the continuity of the float property, such that if you want to place the element on the next line then you have to use the clear property.
The functionality of CSS float and clear properties is easy to learn but tricky to implement. The following example refers to the usage of float and clear properties.
HTML
The above HTML code creates three divisions with class names “prim1 “, “prim2 ” and “prim3 “.
CSS
.prim1 {
float : left ;
width : 33% ;
background-color : orange ;
}
.prim2 {
float : left ;
width : 33% ;
background-color : lightskyblue ;
}
.prim3 {
clear : left ;
width : 66% ;
background-color : lightgreen ;
}
The main ingredient of this example is the CSS that shows how the float and clear properties are used. The float=”left ” property is used in the first two divs whereas the third div has the clear=”left “.
<img alt="Text Description automatically generated" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/text-description-automatically-generated-2.png" data-lazy- height="553" src="data:image/svg xml,” width=”766″>
Output
<img alt="Graphical user interface Description automatically generated with low confidence" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/graphical-user-interface-description-automaticall-1.png" data-lazy- height="127" src="data:image/svg xml,” width=”859″>
Flexbox layout
The CSS flexbox (flexible box) module assists in creating a flexible layout structure without using the float or any positioning element. Moreover, the elements can be arranged in a row or a column (one dimension only). To use the CSS flexbox technique, you have to add class=”flex-container ” to the element and the “display ” property of flex-container must be set to “flex “. The child elements do not require any class, they are just adjusted with the parent class.
The example provided below better demonstrates the usage of a flexible layout.
.flex-container{
display: flex;
}
<div class = “flex-container” >
<div HTML </ div
<div CSS </ div
</ div
In the above code, a div is created with class=”flex-container ” and its display property is set to “flex” .
<img alt="Text Description automatically generated" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/text-description-automatically-generated-3.png" data-lazy- height="457" src="data:image/svg xml,” width=”680″>
Output
<img alt="Shape Description automatically generated with low confidence" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/shape-description-automatically-generated-with-lo.png" data-lazy- height="169" src="data:image/svg xml,” width=”709″>
Grid layout
The grid layout allows arranging various child elements in a presentable manner. The grid layout offers the arrangement in two dimensions (with row and column simultaneously). To use this, the class=”grid-container ” is used for the parent element whereas the class=”grid-item ” is used for the child elements. Moreover, the display property of the grid container may be set to the grid or to inline-grid .
.grid-container{
display: grid;
}
<div class = “grid-container” >
<div class = “grid-item” > HTML </ div
<div class = “grid-item” > CSS </ div
<div class = “grid-item” > JavaScript </ div
</ div
In the above code, the class of parent div is set to “grid-container ” and the child items have classes “grid-item “.
<img alt="Text Description automatically generated" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/text-description-automatically-generated-4.png" data-lazy- height="480" src="data:image/svg xml,” width=”655″>
Output
<img alt="A picture containing graphical user interface Description automatically generated" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/a-picture-containing-graphical-user-interface-des.png" data-lazy- height="292" src="data:image/svg xml,” width=”856″>
The output shows the primary difference between grid and flex layout. The grid layout has been expanded in multi-dimension whereas the flex layout arranges the elements in a single dimension.
Conclusion
HTML layout elements and HTML layout techniques provide the functionality to design a web page in a presentable manner. For this, various HTML semantic elements and HTML layouts are provided in this article. The semantic elements best serve the purpose of their usage and thus are considered to be an important ingredient of the web page. The HTML layout techniques may include CSS frameworks (Bootstrap or W3.css), CSS float, CSS flexible box, and CSS grid.
