What is site header html

What Is A Website Header And Why You Should Use It

As one of the main visual elements of a website, a header is a valuable piece of digital real estate. There are many different functions a website header can have depending on the nature of your business. However, as a tool for branding and in some cases navigation, your website header sets the tone for each page that it appears on.

• What is a Header?
• Why do I need a Header for my webpage?
• Which information should a Header contain?
• Are there best practice examples?
• What is the difference between header, and ?
• Header
• To Sum Up

Website headers are easy to overlook when in fact they are extremely important. After all, it will be one of the first things visitors will see when accessing your website. New to headers in website design and want to learn more about them? Here is everything you need to know on what is a website header and why you should use it.

What is a Header?

A header is a visual image or typographic element that runs across the top of your homepage, and ideally every other page of your website. A header will make your website instantly recognisable, especially if it uses your brand logo and colours. Many headers are clickable too, taking users back to your homepage to act as a central navigational tool.

Headers can be focused on a CTA, brand, content, video or a product. For example, within a product focused website header, the website name or logo might be quite insignificant, with the main information about the product (such as ‘30% off today only!’) taking the main focus instead. As headers can be used to advertise any messages or promotions, they are extremely versatile.

Design wise, headers are usually displayed as a particular type, such as a sticky or fixed header. While you can adopt either strategy, it’s imperative to make sure it fits the style of your website and doesn’t prevent users from being able to read the rest of your website properly.

Why do I need a Header for my webpage?

You never get a second chance to make a first impression, which is why your website header is so important. A header helps identify a website and gives information about the brand. It’s also an opportunity to reinforce your company ethos or get across any particular important message.

Think of a website header almost like the front of a shop on the high street. When standing outside, you’d see the name of the company and store window that may display information about what’s inside. Your website header acts in the same manner only in a digital sense. It’s very much an introduction that sums up what it is you can offer.

Which information should a Header contain?

First and foremost, your header should contain the name of the company or the website that people have landed on. This can either be achieved by using your logo, or a combination of your logo and a strapline. If your logo is quite bulky, try experimenting with simple typography instead. Or, an icon that represents your brand rather than the entire logo.

A header should be clearly displayed and feature the brand colours of your business so that visitors know they are on the right website. Depending on the format of your header, it may be possible to include other key information about your business. For example a phone number or links to your social media pages.

Remember though that your header should still be simple and easy to read. There is also an opportunity to add additional information into your footer. Doing so can help prevent your header from looking too cluttered.

Are there best practice examples?

August is a digital marketing agency in Australia. In their header they use a hamburger menu. This is very innovative as it allows for much more information to be given when the user hovers over it. The result gives a very clever finish to the rest of the design, allowing the main photographic background to stand out more. Hamburger menus are especially popular in mobile design too.

Another great example is Amazon who use their header as a search function. As one of the most successful online retailers in the world, many eyes glance over Amazon’s website header every day. Amazon manages to cram in a lot of information into the header without overwhelming the audience. Plus, it gives the user everything they need in just one bar without having to look for it. It’s done in a way that makes you feel as if you are browsing the aisles of a supermarket, only in a digital sense.

What is the difference between header, and ?

They might all sound the same, but there are some key differences between a header, and that you need to know about. Let’s take a closer look.

 
  
Page Title
 

 
 
An Example of the HTML Header Tag
 
Posted on Sunday, 1 May 2012 by Alex
 
 
This is an sample text placed within the document.
 
Read more. 
 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

 html> head> meta charset="utf-8" /> title>headertitle> head> body> header> h1>Персональный сайт Кристины Ветровойh1> header> article> h2>Добро пожаловать!h2> p>Рада приветствовать вас на своем сайте.p> article> footer>Copyright Кристина Ветроваfooter> body> html>