HTML Layout: Creating a Simple Page Layout Design

Basic Elements of Website Layouts

A well-made HTML layout improves user experience in two significant ways:

• Simplifies navigation by clarifying the structure
• Makes the design more visually appealing

There are four basic elements you will find in pretty much every page layout design:

Here you can see a simple example of a page layout design that involves various HTML containers, simple styling and an image:

Tags to Use in an HTML Layout

In this section, we will review the HTML elements needed for the HTML layout in more depth with code examples to illustrate them. To understand the way they are used to create page structure, refer to the table above or review the illustration on the right.

To define the HTML container for the header at the top of your layout, use the <header> element:

<header style="height: 50px; width: 100%; background-color: #333; text-align: center;">
 <h1 style="color: white;">I am a header</h1>
</header>

The function of <header> might seem similar to that of the headings. However, the <header> defines the title of the whole site, not a separate article. It can also include other introductory information, such as a logo.

The <nav> element specifies a customizable navigation bar for your website. It is not mandatory to include – however, having a navigation bar allows your users to navigate the website in a simpler and quicker manner. A navigation bar is usually displayed below the <header>:

<nav>
  <ul>
    <li><a href="https://www.bitdegree.org/tag/interactive-learning">Gamified Courses</a></li>
    <li><a href="https://www.bitdegree.org/tutorials">Tutorials</a></li>
    <li><a href="https://www.bitdegree.org/course/learn-solidity-space-doggos">Space doggo course</a></li>
    <li><a href="https://www.bitdegree.org/tag/game-dev">Game Dev Courses</a></li>
  </ul>
</nav>

The <aside> element works quite similarly to <nav>. However, it defines space on the side and can function as a sidebar. However, you can upload content there, too:

<aside>
	<p>Many movies and graphic novels have been based on this Greek hero.</p>
</aside>

Note: it is rather common to use the <aside> element to display various advertizing banners.

You can use the <section> tag to define a separate content section in your website. This element has no restrictions related to the type of content, so you can add anything to it – text, pictures, videos, etc.:

<section>
  <h1>Section Heading</h1>
  <p>The section tag can contain any elements.</p>
  <img src="image.png" alt="section example">
</section>

If you want to write a big article or a story, the <article> element is your best option. It separates a huge chunk of the website and allows you to put the article there neatly:

<article>
  <h1>Fun Fact</h1>
  <p>Fun fact: most of the fun facts on the Internet are not actually fun.</p>
</article>

The <footer> element creates space for footnotes on your web page. It may contain the least important information or be used as an HTML container for copyright or contact data:

<footer style="width: 100%; height: auto; border: 1px solid;">
  <h1>This is a footer</h1>
  <p>Copyrights are defined here</p>
</footer>

Using the <style> element allows you to design any HTML container. Using inline styling is essential for creating a striking and outstanding page layout design:

<style>
  header, footer {
      padding: 1em;
      color: white;
      background-color: #007196;
      clear: left;
      text-align: center;
  }
</style>

Note: keep in mind that colors are very important in the design.

HTML Layout: Useful Tips

• Don't use tables to create HTML layouts! While it might have been a popular method in the past, it's not recommended now as it slows down the rendering in the browser and complicates redesigning later.
• You can also create website layouts using CSS floats or flex containers. Floats are simpler to use, while flex containers offer more design possibilities.