Sub-title HTML5 semantics?

  • Resolved Hans Schuijff

    (@hanswitteprins)


    6 years, 6 months ago

    Thank you for this plugin. My question is more a functional question than a technical, but I hope that you, or someone will help me with it.

    I was thinking about a new posts title called “Staying or leaving (and other dilemma’s of choice)” when I thought that the latter part could well be something like a sub-title, keeping focus on the title while (like a book-title) still adding some sub-info to the title of the post. At that point I found your plugin and was pleased to learn that it is adapted to Gutenberg, but I found no answer on how a subtitle should best be implemented in the resulting HTML5.

    After thinking about it, I am not yet sure about the semantics of having a subtitle, since it is translated in the heading structure of HTML, rather than being an independent title attribute. So in translating it in HTML5, aiming to use a semantic based structure like HTML5 seems to propose, I wondered what the target HTML should look like.

    The title and sub-title are basically descriptive of the whole post, sort of a catchy entrance, so more or less equal in weight, just ordered in two parts. As far as I know HTML has no real provisions for that, just headings.

    So should the title be an H1-tag and the subtitle an H2-tag and all headings below that H3 and below? It doesn’t feel right yet and I have learned SEO wants just one H1-heading per URL.

    In book printing the headings are separate of the title and subtitle, so there it is not a problem, but here it seems different. Do you have any thoughts on how to HTML-structure the titles for optimal semantic structure (and seo)?

    Right now I am thinking that the html should perhaps combine the two titles to one H1-tag and just visually change the parts to be presented as two headings with each different styling (the sub-title on a new line with smaller caps or something?). But that seems something of a tweak too, and is perhaps less than optimal.

    Kind regards,
    Hans

Viewing 1 replies (of 1 total)
  • Plugin Author Ben Huson

    (@husobj)

    Hi Hans,

    As I understand it, H1–H6 elements should not be used for subheadings and taglines etc unless it intended to be the heading for a new section or subsection.

    Valid options instead would be:

    <h1>Title <span>Subtitle</span></h1>

    or:

    
<header>
   <h1>Title</h1>
   <p>Subtitle</p>
</header>

    You could add a ‘subtitle’ class to the <span> or <p> tags for styling if required.

Viewing 1 replies (of 1 total)
  • The topic ‘Sub-title HTML5 semantics?’ is closed to new replies.