HTMLの基本をわかりやすく！5分で分かるHTMLコーディング

HTMLは、ウェブページを作るための言語です。ウェブサイトを作る上で、最初に学ぶ基本の言語です。

HTMLの大枠構成

HTMLの中のコードをみると、大きくは下記２つのタグで囲まれています。

headで囲まれた範囲	bodyで囲まれた範囲
・ウェブページには表示されない部分	・ウェブページに表示される部分

headで囲まれた範囲は、ウェブページには表示されません。ここは、ユーザーがGoogleで検索した時の、検索結果ページなどで表示される部分です。ウェブページの表示内容を変えたいときに編集するのは、bodyタグで囲まれている部分です。

ここからはbodyの中に入れるタグを紹介していきます。

たとえばpタグで囲んだ範囲は、パラグラフ（段落）のひとまとまりという事です。

コーディング画面	Webブラウザでの見え方

タグは入れ子にすることができます（タグで囲んだ中に、さらにタグをいれることができます）。たとえば上記のpタグの中に、改行を意味するbrタグを含めることができます。pタグの中にbrタグをいれると、下記のようになります。

コーディング画面	Webブラウザでの見え方

よく使われるHTMLのタグには、以下のようなものがあります。

それぞれの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初心者は、ひとまずそんなものもあるということを知っておけば十分です。