no-image

グループ

div/汎用ブロック

汎用的なブロック要素。

結果

タイトル1

ページに表示される部分です。

タイトル1

ページに表示される部分です。

解説

汎用性の高い、代表的なブロック要素です。その要素自体に意味を持ちません。

span/汎用要素

意味を持たない汎用タグ。

結果

特定の意味を持たないのでCSSの利用するときに多用されます。

解説

CSSでのclassやidを利用するときに大変重宝します。
ブロック要素ではないので、通常のタグを使うよりも汎用性が大変高いです。

p/段落

段落を表す。

結果

囲んだエリアはひとつの段落として認識されます。

解説

<p>は、<div>と似たような性質を持っていますが、段落を意味する要素として大きな違いがあります。

<p>の中には、ブロック要素を入れてはいけません。
<div>などを間に使うとCSSが効きません。これは覚えておく必要があります。

また、上下にはデフォルトで余白ができます。
余白を消す場合はCSSを使用します。

ul/リスト

リストを表す。

結果

解説

<ul>~</ul>は、その範囲がリストだという意味です。
実際のリストは<li>~</li>で囲みます。
<ul>と<li>はセットで覚えておきましょう。

ol/番号リスト

番号リストを表す。

結果

解説

利用方法は<ul>~</ul>と大きな違いはありませんが、
リストを番号で表示する方法です。
開始番号、番号の順番などを指定できます。

【逆順に表示する場合】
<ol reversed="">

【開始番号を指定する場合】
<ol start="3">

dl/用語リスト

記述リスト(Discription List)。

結果

りんご
林檎は、バラ科リンゴ属の落葉高木樹。またはその果実のこと(Wikipedia参照)
レモン
檸檬は、ミカン科の常緑低木。またはその果実のこと。(Wikipedia参照)

解説

利用方法は<ul>~</ul>と大きな違いはありませんが、
<dl>~</dl>の中に使われるタグは
<dt>項目</dt>
<dd>解説</dd>
といった使い方をします。

blockquote/引用文

引用文を表す。

結果

HTML

HTMLは楽しく学んでいくことが大切です。
私が初めて使ったときは、まるで魔法使いにでもなったかのような
感動がありました。

解説

<blockquote>で引用した元サイトのURLを書くときは<blockquote cite="http://~">と書きます。

見ていただいてわかるように、<blockquote>はインデントがデフォルトでかかります(ブラウザに依存します)。

pre/整形テキスト

整形済みテキストを表す。

結果

解説

<pre>タグの最初の行は無視されます。

figure/図画

図画(写真・コード・図・表…等)。

結果

仙台:光のページェント
冬の仙台市の名物。

解説

<figure>タグは、メインコンテンツにあたる写真や、ソースなどを意味します。
<figcaption>は、そのキャプションです。(※必須ではありません)

hr/ライン

区切り線を表す。

結果

林檎は、バラ科リンゴ属の落葉高木樹。またはその果実のこと(Wikipedia参照)


檸檬は、ミカン科の常緑低木。またはその果実のこと。(Wikipedia参照)

解説

<hr>には閉じタグ(</hr>)がありません。

XHTMLでは<hr />と書かなければなりませんでしたが、HTML5では、<hr>でも<hr />でもどちらの書き方も良いとされています。