Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Headers

Explore how to use HTML headers to structure web pages and articles effectively. Understand the difference between page and content headers, apply semantic tags, and learn how styling enhances visual distinction. Discover how the hgroup tag clarifies header hierarchy for outline generation.

We'll cover the following...

There are two ways you can use headers in HTML5:

  • First, the header can be used as the title of your web page.

  • Second, you can use a header as a title of some content. In this context, you can have multiple headers, each associated with its related content.

You can even combine these aspects, so on a web page, you may apply a single header for the page and multiple headers for separate content sections.

In Listing: The skeleton of an article with HTML5, the <header> tag was used as a content-related header. It was nested into the <article> tag, as this code snippet shows:

HTML
<body>
  <article>
    <header>
      <h1>Visual Studio Platform and Extensibility</h1>
      <p class="byLine">by Istvan Novak</p>
    </header>
    <!-- ... -->
  </article>
  <!-- ... -->
</body>

If it were a page with multiple articles, you ...