A website layout is very important to give your website a better look. Professional website layout can be achieved using a combination of HTML, CSS, and JavaScript but you can create at home a layout using HTML tags.
Today I will create a simple layout for a website using HTML and its attributes and we will move a bit further and start learning CSS to style our webpage and make our page looks good.
To understand the HTML layout, we should know first, which information the webpage layout should contain.
Websites display contents in columns (like in newspaper):
Where:
<header> Defines a header for a document or section. Typically contain the site logo or banner.
<nav> The section which is dedicated to links, or navigation. For example the menu of the page.
<main> Defines the main content of the webpage.
<article> Element defines a self-contained composition on the webpage.
<div> Defines a division or a section on the webpage.
<section> Definies section on the webpage.
<aside> It holds additional information.
<footer> Defines a footer for a website or section, and is always on the bottom of the webpage.
HTML Layout example:
<!DOCTYPE html>
<html>
<head>
<title>The title of your website</title>
<meta name="description" content="You can add description of your website here.">
<meta name="author" content="author">
</head>
<body>
<!-- HEADER SECTION -->
<header>
Your website logo or banner.
</header>
<!-- NAVIGATION BAR -->
<nav>
<a href="#">Main page</a>
<a href="#">You can add link here</a>
<a href="#">You can add link here</a>
</nav>
<!-- MAIN BODY -->
<main>
<!-- ARTICLE -->
<article>
<h1>Article Title</h1>
<section>
<h2>Section A</h2>
You can add main text or informations here.
<aside>Additional information.</aside>
</section>
<section>
<h2>Section B</h2>
You can add more contents here.
</section>
</article>
<!-- DIVISIONS -->
<div id="div-container">
<div>Block 1</div>
<div>Block 2</div>
</div>
</main>
<!-- FOOTER SECTION -->
<footer>
FOOTER
</footer>
</body>
</html>Once we have done with basic HTML layout (inserted the upper code into HTML/text editor), we will receive this:
Previously, I planned to show you how to create columns using only HTML (table tag), however, I know now, and also from my experience, the <table> element was not designed to be a layout tool.
The HTML <table> element should represent tabular data. Using this element in your layout can later bring a mess in your code and not always this element displays properly in the browser.
To avoid errors in our code, I added to the HTML document CSS code to create 3 columns.
As you can see below, I used the internal method to insert code CSS to the file (by using an <style> element in the <head> section, which you can see on the top part of the code.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#first-col {
width: 30%;
background: #2a9d8f;
}
#second-col {
width: 40%;
background: #e76f51;
}
#third-col {
width: 30%;
background: #e9c46a;
}
@media all and (max-width: 800px) {
#main {
display: block;
}
#first-col, #second-col, #third-col {
width: 100%;
}
}
</style>
</head>
<body>
<!-- HEADER SECTION -->
<header>
Your website logo or banner. </header>
<!-- NAVIGATION BAR -->
<nav>
<a href="#">Main Page</a>
<a href="#">You can add link here.</a>
<a href="#">You can add link here.</a>
</nav>
<div id="main">
<!-- LEFT SIDEBAR -->
<div id="first-col">
LEFT
</div>
<!-- CENTER MAIN -->
<main id="second-col">
<h1>Main</h1>
<p>You can add main text or informations here</p>
</main>
<!-- RIGHT SIDEBAR -->
<div id="third-col">
RIGHT
</div>
</div>
<!-- FOOTER SECTION -->
<footer>
Footer.
</footer>
</body>
</html>And it displays in the browser now like this:
Main
You can add main text or informations here.
Enjoy coding!
Read also:
The basic structure of an HTML document
How to put an image into HTML code?