「インライン要素とブロックレベル要素（ブロック要素）」の編集履歴（バックアップ）一覧に戻る

インライン要素とブロックレベル要素（ブロック要素） - (2015/05/16 (土) 22:10:02) のソース

ここでは、インライン要素とブロックレベル要素についてまとめていきます。

#contents

*HTML5で廃止？
　いきなりですが、HTML5からインライン要素、ブロックレベル要素という概念はなくなりました。（ややこしいですが、概念はなくなりましたが、一応存在としては残っています。）「コンテンツ・モデル」という考え方になり、各要素の内包できるものや内包されるものが決められており、それ以外の要素は入れてはいけない。という概念に移りつつあります。
よくCSSで
 display: inline;
 display: block;
などと記述されますが、それとは&color(red){別のものである}と考えてください。
色々な記事を拝見しますと、これまでは見た目重視（ブロックレベル要素、インライン要素の使用）のところから文章構造（クローラに正しく解釈させられるか）という方向に移りつつあるようです。
http://creator.aainc.co.jp/archives/4045
~
例：ブロックレベル要素の中にインライン要素~
正しいのは以下
 <p><strong>この表現はいい</strong></p>
正しくないのは以下
 <strong><p>これはダメ</p></strong>

http://www.mdn.co.jp/di/articles/2605/?page=8


*ブロックレベル要素とインライン要素

とある記事に
>divは代表的なブロックレベル要素だ。ブロックレベル要素は新しい行に配置される。そして、ブラウザサイズに応じて、可能な限り左右に引き延ばされる。pやformもブロックレベル要素だ。HTML5で新しく追加されたheader、footer、sectionなどもブロックレベル要素である。 

*ブロックレベル要素とインライン要素一覧
**ブロックレベル要素

    <address>
    <blockquote>
    <center>
    <dir>
    <div>
    <dl>
    <fieldset>
    <form>
    <h1>-<h6>
    <hr>
    <isindex>
    <menu>
    <noframes>
    <noscript>
    <ol>
    <p>
    <pre>
    <table>
    <ul>
    <header>
    <footer>
    <article>
    <section>
    <aside>

**インライン要素

    <a>
    <abbr>
    <acronym>
    <applet>
    <b>
    <basefont>
    <bdo>
    <big>
    <br>
    <button>
    <cite>
    <code>
    <dfn>
    <em>
    <font>
    <i>
    <iframe>
    <img>
    <input>
    <kbd>
    <label>
    <map>
    <object>
    <q>
    <s>
    <samp>
    <script>
    <select>
    <small>
    <span>
    <strike>
    <strong>
    <sub>
    <sup>
    <textarea>
    <tt>
    <u>
    <var>


と書かれていました。~
参照元：http://ja.learnlayout.com/display.html