HTMLの基礎覚え書き - ブロックレベル要素とインライン要素

HTML

またまたHTMLの覚え書きです

要素の種類

1. ブロックレベル要素

    • それ自体が文章を構成する単位

p dl ul ol h1 h2 h3 h4 h5 h6 address hr table div form blockquote fieldset pre

2. インライン要素

    • ブロックの一部に対して適用される修飾的な要素

下記は例

a abbr acronym b bdo big cite code dfn em i kbd label q samp small span strong sub sup tt var

ブロックレベル要素

1. hr要素

    • 横線
<hr />

2. blockquote要素

    • ブロック要素を引用したところとしてmarkup
<blockquote>
    <p>これは引用文です</p>
<blockquote>

*本文中で引用文を表したいならq要素

3. div要素

    • ブロック要素をグループ化
<div class="hobby" style="font-weight:bold">
    <h1>趣味</h1>
    <p>私の趣味は
        <ol>
            <li>Running</li>
            <li>Swmming</li>
        </ol>
    </p>
</div>

*インライン要素をグループ化したいならspan要素

4. pre要素

    • 整形済の文章としてmarkup。改行、空白がそのまま表示される
<pre>
    <p>
    これは、空白や
        改行が
    そのまま表示されます
    </p>
</pre>

インライン要素

1. br要素

    • 改行
<br />

2. em要素またはstrong要素

    • 強調
<strong>強調する</strong>
<em>強調する</em>

3. sup要素

    • 上付き文字
X<sup>2</sup>

4. sub要素

    • 下付き文字
H<sub>2</sub>O

5. dfn要素

    • 文中で重要な言葉が初めて出現して、それに関する説明がそこでなされているときなどに使う
    • dfn要素はdt要素と違い、paragraphの中で単語の定義を行う
    • ここを参照
<dfn>定義語</dfn>

6. acronym要素、abbr要素

    • 省略文字があり、tooltipを表示したい時はacronym要素、abbr要素でtitle属性にtooltipに表示する文言を定義
<acronym title="North Atrantic Treaty Organization">NATO</acronym>

7. q要素

    • 本文中での引用
<p>夏目漱石の小説で<q>吾輩は猫である。名前はまだない。</q>という有名な書き出しがある</p>

8. cite要素

    • 引用もとを示す
<p>引用:<cite>夏目漱石『吾輩は猫である』</cite></p>

9. span要素

    • インライン要素をグループ化
<p>ここは普通だけど、<span class="color_red" style="font-weight:bold">ここは太文字</span>。</p>

HashTag #HTML