开发者

What's the most semantically correct way to do subheadings?

开发者 https://www.devze.com 2023-01-30 08:39 出处:网络
What\'s the most semantically correct way to do subheadings or subtitles? Example below. About We sell apples, yay!

What's the most semantically correct way to do subheadings or subtitles? Example below.


About

We sell apples, yay!

Lorem ipsum...


Since the contents of the subheading aren't of much importance when compared to actual, informative headings, I thought that they should not be seen as separate headings by screen readers and search engines.

So, the options that I thought of are as follows:

  • <h2>About</h2><h3>We sell apples, yay!</h3> -> This is what I would like to avoid.
  • <h2>About</h2><span class开发者_如何学运维="subheading">We sell apples, yay!</span> -> Works. Is it the best way? Don't know.
  • <h2>About<span class="subheading">We sell apples, yay!</span></h2> -> Part of the heading. I don't really know if it's a good or bad thing.

Any advice on this one?


Spec

  • https://www.w3.org/TR/html51/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

A heading should help comprise the outline of the document. The document outline in Microsoft Word—which also uses headings 1 - 6—is a good example of this concept in action. Headings often serve (or have the potential to serve) as the title for some additional body of information, that is, "headings for the sections with which they are associated".

If the content does not help form the outline of the document and has no potential to be a title for other information, then it probably doesn't belong in a H[1-6] tag.

Example

A header typically contains a group of introductory or navigational aids. http://www.w3.org/TR/html51/sections.html#the-header-element, emphasis mine.

<header>
    <h1>About</h1>
    <div class="subtitle">We sell apples, yay!</div>
</header>

<style>
    header .subtitle{ color: blue; }
</style>


HTML5 solves this by way of the hgroup tag. Use that.

If you feel you're not yet ready to migrate, then I'd say you should still go with proper heading tags whenever you're marking up a heading. If you feel uncomfortable marking up two headings as siblings, perhaps you can adjust your copy to reduce the number of headings to just one.

Edit:

Since the time of writing, the future of hgroup has been endangered: http://dev.w3.org/html5/status/issue-status.html#ISSUE-164

Edit 2:

As of April 2nd 2013 hgroup is removed from the spec: http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

(Source: https://twitter.com/iandevlin/status/318961224836587521)


I really liked Toby Inkster's suggestion here: http://lists.w3.org/Archives/Public/public-html/2010Nov/0405.html as an alternative to HTML5's proposed <hgroup> element which seems to be a difficult concept for many web authors to grasp. (See the start of that thread by Bruce Lawson.) Toby suggests:

<h2>
  <span>About<span>
  <small>We sell apples, yay!</small>
</h2>


In the case that the byline is actually a quote you should use blockquote.

<h2>About Us</h2>
<blockquote class="byline"><p>We Sell Apples Yay!</p></blockquote>


I personally think your second option is the best. "About" is the title of a section, but the 'subheading' or more of a descriptive nature than a section title/header. You could use <strong> instead of a span to indicate it's a little more important than the rest of the text yet not a heading.

If they really are subheadings, like

About

About us

Text about us

About this website

Text about this website

You should use <h3> for the sub-headings.

0

精彩评论

暂无评论...
验证码 换一张
取 消