How Semantic HTML, CSS Flex box and Grid layout are used to structure and layout web pages


In the early days of the Internet, HTML was introduced as a markup language for sharing scientific and other informative content. It was not particularly concerned with the aesthetics of the pages. Later, as internet usage increased, designers began to make their pages more visually appealing. Since this was never the intended purpose of HTML, programmers were required to implement workarounds.

In recent years, the web design industry has undergone a tremendous transformation. Due to the diversity of consumers and search engine optimization, coding standards have changed. Semantic HTML and more convenient CSS properties like flexbox and grid layout are often used now. This report will describe how they are used to structure and layout web pages, as well as the technologies and procedures involved in delivering web-based content using semantic HTML, CSS Flexbox, and Grid.

Semantic HTML

Semantic refers to the meaning of a code in programming. Prior to Semantic HTML, the elements had no significance in terms of what they performed or what content they contained. As a general-purpose element, <div> was used to construct everything from headings to footers to articles. With semantic, we can replace <div> with more descriptive elements such as the <header> tag which represents the main header of a web page, while the <nav> tag defines the navigation links. Likewise, the <section> tag is used to define an independent section of a web page, whereas the <article> is used to define an independent item of content within a section. This will inform developers and browsers of the exact function and content of the element.
Some advantages of semantic HTML include:

  • Screen readers can use it to help visually impaired users to navigate a page
  • Finding blocks of meaningful code is significantly easier than searching through endless divs
  • Help the developer to identify the type of data that will be populated

An example of Semantic HTML is as follows

A Wireframe showing Semantic HTML.
Vlado Pavlik (2022)

CSS Flexbox

The primary objective of the flex configuration is to provide the container with the ability to adjust the width/height and order of its objects to best utilize the available space, mostly to accommodate to all kind of display devices and screen sizes. A flex container expands or contracts its contents to accommodate available space or to prevent excess.

The CSS Flex box paradigm relies on two fundamental concepts: the flex container and the flex elements. The flex container serves as the parent element for one or more flex elements. It is defined using the property display: flex;. The flex items are the child elements within the flex container, and they can be aligned and distributed using a variety of CSS properties, including justify-content, align-items, and flex-basis.

A diagram explaining flexbox terminology.

A diagram explaining flexbox terminology.
Chris Coyier (2013)

Simple case

A container is set to display: flex;, which turns the three child items into flex items. To evenly place items on the main axis, justify-content is set as space-between. The left and right items are level with the flex container's sides and spaced evenly. The default align-items value is stretch, so the items stretch on the cross axis. The items extend to the height of the flex container, making them look as tall as the tallest item.

A diagram explaining flexbox terminology.
Chris Coyier (2013)
article {
    display: flex;
    justify-content: space-between;

Grid Layout

The CSS Grid layoyt is a two-dimensional grid system that facilitates the creation of complicated, multi-column layouts by web developers in a straightforward manner. It is a powerful and adaptable instrument that provides precise control over the positioning and sizing of components within a grid. This control can be exercised in a variety of ways.

The grid is created using a container element that is defined with the display: grid; property. After that, rows and columns are created within the container by utilizing the grid-template-rows and grid-template-columns attributes, respectively. These characteristics determine the dimensions of the matrix as well as the number of rows and columns.

The grid-row and grid-column properties are used to describe the grid items, which are the individual components that are positioned within the grid. These properties specify the row and column that the item should be positioned in, as well as the number of rows or columns it should cover.

Simple case

The following example shows a three column, two row grid with elemets spaning to more than one grid track.

A diagram showing positioning items which span more than one grid track..
Rachel Andrew
    <section class="a">A</section>
    <section class="b">B</section>
    <section class="c">C</section>
    <section class="d">D</section>
article {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
.a {
    grid-column: 1 / 3;
    grid-row: 1;
.b {
    grid-column: 3 ;
    grid-row: 1 / 3;
.c {
    grid-column: 1 ;
    grid-row: 2 ;
.d {
    grid-column: 2;
    grid-row: 2;


In conclusion, semantic HTML, CSS Flex box, and Grid layout are indispensable technologies for developing websites that are responsive, contemporary, and aesthetically stunning. Developers are able to create web sites that are readily maintained and accessible when they use semantic HTML, and CSS Flex box and Grid layout provide layout techniques that are both flexible and powerful, enabling developers to create user interfaces that are both complicated and dynamic.

It is essential for web designers and developers to have an excellent understanding of the aforementioned technologies and to maintain a high level of knowledge of the most recent developments in recommended procedures and strategies. This will not only lead to an improvement in the standard of their work, but it will also assist them in maintaining their competitive edge in the quickly developing industry of web design.