When you visit a website, the first thing you usually see is a section containing a logo, a search bar, and a menu. In web development, this isn’t just a random group of things; it’s usually enclosed in an HTML header tag.
People who are new to HTML often get “headers” (like H1 or H2) and the element mixed up. Even though they sound same, they are used for completely distinct things when making a webpage. To make modern, well-structured websites that search engines love to crawl, you need to know how to use this tag.
What is the HTML header Tag?
The HTML Header tag is a semantic tag that was added to HTML 5. It has either some text that introduces you to the site or a bunch of links that assist you go around. Think of it as the “preface” to a book. While most people use it at the very top of a webpage, you can actually use it multiple times within a single document. For instance, inside a <article> or <section> to start that area of the page.
Key Characteristics:
- Semantic Value: It alerts browsers and screen readers that the content is an introduction.
- Placement: It can be used all across the site (as a site-wide header) or just in certain parts of it (as part of other elements).
- Non-Visual: It doesn’t add any extra formatting, like big fonts or bold text, by default; it only helps you keep organised.
HTML Header Tag Example
To understand how this works in a real project, look at this simple html header tag example. This code demonstrates a standard navigation bar wrapped in a header:
HTML
<header>
<h1>Welcome to PW Skills</h1>
<nav>
<ul>
<li><a href=“#home”>Home</a></li>
<li><a href=“#courses”>Courses</a></li>
<li><a href=“#contact”>Contact</a></li>
</ul>
</nav>
</header>
In this example, the <header> holds the main title and the navigation menu, keeping the code clean and easy for search engines to understand.
Sizes and Headings for HTML Header Tags
A common mistake is confusing the <header> tag with html header tag sizes (the <h1> through <h6> tags).
- The <header> tag: holds a set of elements.
- The <h1> to <h6> tags: These tell you how big and important the text headings are.
In most cases, you will put a inside your to give it a main title. The tag doesn’t govern the “size” of your header section; instead, the CSS height and padding you give it or the size of the headers inside it do.
Customising Your HTML Header Tag: Alignment and Style
By default, elements inside a header are block-level and align to the left. However, most modern designs require a more polished look.
HTML header tag center
To achieve an html header tag center alignment, you don’t use HTML attributes. Instead, you use CSS. The most modern way to centre content inside a header is by using Flexbox:
CSS
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
HTML header tag color
Adding an html header tag color helps your branding stand out. You can change the background color of the container or the text color of the links inside:
CSS
header {
background-color: #242424; /* Dark background */
color: #ffffff; /* White text */
}
HTML Header Tag vs. Head vs. H1: What you need to know!
When you’re just starting out with web development, it’s easy to mix up these three words. Here’s an easy way to keep them all straight:
| Tag | Purpose | Visibility |
| <head> | Contains metadata, titles for tabs, and CSS links. | Hidden from the user. |
| <header> | A container for the top part of a page or section. | Visible on the page. |
| <h1> | The main heading (text) of the page. | Visible and styled as large text. |
Key Tips for Using the HTML Header Tag
- Avoid Nesting: Don’t insert a tag within a element or another tag.
- Multiple Uses: You can include the author’s name and the date of the post in a header inside a <article>.
- Accessibility: The header element helps screen readers guide visually impaired users through the “Landmark” parts of your site. Always add one for improved access.
- Sticky Headers: You may keep the navigation bar visible when the user scrolls down by using CSS position: sticky; on the header tag.
HTML header Tag FAQs
- Can I have more than one HTML header Tag on a page?
Yes. While you usually have one main header at the top of the page, you can also use a <header> inside <article>, <section>, or <aside> elements to define their introductory sections.
- How do I make the sizes of the HTML header tags different?
The <header> tag itself doesn’t have a size. To change how large it looks, you must nest heading tags like <h1> or <h2> inside it, or use CSS to set the height and width of the header container.
- What is the difference between <head> and <header>?
The <head> tag is for machine-readable metadata (such the page title and links to stylesheets) that you can’t see on the page. The HTML header tag is for things that people can see, like menus and logos.
- How can I make my HTML header tag center aligned?
The best way to centre a header is using CSS. Apply text-align: center; for basic text, or use display: flex; with justify-content: center; for more complex layouts involving logos and buttons.
- How can I change the colour of an HTML header tag?
Use the CSS background-color property for the header’s background and the colour property for any text inside it to modify the colour of an HTML header tag.
Explore Web Development Topics
🔹 Web Development Introduction & Fundamentals |
🔹 Frontend Development Basics |
🔹 HTML Fundamentals |
| HTML Dir Tag |
| HTML Dialog Tag |
| HTML Dfn Tag |
| HTML Details Tag |
| HTML Del Tag |
| HTML DD Tag |
| HTML Datalist Tag |
| HTML Data Tag |
| HTML Figure Tag |
🔹 CSS Fundamentals & Layouts |
🔹 JavaScript Basics & Core Concepts |
🔹 Frontend Frameworks & Libraries |
🔹 Backend Development Basics |
🔹 Databases & Storage |
🔹 Full Stack Web Development |
🔹 Responsive, Mobile & Cross-Browser Design |
🔹 Web Hosting, Deployment & DevOps |
🔹 Web Development Tools |
🔹 Web Developer Interview & Preparation |
🔹 Web Development Jobs & Career |
🔹 Comparisons & Technology Choices |
🔹 Web Trends & Advanced Topics |
🔹 Other / Unclassified Web Development Topics |