The Div, Header and Footer Tag

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
  • images
  • text
  • videos
  • memes
  • gifs
  • music
  • etc

But for now, let’s just figure out to get a <div> onto our code editor. Lol.

Le Example:

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> 

  • Image/logo
  • Text/Text/Text
  • Image/banner

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> tagWhy? 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
  • etc.

Here is an example of a header from a site I’ve built:

In the Header it has:

  • Home
  • About
  • Contact
  • Blog

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
  • Help
  • FAQ
  • Careers
  • About
  • Etc.

TL;DR

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:

  • Header
  • 3 Divs
  • Footer

*Note: <header>, <footer> and <div> tags all have opening and closing tags! I.e <div> </div> <header> </header> <footer> </footer>

 

Hmm. HMM.

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?!

 

 

 

Leave a Comment!