チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のテキストレベルセマンティクス~br要素とwbr要素~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

br要素

改行を表す。
詩や住所のように、実際にはコンテンツの一部である改行にのみ使用することができる。
段落内のテーマ別グループを区切るために使うことはできない。

<p>〒XXX-XXXX<br>
東京都港区ほげほげのむにゃむにゃ<br>
ちょこぱいビル</p>

chromeで表示したとき
f:id:chooringo:20190406131259p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツを配置できる場所

wbr要素

テキストの折り返し可能な箇所を表す。

<p>aaaaaaaaaaa!I love <wbr>chocolate pie.</p>

chromeで表示したとき
f:id:chooringo:20190406172902p:plain
chromeで表示したとき(ブラウザの幅を狭めたとき)
f:id:chooringo:20190406172914p:plain


カテゴリ
・フローコンテンツ
・フレージングコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツが配置できる場所