プログラミングを始めようと考えている人は、恐らくHTMLから手をつける人が多いと思います。

しかし、覚える事が沢山ありすぎて何から手を付けていいか悩んでるんじゃないんでしょうか？

HTMLを始めるにあたり基本的にどんな場面でも使うであろうタグ要素を紹介します。

[目次]

1.タグ＝＜＞について

2.<h>タグ

3.<p>タグ

4.<ul>と<li>タグ

5.<img>タグ

6.<a>タグ

1.　タグ＜＞＜/＞について

はじめに、＜＞←左の記号をタグと言います。

＜＞←開始タグ　＜/＞←終了タグ

これからHTMLで文章を書くときには、このタグとタグの間に文章を書く事になります。

例

＜＞おはようございます＜/＞

のようになります。

そしてこのタグの中に要素を入れる事で、文章に様々な要素を取り入れる事ができます。

例

<h1>おはようございます</h1>

<p>おはようございます</p>

上は大きく、下は小さく作なりましたよね！

のようにタグに要素入れる事で、それぞれ違った特徴を文章に取り入れる事ができます。

要素の説明は後半でお話ししていきます。

2. <h>タグについて

簡単に言うと、文字の大きさを変える要素です。

上記の画像でも出てきましたが、文章の中でどれが最も重要なのか。その次に重要なのは…

と重要度を区別してくれます。

<h>要素は要素に付ける数字によって、重要度が変わります。

小さい数字が最も重要で文字も大きくなり、数字が大きくなるにつれて重要度は小さく文

字も小さくなります。

実際に試していきましょう。

使い方の例

<h1>こんにちは<h1>

<h2>こんにちは<h2>

<h3>こんにちは<h3>

<h4>こんにちは<h4>

・・・

エディタで表示するとこのようになります。

ブラウザで表示するとこのようになります。

<h1>～<h4>にかけて、文字が小さくなりましたね！

このように<h>要素では、重要度に応じて文字の大きさを変える事ができます。

3. <p>要素について

<p>タグとは、段落要素になります。

一般的に文章を書く際、字下げや改行をして段落を区別すると思います。

HTMLでは、その段落を区別する役割を<p>要素が行っています。

とても頻繁に使う要素なので使えるようになっておきましょう。

使い方の例

<p>今日は一日晴れです。

体調に気をつけて過ごしましょう</p>

<p>明日は一日雨です。

足元に気をつけて過ごしましょう</p>

エディタで表示するとこのようになります。

ブラウザで表示するとこのようになります。

上と下の文章の間に改行が入り、段落分けされた事がわかります！

このように<p>タグを使う事で、簡単に段落分けする事ができます。