問題となるのは上のように装飾用の英語が大きいデザイン。

h1やh2は見出しのタグなので、他のテキストより大きく表示させてユーザーに下に続くコンテンツを分かりやすくし、かつGoogleの検索エンジンにも何を伝えたいか分かった貰いたい部分に使います。

疑似要素のbeforeを使って

<h1>ホームページ制作が仕事です</h1>

h1{
 position:relative;
}
h1:before{
 content:"Work";
 position:absolute;
 top:-100px;
 left:50%;
 tranceform:trancelateX(50%;)
}

こんな感じにすることは可能ですが、何個も作ろうと思うとそのたびに疑似要素のbeforeを設定しなければなりません。

また次のようにh1に「Work」、h2に「ホームページ制作が仕事です」を入れるというコーディングはしたくありません。

<h1>Work</h1>
<h2>ホームページ制作が仕事です</h2>

「Work」のような飾り文字をsvgで書き出して、

<img src="img/work.svg" alt="work">
<h1>ホームページ制作が仕事です</h1>

という風に書くことも出来ますが、svg形式で書き出すのも面倒くさい。

SEO的にも問題なく、かつコーディングも楽にできる方法は、hタグの中にspanを含めて書くという方法です！

<h1>Work<span>ホームページ制作が仕事です</span></h1>

span{display:block;}

display:blockでspanの中が改行されるので臨んだ形になります。（spanはWorkの方でも良いと思います。）あとは、font-sizeで調整するだけ。

意外と簡単ですね！

hタグの中に入れることの出来るタグ

html5になって入れ子のルールが変わりました。

a / audio / b / br / button / canvas / cite / code / data / em / i / iframe / img / input / label /picture / select / small / span / strong / svg / textarea / time / video /

これらのタグは入れ子として文法上問題ありません。