How to create multi-line <h1>

Intro 👋

Recently I found myself exploring around https://www.frontendmentor.io/challenges. This is a website where a set of challenges are presented that prompt users to follow challenge's mockup design files. The users then attempt to replicate pixel perfect copy websites. I decided to take on a challenge called four card feature section targeted for newbies 😎. It seemed pretty easy-cheesy-busy task until I saw the very first thing I wanted to build out: its title!

The challenge 👊

Forget about the gray paragraph and focus on the title. You can see that it spans over two lines instead of traditional one line and the lines have different looks than one another!

Breaking into smaller problems 🔡

Approach No. 1

My naive intuition was to create two <h1> elements, one for each line like this.

<h1>Reliable, efficient delivery</h1>
<h1>Powered by Technology</h1>

It appears as a viable solution because <h1> elements are block level elements and they will take full width of its container and break into a new line. However, that will hurt the site's SEO score. <h1> indicates the most important heading and there should only be one per entire website. If your web browser's crawler sees more than one h1 heading, it will deduct off some SEO points.

Approach No. 2

Maybe we should wrap the entire title within a single <h1> but how can we take care of line break along the lines? Well, there's a HTML just for that represented as <br />. It's literally called break line and is a self-closing tag. So now we can do something like this.

<h1>
Reliable, efficient delivery <br />
Powered by Technology
</h1>

The downside is that we can't really control the height of the gap between the line break but this is sufficient for our needs :)

Approach No. 3

Now the line break is taken care of, let's deal with different stylings per line. What I like to do is create a default style for the h1 heading and create a wrapper element around the 2nd line to apply separate stylings. This begs the question: which wrapper element?
I will use <span>. <span> is a generic HTML element that wraps around inline elements whereas <div> is a generic wrapper for anything other than inline elements. Now, it looks like this.

<h1>
Reliable, efficient delivery <br />
<span class="bold">Powered by Technology</span>
</h1>

Then you could target span inside of h1 to give heavier font weight and a different color.

h1 span {
  font-weight: 700;
  color: hsl(234, 12%, 34%);
}

This solution isn't bad that it does what we expect it to do and it's common to see the use of <span> to achieve similar results elsewhere. But I am not a big fan because span is way too generic hence no semantic meaning associated with it.

Approach No. 4

We already know we are going to make the 2nd line of the title bolder, so why don't we actually utilisize an HTML element that takes care of that? Here comes the <strong> tag. (Technically, we could use <b> tag to see the same result but it has a different semantic meaning).

<h1>
Reliable, efficient delivery <br />
<strong>Powered by Technology</strong>
</h1>

Then in css, you just have to change its color since bold style is already applied by the markup!

Takeaways 💡

There are lots of benefits that come with the use of semantic elements. It helps with the SEO score, gives more clear and easily understandable HTML structure, may save you lines of css, make the site more accessible, etc... I suggest you to learn some semantic elements found in HTML5. https://html5-documentation.now.sh/ <- shameless plug, this was my personal side project!