HTMLとは?HTMLの基本を総まとめ

この記事ではHTMLにおけるタグや、基本的な記述についてまとめています。

HTMLを勉強し始めたばかりの人にも伝わるよう、わかりやすく解説していきます。

HTMLとは?

HTMLとはWEBページを構成するマークアップ言語の一つです。この記事も、HTMLによって表示されています。WEBページがちゃんと見やすいように表示されているのは、HTMLによってPCに「このように表示して下さい」という指示を出しているためなのです。

HTMLのタグ

HTML文書では「タグ」と呼ばれる文字列を使って、テキストに印を付けていきます。故にマークアップ言語と呼ばれるのですね。例えば上の「HTMLのタグ」のような見出しは、h3というタグを使うことでこのように表示されています。

HTMLの基本

見出しを作ろう

<h></h>でテキストを囲むことで、見出しを作成することができます。見出しには<h1>から<h6>までの6種類があります。見出しは<h2>の次に<h3>というように、順序を正しく守って使うことが推奨されています。

見出しを使うことで文章も読みやすいものになります。特にこういったWEBページでは、要所要所で積極的に見出しを使うことで、ユーザーにとって読みやすいページに繋がります。

段落を作ろう

段落とは文章のまとまりのことですね。HTMLではこの段落も、タグで指定していきます。<p></p>のタグでテキストを囲むことで、段落を作成することができます。

改行をしよう

HTML文書では、<br>タグを使って改行をすることができます。改行タグはこれだけで成立するものであり、テキストを挟んだりする必要はありません。改行したい箇所に差し込むだけでOKです。

画像を表示しよう

WEBページは画像を使うことでより伝わりやすい記事を作成できます。画像の表示を行うのにも、タグで指定してあげる必要があります。HTMLでは、<img>というタグを使って画像の表示を行います。

画像を表示するためには、<img src=”picture.jpg(画像名)” alt=”これは画像です。”>といった書き方をします。「src=””」の部分は、表示したい画像名を記述します。こうすることで、PC側に「この名前の画像を表示して下さい」と指示することができます。

「alt=””」の部分は、画像が表示できなかった場合の文言を記述します。画像が表示されなくても、何の画像かが分かるようにしておくためですね。

リンクを作成しよう

<a></a>のタグでテキストを囲むことで、リンクを作成することができます。リンクとは、別のWEBページへジャンプできる文字列のことです。リンクがあることで、ページを訪れたユーザーは他のページへ簡単にアクセスできるようになるのです。

aタグは、「ここからここまではリンクに使います」と指示しているだけです。そのためリンクを作成するには、リンク先のURLも記述する必要があります。「href」でリンク先を指定しているわけですね。

箇条書きを作成しよう

<ul><ol><li>といったタグを使うことで、箇条書きを設定することができます。箇条書きにしたい項目を<li>タグで囲み、さらにそれらをまとめて<ul><ol>タグで囲むことで、箇条書きとして表示することができます。

コメントアウト

<!–◯–>で「コメント」を残すことができます。コメントは、実際のwebページなどでは表示されません。故にコードを書く際のメモとして使うことができます。