HTML Layout Elements and Techniques

HTML Layouts

HTML Layouts: Have an efficient and stylish organization of the elements in an HTML site page. It makes the web-page better and gives a generally visual appeal to the users. The users can go through the different columns and accomplish a smooth and basic flow of data. It normally describes the manner by which a page can be arranged.

Sites often show content in numerous columns (like a magazine or a newspaper).

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">Islamabad</a></li>
      <li><a href="#">Istanbul</a></li>
      <li><a href="#">London</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>Islamabad</h1>
    <p>Islamabad is the capital city of Pakistan. It is the most populous city in the Pakistan.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

In this tutorial, you will learn-

In this article, you will learn-

1 HTML Layout Elements
2 HTML Layout Techniques
3 CSS Frameworks
4 CSS Float Layout
5 CSS Flexbox Layout
6 CSS Grid Layout

HTML Layout Elements

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

<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 procedures to create multicolumn layouts. Every procedure has its pros and cons:

CSS framework
CSS float property
CSS flexbox
CSS grid

CSS Frameworks

In the event that you need to create your layout fast, you can use a CSS framework.

CSS Float Layout

It is common to do whole web layouts using the CSS float property. Float is not difficult to learn – you simply need to recall how the float and clear properties work. Disadvantages: Floating elements are attached to the document flow, which may harm the adaptability.

CSS Flexbox Layout

Use of flexbox guarantees that elements act typically when the page layout should accommodate different screen sizes and distinctive presentation gadgets.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it simpler to design pages without using floats and positioning.

HTML Block and Inline Elements

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.