Building Your Header

The <header> tag is an element that some people love, and some people love to hate. The reason is that the <header> tag doesn’t really differ much from a <div> tag, except that it is only used once – and it is always at the top of your page.

The nice thing about using the <header> tag instead of a normal <div> tag for the content at the top of your webpage is that this unique tag helps the programmer(you) to easily differentiate between the <header> and the rest of the webpage. It also helps search engines easily detect what information is in your header!

I wanted to show you the simplest(in my opinion) formatting of your webpage header. Read: Centering your logo image. 

Let’s get started!

Header tag

Le Example: What the header tag in your HTML file looks like:

The <header> tag has both opening and closing tags and goes at the beginning of your <body> tag. Again, using the <header> tag is useful to use both as a developer(for code clarity) and for search engines(to comb through your webpage data).

Now if the above image makes literally zero sense to you, do not fret! Let’s take a brief detour to how I build the header tag. 

 

Up next: Adding an image to your header

So if you’re an OG subscriber, you’ll remember one of the very first logos I designed for my webpage. And if you’re new, get ready! This is the logo we will be using for this tutorial.

Observe:

I’ve titled it ‘logo1.jpg’ because I’m very creative.

Note: If you want to add any images, videos, make sure they are in the same folder(or directory) on your desktop as your .html and .css files!

We will be using this as our logo image, so let’s look at how we add it to the header.

<img id=”logo” src=”logo1.jpg”>

This code seems pretty cray cray, amirite?

Luckily, it’s a lot easier to understand once we break it down. So let’s check it out.

Adding an image to HTML

In the <header> tag,  you’ll see an image, or img element, and there are a few parts to it!

img tag: indicates to your server that you are using an image.

id: gives a name to one specific image/element in your code – the id of my image is “logo”.
More info on id attributes here.

src: indicates the URL or file name of your image – my image src is “logo1.jpg”

Note: make sure your image is in the same folder(directory) as your .html file – otherwise you’ll have to add a little more code.

Feel free to give whatever id you’d like to your image, this id is primarily used to style your image in your CSS file.

Speaking of your css files…

Modifying header with CSS

The first step to modifying the image is to head over to your CSS file, which I’ve labeled ‘stylesheet.css’.
If you have zero clues about what CSS is, check out my post on CSS files and how to link them

When you work on your CSS stylesheet, you are essentially styling each element from your code. It’s pretty neat!

Le CSS Stylesheet:

When you style your <header> tag in your CSS stylesheet, you want to indicate to the stylesheet that that is what you are editing.

Start with:

header{

}

This indicates to your CSS stylesheet that anything between the curly braces is styling for that element. In this case, you are styling the header!

Centering your image with CSS

In order to get this:

I coded out this:

Holy Sh*t!? Where did all that code come from?! WHAT DOES IT MEAN?! You may be thinking.

Let’s break it down.

Styling the Header

display: block; = the header will appear as a block that takes up the whole height and width you set it to. In this case, my header will be 40% of the height of the page, and 100% of the width of the page!

text-align: center; = all text in the header will be centered.

height: 40%; = the header will have a height that is 40% of the container(body) of the webpage! *feel free to change this percentage to anything you want! Or, if you have specific pixel(px) dimensions you want, use that!

width: 100%; = the header will take up 100% of the width of the container(body) of the webpage! *feel free to change this percentage to anything you want! Or, if you have specific pixel(px) dimensions you want, use that!

Styling an id

Then, I styled the #logo.

You may be wondering why there is ‘#’ before the word logo.

No, it’s not because i’m a millennial.

https://tenor.com/view/newgirl-hashtag-excitement-gif-8631068
Source: https://tenor.com/view/newgirl-hashtag-excitement-gif-8631068

Remember back in our HTML file when we added the image into the header?

If not, let me remind ya!

We gave the image an id=”logo”.

When styling an id in your CSS stylesheet, that id is preceded by the ‘#’ symbol.

So let’s use

#logo {

}

to start styling our logo!

This means our #logo will be 50% of the width of its container(header element), and 80% of the height of its container(header element).

 

Which will make it look like this:

 

Add a background color!

To make this a little easier to see, I will add a background-color:gold; to the header:

And viola!

You’ll see that the following things have happened:

  • the width of the header is 100% of the page
  • the height of the header is 40% of the page
  • the background color of the header is gold
  • the width of the logo is 50% of the header
  • the height of the logo is 80% of the header
  • the logo is centered

We’re almost done!!!! WooO!!

Lastly, we want to make sure our image is centered vertically.

We can do this by adding something called a margin to our image.

Adding margins to CSS stylesheet

In our styling of our #logo, you’ll notice that I’ve added a margin-top: 14px;

This means that there will be 14 pixels or px at the top of our logo.

*Note: feel free to play around with the margin-top, margin-bottom, margin-right, and/or margin-left!

And here ya go!

 

Up Next: Adding a Menu!

Stay tuned!


 

Leave a Comment!