html - プレゼンテーション用の html タグの代替

Question

Web サイトに見出しがあり、いくつかの単語を分割して 2 行目に配置する必要があり、いくつかの単語は異なる色になっています。改行
や強調などのプレゼンテーション html タグを使用せずにそれを行う方法はありますか? 私はhtmlとcssで非常に新しいです。

<h1 class="header" >I AM A <em>SURFER</em> <br/> WHO LOVES THE BEACH, <br/> SUNSET AND ICE CREAM.</h1>

Answer 1

spanブロックとして表示することをお勧めします。

HTML:

<p><span>hello></span><span>How are you</span></p>

CSS:

p span 
{
    display: block;
}

Answer 2

指定した既存のクラスとタグを使用すると、次のようにロールできます。

CSS:

span.header h1 {
    margin: 0px;
    padding: 0px;
}

HTML:

<span class="header"><h1>I AM A <em>SURFER</em></h1><h1>WHO LOVES THE BEACH,</h1><h1>SUNSET AND ICE CREAM.</h1></span>