blockとinlineについて

ツイート
2021年07月18日
2021年07月19日

HTML は、主に 2 種類の要素があります。

ブロック要素

  • 段落 <p>
  • リスト:箇条書き付き <ul> 順序付きリスト <ol>
  • 見出し:第 1 レベル<h1>から第 6 レベルの見出し<h6>
  • 記事 <article>
  • セクション <section>
  • 長い引用符 <blockquote>

インライン要素

  • リンク <a>
  • 強調された言葉 <em>
  • 重要な言葉 <strong>
  • 短い引用符 <q>
  • 略語 <abbr>

ブロック要素は、コンテンツを一貫性のあるブロックに分割することにより、ページの主要部分を構造化することを目的としています。

インライン要素は、テキストの一部を区別して、特定の機能や意味を与えることを目的としています。インライン要素は通常、1 つまたはいくつかの要素で構成されます。

html
<p>Youtubeで<a href="https://www.youtube.com">HTMLチュートリアル</a>を見る</p>

タグの開閉

すべてのブロック要素には、開始タグと終了タグがあります。

そのため、自己完結型要素はインライン要素になります。これは、構文で他の HTML 要素を含めることができないためです。

開始タグと終了タグの有無自己完結型
ブロック要素<p></p> <ul></ul> <ol></ol>×
インライン要素<a></a> <strong></strong> <em></em><input> <br> <img>

他の種類のHTML要素

ブロック/インライン要素にはいくつかの例外がありますが、最も頻繁に遭遇するものは次のとおりです。

  • リスト項目 <li>
  • テーブル <table>,<tr>,<td>

関連記事