HTMLの基本をわかりやすく!5分で分かるHTMLコーディング
HTMLは、ウェブページを作るための言語です。ウェブサイトを作る上で、最初に学ぶ基本の言語です。
HTMLの大枠構成
HTMLの中のコードをみると、大きくは下記2つのタグで囲まれています。
headで囲まれた範囲 | bodyで囲まれた範囲 |
---|---|
・ウェブページには表示されない部分 | ・ウェブページに表示される部分 |
headで囲まれた範囲は、ウェブページには表示されません。ここは、ユーザーがGoogleで検索した時の、検索結果ページなどで表示される部分です。ウェブページの表示内容を変えたいときに編集するのは、bodyタグで囲まれている部分です。
ここからはbodyの中に入れるタグを紹介していきます。
タグの基本
たとえばpタグで囲んだ範囲は、パラグラフ(段落)のひとまとまりという事です。
コーディング画面 | Webブラウザでの見え方 |
---|---|
タグは入れ子にすることができます(タグで囲んだ中に、さらにタグをいれることができます)。たとえば上記のpタグの中に、改行を意味するbrタグを含めることができます。pタグの中にbrタグをいれると、下記のようになります。
コーディング画面 | Webブラウザでの見え方 |
---|---|
よく使われるHTMLタグ
よく使われるHTMLのタグには、以下のようなものがあります。
よく使われるタグの種類と概要
タグの種類 | 概要 |
---|---|
h1 | 大見出し。中見出しはh2。小見出しはh3。h6まで可能。 |
p | パラグラフ(段落) |
img | 画像 |
a | リンク |
strong | 強調 |
br | 改行 |
ul・li | リスト(箇条書き) |
div | これ自体に意味はなく、ひとつのまとまりを示す |
それぞれのHTMLタグは、実際には下記のように記述します。
よく使われるタグの種類と使用例
タグの種類 | タグの使用例 |
---|---|
h1 | <h1>見出しタイトルをここに記述する</h1> |
p | <p>ここに文章を記述する</p> |
img | <img src="https://sma-web.com/images/sample.png"> |
a | <a href="https://sma-web.com/basis/html-guide-basic">5分で分かるHTMLガイド</a> |
strong | <strong>強調したい文字や文章を挿入する</strong> |
br | ここに改行前の文章を記述。<br>ここに改行後の文章を記述。 |
ul | <ul> <li>1つ目の箇条書き</li> <li>2つ目の箇条書き</li> <li>3つ目の箇条書き</li> </ul> |
div | <div>この中に他のコードを挿入する</div> |
実際のタグには「id」や「class」と書かれたコードが追加で含まれていることがあります。これはそれぞれに固有の印をつけるためのものです。HTML初心者は、ひとまずそんなものもあるということを知っておけば十分です。