We know that HTML is all about organizing content. What is the best way to do it, if not by creating a layout? Today, we will see how to use some HTML tags to give a layout to your page. Dive in with me in this HTML layout tutorial.
In this post, we assume you already grasp the basics of HTML. In case you need a refresher, don’t panic – just read this HTML Basics Tutorial. Oh, and did you know we also have a Full Stack Development Course? Start from the beginning here.
What is an HTML Layout?
Alright, before we start creating some layout we should understand what layout is. In short, “layout” is the word you use to define how content is arranged on your page. You may have a menu on the top of your page, a huge text body at the center, and a footer at the bottom. In addition to that, you may also have a sidebar, or a picture slideshow, or even a pop-up window for privacy settings.
All of that is part of the HTML layout. However, it is something we can’t accomplish with HTML alone: we need CSS as well. And, obviously, we can’t do that just with CSS, we need to work with both languages.
So, think of the layout as grouping pieces of content together, in a way that is reasonable to you. For example, you should group together all the items that are part of the menu. That’s because they are all part of the same thing, the same group.
Layout is grouping pieces of content together.
With HTML, we take care of the grouping. Then, we will use CSS to apply some style to those groups.
Tags for HTML Layout
Now that we know what a layout is, we can get to work. As always with HTML, we do that using some special tags. This part of this HTML Layout Tutorial will show you exactly which tags to use and when.
Header
Normally, the header is the first thing you encounter on any page. It is that tiny slice on top of the page that lets you go back to the home, or click on some quick lings. There’s a tag just for that, <header>. However, don’t confuse it with <head>!
In fact, <head> is about the meta information of your page. On the other hand, <header> is about the site identity shown to the user, as well as some basic navigation.
So, if you are following our Full Stack Developer course, we a menu at the beginning of our page. We created it with an unordered list (check out this HTML lists guide), now we could enclose it with a header. Simply put the <header> tag around it, like below.
<header>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</header>Yet, if you do that, you may be disappointed by the result: it won’t change anything on the page. That’s because we are just grouping content logically, and not the way it appears.
Footer
The next tag we should tackle as part of this HTML Layout tutorial is the footer. Just like the header is at the beginning of the page, the footer is at the bottom.
You want to use the footer to group the boring stuff you want to keep at the end of the page. For example, the privacy policy, the disclaimers, the terms and conditions, a few useful links, and so on.
The tag to use for that, easy enough, is <footer>. Now, if you are following our Full Stack Developer course you’ll know we don’t have any footer yet, so we can create a new one. You should squeeze in some links, and maybe some text. Again, we will use a list for that, so here’s an example.
<footer>
<ul>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Yet another random link</a></li>
</ul>
<p>Copyright Bakery Store ©</p>
</footer>Obviously, the result will be a basic list with no fancy formatting. Like headers, the goal here is just to create a logical group, not to change the behavior. Yup, not much action in this HTML Layout tutorial, but still something you need to know. The final result should be something like this:
I recommend you replicate that both in index.html and about.html files.
Article
In case you are writing a blog post or an article on an online newspaper, the article tag is for you. Honestly, it is not something widely used, but still, we should cover it as part of this HTML Layout tutorial.
You should use the <article>...</article> tag to enclose the content of your article or post. This includes all its paragraphs, images, and titles. The goal of this tag is to represent the content itself of the page. So, you shouldn’t have functional parts of the page, like links, login buttons, comments, and so on. You should only have your content, as simple as that.
However, as it is not widely used and not really an industry standard, we won’t use it for today.
Navigation
Sometimes, you have some navigation items that are not part of the header or the footer. Where do you put them? You can use a navigation tag, which is written as <nav>...</nav>.
Just like the article, it is not something we widely use nowadays. At this point, you may wonder why. That’s because when HTML5 was created, there was this idea that automated bots should read and parse the content of web pages. So, you wanted an automatic software to tell what was part of the article, and what wasn’t.
However, the current trend is to use special informational tags with JSON code to inform bots. Furthermore, bots are much better at understanding now, so they don’t need lots of babysitting.
DIV (Very Important!)
This is probably the most important part of this HTML layout tutorial. If you have to remember just one tag from this list, it got to be this. The div tag.
The div tag is just a generic group of other items, it doesn’t carry a specific purpose or context, and this means you can use it wherever and however you want. Still, remember there are some best practices you should follow.
But we should go in order. The first thing you want to know is how to write this tag, and simple enough you use <div>...</div>.
Then, you should know that – pretty much like any HTML layout tag – div alone is useless. But, when you pair it with CSS and most importantly CSS classes, it is the most powerful tool you can have. You can achieve amazing things, and represent your page the way you want it.
To use the class attribute, you simply use class="classname", where the classname is a name you choose. You will then reference this inside your CSS. We also have some best practices for choosing class names, but we will see them when it’s time.
Below, an example following our Full Stack Development Course.
<div class="content-area">
<div class="content">
<div class="content-header">
<h1 id="top">Bakery store</h1>
</div>
<div class="content-body">
<h2>Who we are</h2>
<p>This isn't just another average bakery store. <a href="/about.html">Read more...</a></p>
<h2>Our products</h2>
<p>We make the <b>finest</b> bakery products in town</p>
<h3>Bread</h3>
<img src="/assets/baguette.jpg" alt="A baguette"/>
<p>Check out our awesome loafs</p>
<h3>Burger buns</h3>
<p>Yes, we make <i>burger buns</i> as well</p>
</div>
</div>
</div>Again, nothing too fancy, this won’t change the appearance at all. But, it would certainly help us when we will have to apply some CSS.
Principles for HTML Layout
The real challenge here is not remembering the tags or using them. Is knowing how to use them. Most specifically, you need to know the answer to what items should I group together? If you figure this out, you will create an amazing HTML code that you can maintain and extend over time.
Now I should tell you, it takes time and experience. This just isn’t something you can fully explain in a few paragraphs. However, we can still outline the key principles to group items together. Try several times, and eventually, you will master it.
Double group: Outer + Inner
<div class="outer">
<div class="inner">
<p>Item</p>
<p>Another item</p>
</div>
</div>We used this technique back when we defined content-area and content classes, when talking about the div tag.
Why would you want to do this? This comes so handy when you want to deal with spacing somehow. The outer element acts as a large canvas where you can draw your inner element, and it enables you to add some spacing between the parent element and the inner one.
For example, if you are on a computer you will many websites that have the text just in the middle of the screen and some blank space left and right. They do it with this technique, the outer element takes all the width of the page, while the inner element is actually the text you are looking for.
This is probably the most important principle you’d want to remember.
Logic first, style second
Even if the ultimate purpose of grouping items together is to apply some style, don’t think about it for a moment. When grouping things together, you should put the “logic” of the grouping first. Ask yourself questions like are these two meant to be together? If grouping is done right, you’ll be able to apply any style you want. If it isn’t, whenever you want to change the style, you may have to redo the grouping entirely.
We can’t give you an exact explanation there, as every page is different. However, we can give you some examples of things that go well together, and things that don’t.
These go well together:
- Logo and links in the header
- All items representing the head of a blog post (title, author, date, etc.)
- All items part of the end of the blog post (tags, references etc.)
- In a multi-column form, all the inputs in a column
- In a pop-up dialog, the “OK” and “Cancel” button on the bottom of the dialog
Instead, those won’t go well together:
- Two distinct paragraphs with no relationship
<li>items in a list (use only<ul>or<ol>to group them)- Anything within a paragraph made with
<p>
Div, like no tomorrow
This rule is simple. Prefer the <div> tag to all the other HTML layout tags. Use it wisely, and when unsure probably it’s better to add one more div than one less. This is true as you are beginning with HTML. Eventually, you will know where to cut and where to keep.
Be generous, and nest
Use as many grouping as you need, and remember that probably more is the better choice. In fact, if you use the outer + inner rule, you will create two groupings for each item.
It is also quite important that you nest groups. A div inside a div is completely fine. Actually, more than that, is welcomed, and something you should totally do.
HTML Layout Tutorial Wrap-Up
In this brief HTML Layout Tutorial, we saw all the key tags to implement a sound and powerful HTML layout. With that, you are ready to better understand HTML and most importantly style your web pages the way you want.
As always, don’t stop there. Follow our entire Full Stack Development Course to master everything you need. Hence, you should check the source code of this tutorial on GitHub, or browse the entire repository at alessandromaggio/full-stack-course (always on GitHub).
