One of the first steps I take when building a webpage is physically sketching out what I want my webpage to look like, so I can maximize my coding efficiency. Now when I say sketch out my webpage, I don’t mean sketching out where I will put each Real Housewives gif, but rather I like to figure out how many sections or divisions I will have on my webpage.
Here is an example webpage:
You’ll see here that I have a header section, image/logo section, text section, another image/banner section and a footer section.
Once I’ve figured out how many sections or divisions (let’s call them divs from here on out) I head over to my code editor and set them up.
The <div> Tag
Each section of your webpage will generally be indicated by the <div> tag.
And <div>s are cool because you can style them with any combination of:
- background colors
But for now, let’s just figure out to get a <div> onto our code editor. Lol.
The <div> tag always has an opening <div> and closing </div> tag. Everything mentioned before (colors, text, videos, etc.) will go in between these two tags!
Here’s a fun one for ya! Based on the screenshot below, how many sections of my webpage will there be?!
You guessed it, three sections!
These are what we call <divs> and if you take a quick look at the hand drawn webpage, you’ll notice that there are three <divs>
But wait, there are a few funny looking labels in there, right? The header and footer aren’t considered <divs>?! Kinda, but not really. So let’s talk about them.
The <header> tag
First things first: you do not want to confuse the <header> tag with the <head> tag. Why? Because the <head> tag holds all of the behind the scenes meta-information about your webpage i.e the web address, the keywords of your page, the description of your page – all the things that help Google access your page.
The <header> tag is where you can include things like:
- Your logo
- Your icon
- Links to author pages, blog pages, other pages in your site
Here is an example of a header from a site I’ve built:
In the Header it has:
Headers are usually at the top of your webpage, and using the <header> tag rather than a <div> tag makes it easier for you to identify and modify the styling of it.
The <footer> tag
As for the <footer> tag, take everything I just said and apply it to the bar at the bottom of your webpage. Hehe.
Some things the <footer> tag can contain:
- Contact information
Once you’ve understood that each section of a webpage are simply indicated by the <div> tag(minus the header and footer of course), it makes it super easy to begin to write out and structure your code.
Let’s take a look at our initial example:
And before you scroll down, I want you to think about how you would write out the code for a:
- 3 Divs
*Note: <header>, <footer> and <div> tags all have opening and closing tags! I.e <div> </div> <header> </header> <footer> </footer>
Here’s how I did it:
And for those who are visual learners, here’s what the set up of the webpage will look like – I’ve added a background-color to each <div> and <header> <footer> tags to make it easier to see :]
*Note: I’ve styled each div with a “background color” so it is more obvious! But we will learn to style these later :]
Have you sketched out what you want your webpage to look like?!