Introduction
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
<header></header>
<nav></nav>
<main>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
<p></p>
</article>
<section></section>
</main>
<aside>
<h1></h1>
</aside>
<footer></footer>
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.
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.
<article>
<section></section>
<section></section>
<section></section>
</article>
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.
<article>
<section class="a">A</section>
<section class="b">B</section>
<section class="c">C</section>
<section class="d">D</section>
</article>
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;
}
Conclusion
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.