We’ve already seen the header tag for use as part of the header of a web page. However, a web page may have more than one header tag. Header tags may also be associated with an article, to provide header information about the article.
For the head of a page, it is common to see the company or website logo, navigation, and site title. Within an article, the header will often be seen as metadata, including the title, author, publishing date, category (for blog posts), etc. Each article would only have one header tag.
The header tag cannot be placed within another header tag, a footer, or an address tag.
<article>
<header>
<h1>All about HTML 5</h1>
<p class=”article-author”>Walter Wimberly</p>
<p class=”publish-date”>12/21/2019</p>
</header>
<p>Originally HTML and web design was the domain of the geek. It was a technical challenge to create the web documents, not because they are difficult to create, but knowing all of the proper tags wasn’t necessarily easy to learn for someone who didn’t use a computer.</p>
</article>
Styling the Header Tag
A big issue with having the header tag used in multiple places is that it affects how your webpage looks because your CSS is trying to modify a specific tag. The good news is there are a couple of solutions to this.
CSS allows us to put tags one next to another in the selector. CSS interprets this as looking for children after the tag on the left. For example if I had article p it would only apply the rules to paragraphs that are children of an article tag.
This makes styling header tags in an article tag easy. However, it doesn’t directly help us with the main header tag that we wish to style.
That is why CSS gives us ways to further specify our selector. If you use the >, it will tell CSS to only select a direct child of the tag on the left. Without it, the tag on the right can be any type of child, for example a grandchild node, great-grandchild, etc.If we use our previous example of article p, it would work for both of the following paragraphs.
<article>
<p>This tag is affected.</p>
<div>
<p>So is this tag.</p>
</div>
<p>It also works here.</p>
</article>However if you use article > p as your selector, it only works for the first and third paragraphs.
<article>
<p>This tag is affected.</p>
<div>
<p>The CSS rules don't apply to me.</p>
</div>
<p>It also works here.</p>
</article>Therefore, you might want to use body > header as a selector if you want the page header, and no other headers.
The other option is to define a class, and let the class be assigned to the body header.
The article header will often have information in it, which is nice to know, but not as relevant to the article. So we want to display it, but not predominately. Notice here we have some specific HTML lines to define our layout.
<article>
<header>
<h1>Sample Heading</h1>
<p class="article-author">Author: Me</p>
<p class="publication-date">Date Published: 22 Feb 2021</p>
</header>
...
</article>The in our CSS we can make the author and date a little smaller and not as prominent by changing the color.
article header {
background-color: #ddd;
border-bottom: 1px solid #000;
margin: 10px -10px;
padding: 0 10px;
}
.article-author,
.publication-date {
font-size: 90%;
color: #333;
}Note that in the second ruleset, we have two sets of selectors, separated by a comma. This allows the different selectors to share those set of rules.
In this case, would have also used a article header p selector, for the same effect, but we might not always have the same items in our header, which is why we defined them with classes.
The Header Tag was originally found on Access 2 Learn
