In this article, I provide simple code for a 2-column webpage that does not use a table, but does use some of the latest HTML5 semantic elements. This will be a template with a header using the <header> tag, a footer using the <footer> tag, a main content section using the <main> tag, and an aside section using the <aside> tag.
If you're new to coding HTML (HyperText Markup Language), you may not know that you can create a webpage by simply typing html tags into a text file and saving the file with the .htm extension. Note: do not use a WYSIWYG word processor because these applications insert many of their own formatting tags. Use a basic ASCII text editor like Windows Notepad located in the accessories group.
After you have saved the file, double-click on the file name, assuming the file associations are configured correctly on your computer, the webpage will open in your browser.
One nice thing about this design, besides the fact that it uses minimal html code, is that it creates a fluid layout. With a fluid layout the sections of the webpage grow and shrink, but stay aligned as the size of the users browser window changes.
Here are the steps to code your 2-column fluid webpage layout:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> </head> <body> </body> </html>
1. Type in the basic html tags required to create a webpage. These tags define the two sections of a webpage, the head sction and the body section. The <!DOCTYPE html> tag tells the browser to interpret this code as html5. The <html lang="en"> tag tells the browser that the language is English. The <meta charset="utf-8" /> tag tells the browser what character encoding the webpage uses.
<header> HEADER </header>
2. Between the <body> and </body> tags, type in the header tags. The header tags define a section at the top of the page that typically includes the site logo and the site name.
<main> MAIN<br /> She found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof. There were doors all around the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. </main>
3. Just below the header tags, type in the main tags. The main tags define the main content section of the webpage. In this example I have included some text just to fill the space.
<aside> ASIDE<br /> She found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof. There were doors all around the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. </aside>
4. Just below the main tags, type in the aside tags. The aside tags define an aside section. An aside section can be used to include content which is a slight departure form the main content, but still related. Again, I have included some text just to fill the space.
<footer> FOOTER </footer>
5. Just below the aside tags, type in the footer tags. The footer defines an area at the bottom of the page that often contains the sites copyright notice along with links to other pages like the sites About Page, Privacy Policy, and Contact Form.
Now I wish this was all the code we needed, but to make the webpage work more usefully you'll need to paste the style code block shown below into the head section of your webapge. It goes between the <meta charset="utf-8" /> tag and the </head> tag.
<style>
header, main, aside, footer
{
border-style:solid;
padding:4px;
margin:0px;
}
main
{
display:table-cell;
width:70%;
}
aside
{
display:table-cell;
width:30%;
}
</style>
It's not really necessary for you understand style code at this point, however, the style code creates a border around each section and causes the main and aside sections to align side-by-side.
Shown below is the entire code for this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
header, main, aside, footer
{
border-style:solid;
padding:4px;
margin:0px;
}
main
{
display:table-cell;
width:70%;
}
aside
{
display:table-cell;
width:30%;
}
</style>
</head>
<body>
<header> <!-- Defines the header for the document -->
HEADER
</header>
<main> <!-- Defines the main content section -->
MAIN<br />
She found herself in a long, low hall, which was lit up by a row of
lamps hanging from the roof. There were doors all around the hall, but
they were all locked; and when Alice had been all the way down one side
and up the other, trying every door, she walked sadly down the middle,
wondering how she was ever to get out again.
</main>
<aside> <!-- Defines an aside section -->
ASIDE<br />
She found herself in a long, low hall, which was lit up by a row of
lamps hanging from the roof. There were doors all around the hall, but
they were all locked; and when Alice had been all the way down one side
and up the other, trying every door, she walked sadly down the middle,
wondering how she was ever to get out again.
</aside>
<footer> <!-- Defines the footer for the document -->
FOOTER
</footer>
</body>
</html>
You'll learn more if you manually type this text into a text file, however you may just cut-and-paste the code into a text file. Don't for get to save the file with the .htm extension. After double-clicking on the filename to text the file, you can open it in the text editor again and enter your specific content.
More HTML Code:
• Semantic (X)HTML: Markup with Meaning
• How to Write and Run HTML
• Use fieldset to Organize Form Elements
• The Font Tag
• Webpage DOCTYPE Declarations Explained
• HTML Image Basics
• HTML Definition List
• Radio Button Basics
• Introduction to HTML
• Code For a Basic 2-Column Fluid Webpage Layout