Wednesday, March 22, 2023
HomeReactThe proper semantic HTML for including subtitles to h1 tags

The proper semantic HTML for including subtitles to h1 tags


Semantic HTML makes your websites higher

Semantic HTML is essential as a result of it helps enhance the accessibility of an internet web page and makes the code extra readable. Semantic components are people who clearly describe their which means in a method that’s straightforward for each people and machines to know.

Search engines like google can extra simply parse and perceive semantic HTML, which may help enhance your web site’s search engine optimisation. Semantic HTML makes use of tags to explain the which means of content material on a web page, reasonably than simply its presentation. This may help search engines like google and yahoo higher perceive the content material of a web page and index it appropriately.

Utilizing h2 as a subtitle for an h1 is wrong

Based on the html spec, h1 by h6 tags are supposed to point out the construction of a doc. In different phrases, every web page ought to have at most 1 <h1> tag, and <h2> components ought to be sub-sections of that h1 – not further descriptions for it.

This warning from the HTML spec does a terrific job of explaining it:

For instance, the next snippet, meant to characterize the heading of a company website, is non-conforming as a result of the second line isn’t meant to be a heading of a subsection, however merely a subheading or subtitle (a subordinate heading for a similar part).

<physique>

<h1>ACME Company</h1>

<h2>The leaders in arbitrary quick supply since 1920</h2>

...

</physique>

(07/05/2022) As of the time of this writing, whatwg goes on to suggest use of hgroup in its answer. Based on MDN, hgroup shouldn’t be used, as it’s not supported by assistive applied sciences wanted for accesible studying of HTML websites.

Use this code so as to add subtitles to headings

The proper semantic construction of HTML for a heading with a subtitle is easy – nest your <h1>, and so forth with in a <header> tag, and embody a <p> tag with an applicable class identify as a sibling to that h1:

<header>

<h1>The right way to bootstrap a product as a solo founder</h1>

<p class="tagline">

Necessary lessongs discovered from constructing 10 merchandise alone in 2 years

</p>

</header>

For extra particulars on this, take a look at MDN docs on the header tag, and their semantics part.

🚨 UPDATE: I used to be flawed! 🚨

The primary model of this text was flawed! I beforehand beneficial utilizing the <hgroup> tag as per the whatwg spec, however I used to be corrected by @AnalyticsEqv on twitter:

Thanks for the correction! I positively get issues flawed typically, and I am all the time pleased to right myself when applicable.

Did you discover this useful?

You may also like these different articles I’ve written:

If you wish to hear extra from me, think about subscribing to my publication πŸ‘‡πŸΌ



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments