ささぴよ 
2020.02.18 超初心者向けのWordPress解説集の一つとして取り込むことにしたので、その注釈を追加しました。
HTMLの話をするとかならず出てくるブロックレベル要素とインライン要素の話。やっぱりわかりづらいという方も多くまとめ直そうと思ったら、全然違う内容にたどり着きました。
やっぱり未だにそういう言葉は使うのですが、実際はちょっと違うという事がわかりましたので、それをまとめていこうかと思います。
正確に技術としての理解をするということよりは、大枠としてどんなものなのかということや、どう使えるのかということをイメージでとらえるためにまとめている記事です。
この記事を通して興味が湧いたら、他の皆さんの書いている記事も見てみてください。必要な記事が読めるようになっていると思います。
目次ページはこちらにありますので、よかったらみてみてください。
この記事の目次
そもそもブロックレベル要素とインライン要素とは
結論から言うとHTMLとしてはもう過去の物です。
なんだってー！ って方も居るかもしれませんが、HTML5では、HTMLとしてこれらの２つを分けることは無くなっています。では、実際にはどこで使われるのかというとCSSですね。ご存じCSSの display オプションの話です。そう考えると、「要素」という名前が付くのは不思議な感じですので、「扱い」という表現で行きましょう。
display: block;
この様に書けば、ブロックレベル扱いになりますし、
display: inline;
この様に書けばインライン扱いになります。
そこに加えてインラインブロック扱いが存在しますね。
display: inline-block;
つまりは、インラインのように扱って横に並べたり出来るのですが、ブロックレベルのように幅や高さなどを指定できる素敵プロパティですね。
ただ、注意が必要な点もあってinline-block を使って横並びにすると改行が出力されることにより要素間に隙間が生まれます 。 letter-spacing を使ってうまく逃げる方法もある様なのですが、あんまりスマートには感じないですね。
もし単純に横並びにするのであれば、今の時代で考えると flex を利用するのが一番だと思います。その話もしたいところですがあくまでも今回は要素のお話なので、今回はここまで。
ということで、要素の表示のさせ方として、ブロックレベルとインラインを分けるということであれば、CSSを活用しましょう。
ブロックレベル・インラインじゃなければどう分かれているか
問題は、HTML5になったからと言って、別に全部がインライン扱いされているわけでもブロックレベル扱いされているわけでもないということです。
何らかの棲み分けによって分けられているからこそ、何も指定せずともブロックレベル扱いされたり、インライン扱いされているわけです。その棲み分けを順番に確認してみましょう。
HTML5では、特に 文書の構造を正しく表現する という点に重きを置いてタグの策定がされたと言います。Google等のSEOとしても、その点は評価を高く付けているそうです。
その中で生まれたのが コンテンツカテゴリ という考え方です。HTML5において、それぞれのHTMLタグはいずれかのカテゴリに属し、それらの属する物に合わせて、ブロックレベル扱いになるのかインラインレベル扱いになるのかが決まるという仕組みです。コレを コンテンツ・モデル と呼びます。
このコンテンツ・モデルによって、中に含めて良い要素とそうでは無い要素等が決められており、コレが文書構造に直結します。物によっては2つ以上のカテゴリに含まれる物もあります。
では、各カテゴリを順番にみていきましょう。
フローコンテンツ
フローコンテンツは、様々な表示用コンテンツが含まれるカテゴリです。主に以下の要素が含まれることになります。
<a> <abbr> <address> <article> <aside> <audio> <b> <bdo> <blockquote> <br> <button> <canvas> <cite> <code> <command> <datalist> <del> <details> <dfn> <div> <dl> <em> <embed> <fieldset> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hgroup> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <map> <mark> <math> <menu> <meter> <nav> <noscript> <object> <ol> <output> <p> <pre> <progress> <q> <ruby> <samp> <script> <section> <select> <small> <span> <strong> <sub> <sup> <svg> <table> <textarea> <time> <ul> <var> <video> <wbr>
これ以外にもテキスト自体が含まれます。
また、一定の条件を満たした場合にフローコンテンツとされる物もあります。
– <map> の中の <area>
– itemprop 属性が指定された <link> または <meta>
– scoped 属性が指定された <style>
セクショニングコンテンツ
その名の通り、文書のセクションを区切っていくために使われるタグのカテゴリです。主に以下の要素が含まれます。
<article> <aside> <nav> <section>
これらの要素により、次に登場するヘディングコンテンツがどのセクションに対して示される物なのかがわかる様になります。
ヘッディングコンテンツ
こちらもその名の通り見出しを示す部分です。セクショニングコンテンツの中にあれば、そのセクションに対して、そうで無ければ、このヘッディングコンテンツ自身が事実上のセクションを示すことになります。このカテゴリのタグは以下の物です。
<h1> <h2> <h3> <h4> <h5> <h6> <hgroup>
なお、 <header> は役割が違いますので、ヘッディングコンテンツには含まれません。
フレージングコンテンツ
フレーズというなのイメージ通り、いろいろなテキストや段落を構成するような要素のことです。例えば以下のような物です。
<abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <command> <datalist> <dfn> <em> <embed> <i> <iframe> <img> <input> <kbd> <keygen> <label> <mark> <math> <meter> <noscript> <object> <output> <progress> <q> <ruby> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <svg> <textarea> <time> <var> <video> <wbr>
また、これ以外にテキストも含まれますが、空白だけの文字列はフレージングコンテンツとはなりません。
更に以下の物も含まれます。
– フレージングコンテンツだけを含む <a>
– <map> の中の <area>
– フレージングコンテンツだけを含む <del> または <ins> または <map>
– itemprop 属性が存在する <link> または <meta>
埋め込みコンテンツ
コレはわかりやすいですね。メディア・ファイルや外部コンテンツを埋め込む際に利用されるものです。タグとしては以下のものがあります。
<audio> <canvas> <embed> <iframe> <img> <math> <object> <svg> <video>
インタラクティブコンテンツ
このタイプのタグは、ユーザーのアクションに対して何かしらの機能を持つタイプの物を指します。タグの種類をみるとわかりやすいかも知れません。
<a> <button> <details> <embed> <iframe> <keygen> <label> <select> <textarea>
一部のタグは、状態に依って、ここに含まれることになります。
– controls 属性が存在する <audio> または <video>
– usemap 属性が存在する <img> または <object>
– type 属性が hidden ではない <input>
– type 属性が toolbar ではない <menu>
フォーム関連コンテンツ
ここには特定のフォームに含まれる要素が含まれます。主に <form> の中に用意される要素です。物によっては form 属性で id を指定されて、特定のフォームに属するように指定された物も含まれることになります。
<button><fieldset><input><keygen><label><meter><object><output><progress><select><textarea>
これらは更にサブカテゴリに分類することが出来ます。
リスト化
情報を列挙するために使える要素…と考えれば良いようです。
<button><fieldset><input><keygen><object><output><select><textarea>
ラベル付け可能
<label> を使ったラベル付けが可能な要素たちです。
<button><input><keygen><meter><output><progress><select><textarea>
サブミット可能
サブミットされたときにデータとして送られる要素ですね。
<button><input><keygen><object><select><textarea>
リセット可能
フォームにリセットボタンを設置した際、リセットすることが出来る要素です。
<input><keygen><output><select><textarea>
<h3>メタデータコンテンツ</h3>
この要素は主に <head> の中で定義することが可能で、表示される要素では無く、表示に必要な情報や、コンテンツに付随する情報を提供する要素です。以下の物が含まれます。
<base> <command> <link> <meta> <noscript> <script> <style> <title>
実はまだある
ここまで紹介した各カテゴリですが、複数に跨がっているタグもあることからわかるとおり、それぞれの役割に合わせて分類されています。
しかしながら、これ以外に「そのタグが削除されても、文書構造に影響を及ぼさない」とされる トランスパレントモデル というカテゴリもあります。 <ins> <del> 等が例として挙げられます。
ブラウザさんの頑張り
これらのカテゴリを分類し、判断して適切に処理されるように各ブラウザは自前のCSSを持っています。そのおかげでブロックレベル要素やインライン要素の概念が変わっても、私たちは何も気にせずコーディングし、表示された物を何も気にせずみることが出来るわけですね。
逆に言えば、これらのカテゴリと、それぞれの中に含まれるべき要素を理解していることで、適切なコーディングをする事ができると言うことになります。
なかなか難しそうな気もしますが、しっかりわかったらSEOも怖くないコーダーになれそうですね！