There is a special kind of HTML element called a semantic element, it defines different parts of the web page. Semantic elements, such as header, defines the top head portion of the web page. These elements are clearly defined by their meaning and how they are used. Non-semantic elements are not clearly defined such as a < div > it can have multiple meanings. A semantic web allows communities to share, use, and reuse data across platforms. Below are some examples of semantic elements and how they can be used.
< section > typically defines a section, in other words it is a grouping of content used for chapters, introductions, contact information etc.
< article > specifies independent content, used for blog posts, user comments, product cards etc.
< header > the container for presenting content, used for logos, icons, heading elements etc.
< footer > defines the footer for the document, used for copyright information, contact information, sitemap, back to top links, etc.
< nav > defines a set of navigational links
< figure > specifies self- contained content, used for illustrations, diagrams, photos, etc.
< figcaption > defines a caption for a < figure > element.
Now that semantic elements are laid out in the HTML, you need to display them with css. There are several techniques on how to create a multicolumn layout. These include css framework, css float property, css flexbox, and css grid. Each has their advantages however the grid-based layout system is a fairly new development that allows the coder to use rows and columns to design web pages. Making the process simpler without having to use float and positioning. Overall, HTML semantic elements and css work together to complete a web page.