CODEWITHSUNDEEP
htmlaccessibilitysemanticswai-aria
tokun
tokun

Reputation: 51

What is the appropriate semantic HTML tag for a short blurb underneath a heading?

What is the best semantic HTML tag for a short blurb underneath a heading? I'm sure this has a name since a large amount of websites have this, but I can't seem to find it or the appropriate tag.

<h1>Page Title</h1>

<h2>Section Title</h2>
<div>Short blurb about this section</div>
<div>Section content</div>

Upvotes: 2

Views: 583

Answers (2)

tokun
tokun

Reputation: 51

I found the answer to my question not long after posting this. According to W3, I should wrap the heading and blurb (they call it a subtitle) in a <header> tag:

Example 4: In the following example the title and tagline for a news article are grouped using a <header> element. The title is marked up using a h2 element and the tagline is in a p element. A sample CSS styled rendering of the title and tagline is provided below the code example.

<header>
  <h2>3D films set for popularity slide </h2>
  <p>First drop in 3D box office projected for this year despite hotly tipped summer blockbusters,
  according to Fitch Ratings report</p>
</header>

Title:'3D films set for popularity slide' in a large, bold, dark blue Serif font style. Paragraph: 'First drop in 3D box office projected for this year despite...' in a smaller, dark grey, Sans Serif font style.

Upvotes: 0

msjupiter96
msjupiter96

Reputation: 44

You can use the small tag in place of the p tags, like I did below. This page should help https://www.w3schools.com/html/html_formatting.asp

<header>
   <h1>HTML 5.1 Nightly</h1>
   <small>A vocabulary and associated APIs for HTML and XHTML</small>
   <small>Editor’s Draft 9 May 2013</small>
</header>

Upvotes: 1

Related Questions