・要素
段落、箇条書き、イメージなど、Webページを個性する単位
・タグ
HTMLは「タグ」と呼ばれる特別な記号を使て文章構造を記述する。
「<>」で囲まれる部分を「タグ」という。
「開始タグ」と「終了タグ」のペアで使うものと、「開始タグ」だけのものがある。
「終了タグ」には「/（スラッシュ）」がつく。
・属性
要素に追加できる詳細な情報。
開始タグの中に記述をする。
ひとつの要素に対して複数の設定も可能で、記述する順番は自由。
・空要素
<img>タグのように内容を持たない要素のこと。
終了タグは不要。
例：文字列を段落にする
<p>在宅ママのデザイン学習室</p>
◆解説
<開始タグ>～～～内容～～～<終了タグ>
※p要素は段落を表す要素。
あまり詳しく記述がなかったのですが、ひとつの文章のまとまり。と考えてください。
<p>から</p>まですべてが「p要素（段落）」となります。
例：イメージファイルを挿入して代替え文字を設定する
<img scr = “mamadesign.jpg” alt = “在宅ママのデザイン学習室へようこそ”>
◆解説
<開始タグ 属性(scr) = “値（mamadesign.jpg)” 属性(alt) = “値（在宅ママのデザイン学習室へようこそ）“>
※img要素はイメージファイル（画像）を表す要素
※scr属性は、イメージファイルを設定する属性
値はファイル名になります。
※alt属性は、画像が表示されない場合に表示する文字列を設定
任意のテキストを設定します。
【HTML記述時の注意点】※重要！！
①半角で入力する
②大文字、小文字の区別はない（サーバーやプロバイダによって指定がある場合もある）
→小文字で統一するのがベストです！
③インライン要素は、ブロックレベル要素の中に記述する
・ロックレベル要素
文章の骨組みを構成する要素。
ブラウザでは前後が改行して表示される。
・インライン要素
ブロックレベル要素の内容の一部。
ブラウザで前後は改行されない。
単独で記述せず、必ずブロックレベル要素の中に記述する。
例①
【◎】
<body>
<p><img scr = “mamadesign.jpg” alt = “在宅ママのデザイン学習室へようこそ”></p>
</body>
【×】
<body>
<img scr = “mamadesign.jpg” alt = “在宅ママのデザイン学習室へようこそ“>
</body>
【ポイント】
<p>要素はブロックレベル要素、<img>はインライン要素
その為、<img>タグは単独で使うことが出来ず、ブロックレベル要素である<p>要素の中に記述する必要がある。
例②
【◎】
<body>
<p>私は<em>デザイナーの卵</em>です。</p>
</body>
【×】
<body>
私は<em>デザイナーの卵</em>です。
</body>
【ポイント】
強調を表す<em>タグはインライン要素なので、ブロックレベル要素の中に記述する必要がある。
（<em>タグは、文字が斜めになって表示されるタグです。）
【親要素と子要素】
子要素はかならず親要素の中に記述をします。
【◎】
<p>私は<em>デザイナーの卵</em></p>
【×】
<p>私は<em>デザイナーの卵</p></em>
【ポイント】
この場合、<p>要素が親要素、<em>要素が子要素となります。
<em>タグの終了タグが、<p>要素の終了タグより後ろに来てしまうと、段落自体に強調がかかってしまいます。
子要素は親要素の中に記述をしましょう。
—————————————————
HTMLのタグの基本は、
<要素+属性>内容<終了タグ>
となります。
「内容」に対して、タグの内容（要素+属性）が反映する、という意味です。
ただし、空要素の場合は、
<要素+属性>
のみとなり、要素に対して属性が反映されるだけです。
英数字が並ぶととっつきにくくなりますが、覚えてしまえば書き方は一緒なので簡単！
「<要素>–内容–</要素>」が基本です！
この投稿は、以前運営していた同名のブログに当時書いたものを再掲載しています。
そのため、現在はデータがない画像などもあります。ご了承ください。
また、アフィリエイトやホームページの情報についてのブログですが、情報としても古いものが多いです。
過去の記事を改めて更新する予定はございませんので、ご承知おきください。