Skip to main content

HTML Layout Elements and Techniques

HTML layout elements are used to organize and structure content.

These elements include:

  • <header>: Defines a header for a document or a section. Typically used for a page's title, logo, navigation, and search bar.
  • <nav>: Defines a section of navigation links.
  • <main>: Defines the main content of a document or a section.
  • <article>: Defines a self-contained section of content, such as a blog post or news article.
  • <section>: Defines a section of a document or a page, usually with a heading.
  • <aside>: Defines content that is tangentially related to the main content, such as a sidebar or related links.
  • <footer>: Defines a footer for a document or a section.
  • <div>: Defines a generic container for HTML elements.

These elements can be used in combination with CSS styles to create a wide variety of layout designs for web pages.

HTML Layout Techniques​

There are several techniques for creating HTML layouts, some of which include:

Using CSS Grid​

CSS Grid is a powerful layout tool that allows you to create complex layouts with a grid system. You can define rows and columns, as well as grid gaps, and place elements in specific grid areas.

As an example:

Editor

Loading...

In this example:

  • We're assigning each element to its corresponding grid area using grid-area.
  • We're also creating a nested grid for the main content area with display: grid, and specifying its own rows and columns with grid-template-rows and grid-template-columns.
  • We're then using grid-template-areas to define the areas for the main content and sidebar.

Using CSS Flexbox​

CSS Flexbox is a layout mode that allows you to arrange elements along a single axis or in multiple dimensions. It provides a flexible way to create responsive layouts.

As an example:

Editor

Loading...

In this example:

  • We're using the .container div as our flex container and specifying the flex direction to be column.
  • We're also setting the height to 100vh so that the layout fills the entire viewport.
  • Then we're using flexbox to create the main content area, with display: flex and flex: 1 to make it take up the remaining space. - We're also using flex-direction: row to put the sidebar and main content elements side by side.

Using Bootstrap​

Bootstrap is a popular CSS framework that provides pre-defined CSS classes for creating responsive layouts. It includes a grid system, as well as pre-defined styles for common UI elements such as buttons, forms, and navigation menus.

Using CSS Floats​

Floats are a legacy layout technique that are still widely used today. By using the float property, you can move elements to the left or right of their parent container, allowing you to create multi-column layouts.

As an example:

Editor

Loading...

In this example:

  • We're using the .container div as our container and setting a maximum width of 960 pixels with margin: 0 auto to center it on the page.
  • For the header and footer, we're adding clear: both to ensure that they are displayed below any floated elements.
  • For the main content area, we're adding overflow: hidden to clear any floated elements and prevent the container from collapsing.
  • For the sidebar, we're using float: left to make it float to the left and setting a width of 200 pixels.
  • For the main content, we're using margin-left: 220px to ensure that it's positioned next to the sidebar.

Using CSS Positioning​

CSS Positioning allows you to position elements in specific locations on the page. You can use properties such as position, top, bottom, left, and right to position elements relative to their parent container or the viewport.

As an example:

Editor

Loading...

In this example:

  • We're using the .container div as our container and setting a maximum width of 960 pixels with margin: 0 auto to center it on the page.
  • For the header and footer, we're using position: relative to ensure that they stay within the container and setting top: 0 and bottom: 0 respectively to keep them at the top and bottom of the container.
  • We're also setting a width of 100% and adding some basic background colors and padding.
  • For the main content area, we're adding position: relative and overflow: hidden to clear any floated elements and prevent the container from collapsing.
  • For the sidebar, we're using position: absolute to position it relative to the container and setting top: 0 and left: 0 to keep it at the top left corner.
  • We're also setting a width of 200 pixels and adding some basic background colors and padding.
  • For the main content, we're also using position: absolute and setting top: 0 and left: 220px to ensure that it's positioned next to the sidebar.