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

HTMLの基本 - 5分で理解するHTMLコーディング

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

HTMLの大枠構成

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

headとbody - htmlタグの大枠構成

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

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

html内のheadタグとbodyタグ

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

タグの基本

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

コーディング画面 Webブラウザでの見え方
pタグ - htmlの基本 pタグのWebブラウザでの見え方

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

コーディング画面 Webブラウザでの見え方
pタグとbrタグでのhtmlコーディング Webブラウザでの見え方 - pタグとbrタグ

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

セミオーダー式で実現!
高品質なウェブサイトを低価格で
シンプルでクオリティの高いウェブサイト制作!SEOのプロが低価格で作成します。
お申し込みはこちら