シリーズ記事「初心者もできる！プログラミング基礎講座」の第2回は、HTMLの要素について説明します。HTMLの基本構成やHTMLタグの様々な要素の中で、リンク、リスト、画像について書いています。とりあえず、全体像をつかみ、よく使う要素の記述方法を理解できます。
HTMLの基本構成
画像のようにHTMLは基本的に2つの要素からなっています。
- HEAD（ヘッド）
- BODY（ボディ）
これら2つを<html>（開始タグ）と</html>（終了タグ）で囲んでいます。これによりファイルがHTML文書であることが分かります。
HEAD要素
これはページの設定情報を記述する部分です。文字コードやタイトルの設定などが書かれます。この内容は実際のページには表示されません。例えるなら、”枕詞（まくらことば）”のように定型文と考えることができます。
BODY要素
ページの中身です。実際に表示させたい内容を記述していく部分です。
大体の全体像をつかめたでしょうか。詳細は今後の記事で書いていきます。
HTLMタグの要素
タグの要素はたくさんあります。しかし、よく使うものは20にも満たないくらいです。代表的な要素のいくつかを解説します。
リンク
要素：<a>
開始タグ<a>と終了タグ</a>で囲むことで、かんたんにリンクを作成できます。しかし、リンク先を指定する必要があります。
上の画像のように、href属性を追加し、リンク先のURLをダブルコーテーションで囲んで記述します。これにより「詳しくはこちら」というテキストのリンク先を指定できます。もちろん記述するURLは任意のものです。（画像では弊社コーポレートサイトのURLになっています）
要素と属性の間（画像の場合、aとhrefの間）にスペースを入れるのを忘れないようにしましょう。
リスト
要素：<li> リスト項目
要素：<ul> 黒丸のリスト
要素：<ol> 数字のリスト
<li>タグで囲むだけではリスト項目を記述しているにすぎません。画像のように、さらに<ul>タグで囲むとリストの頭に黒丸のついた表示になります。
イメージは、親となる<ul>要素が、子である<li>要素を囲むといった感じです。親の間に”入れ子”することになります。親子関係を分かりやすく記述するために、イデント（「Tab」キーを押すかスペースを2つ）をつけて子要素を1段下げておきます。
<ol>タグで囲めば、リストの頭に数字がついた表示なります。
画像
要素：<img>
src属性を追加し、画像のURLをダブルコーテーションで囲んで記述します。テキストを囲わないため終了タグは不要です。
リンクや画像では、それぞれ属性が追加されるという点を覚えておきましょう。組み合わせは基本的に同じです。正確にいえば違うものもありますが、よく使うのは上述の組み合わせです。
コメント（注釈）
要素：<!–（コメント）–>
HTMLを記述していくとたくさんの情報が入るため、他の人が見た時にすぐにわからないことがあります。自分自身もどこに何を書いたのか見つけにくいことがあります。こうした時にコメントを活用できます。ブラウザ上に表示させずにメモを書くことができるというわけです。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第2回】はいかがでしたか。HTMLの基本構成やHTMLタグの要素と記述方法について解説しました。
次回はCSSについてです。今回のHTMLの要素に関連しており、ページの印象を大きく変える重要な部分です。
次回をお楽しみに！