The header section of a webpage sets the visual identity and navigational framework of the site.
To begin crafting the header section, you must first define the <header> element at the top of your HTML document, after the <body> tag.
Inside this tag, you can incorporate various components that contribute to the overall look and functionality of your web page.
You can also include your website title/logo, navigation links for menus, and set the structure of your webpage.
For instance, including a page title is essential, as it conveys the purpose and content of the website to visitors. A simple <h1> tag can be used to display your title prominently. It can also be centred.
Your code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage With Header</title>
<style>
h1 {text-align:center;}
</style>
<body>
<header>
<h1>My Webpage Title</h1>
</header>
</body>
</html>
It should appear like this:
Adding a Navigation Menu
Next, we are going to add navigation menus below the website title.
A well-structured navigation menu allows users to easily access different sections or pages of your website.
To begin, you will want to add the navigation menu within the <nav> element, under the <header> after the <h1> element. It represents a section of a page intended for navigation links.
Inside the <nav> tag, you should create an unordered list using the <ul> tag. The list items for each link will reside within <li> tags. We will also style them centre, and make display to be “inline-block” so that it can be on a line.
For now, they won’t link to anywhere. Here’s how the code will be:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage With Header</title>
<style>
h1 {text-align:center;}
nav ul {
list-style: none;
text-align: center; }
nav ul li {
display: inline-block;}
</style>
<body>
<header>
<h1>My Webpage Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
When viewed on a browser, it should look like this:
Linking the Menu Items
Linking menu items is a crucial aspect of web development, especially in creating a simple and user-friendly navigation system on your webpage. The primary tool for this task in HTML is the anchor tag, denoted as <a>. This tag allows you to create hyperlinks that visitors can click to navigate to various sections of the website or external pages. To begin this process, you should familiarize yourself with the href attribute, which specifies the URL of the page or section that the link will direct to.
For internal linking, where you want to navigate within the same webpage, you can use the href attribute alongside an ID corresponding to the target section.
For example, if you have a section with the ID “about,” you can create a link in your menu like this:
<a href="#about">About Us</a>This will allow users to jump directly to the “About Us” section when they click the menu item. It’s important to ensure that each section you link to has the appropriate ID attribute, thus maintaining a seamless navigation experience.
For external links, which direct users to a different website, the process is equally simple. You would specify the full URL in the href attribute as shown below:
<a href="https://www.example.com">Visit Example</a>This enables visitors to conveniently navigate outside of your webpage. Additionally, including the target="_blank" attribute will open the link in a new tab, enhancing user experience:
<a href="https://www.example.com" target="_blank">Visit Example</a>Incorporating these linking practices using anchor tags not only enhances the navigability of your web page but also elevates the user’s overall experience as they explore your content.
We will talk about styling the Header and Menu with CSS in our next article.
