HTML学習でまず最初に覚えるべきタグ7選【目的別タグ一覧】

HTMLを学習し始めると「タグ」というものが無数にあるように感じるのではないでしょうか？

今回の記事では、HTMLに触れたばかりの人がまず最初にこれだけは覚えておきたいというタグについてご紹介します。

CSSを同時に学習する上で有効に活用できるものも紹介しておりますので、参考にしてみてください。

文章を適切に分かりやすく表示させるためのタグ4選

タグの中でも文章構造を分かりやすくしたり、HTMLとCSSをセットで使う際に頻繁に登場するタグを４つご紹介します。これから学習するHTMLタグのほとんどは<〇〇>という形で始まり</〇〇>で終わります。<〇〇>の部分を開始タグ、</〇〇>の部分を終了タグと呼びますが、中には終了タグがないものも存在します。

<h1>～<h6>　見出しを表すタグ

hタグは1~6まであり、番号が若いほど記事内で重要な位置づけと判断され、文章内で大きな見出しとして表示されます。SEOなどでもhタグは重要な要素となっているため、Web制作をする上では欠かせません。エディター内では次のように入力します。

<h1>テキスト</h1>
<h2>テキスト</h2>
<h3>テキスト</h3>
<h4>テキスト</h4>
<h5>テキスト</h5>
<h6>テキスト</h6>

<p>　段落を表すタグ

段落はpタグで表し、自動的に改行されます。段落を変えずに、改行のみの場合は,<br>という別のタグを使用しますが、ブラウザで表示される上では大きな違いはありません。エディター内では次のように入力します。

<p>テキスト</p>

<div>　範囲指定を表すタグ

divを使うことで範囲を指定し、CSSで書き込まれた情報を同じclass名のdiv要素内全体に反映することができます。少し難しいので具体例を想像してみてください。

例えば、メインコンテンツを3分割し、それぞれの見出し、小見出しで同様のフォントサイズ、カラーを適用したい場合、一つ一つの見出し、小見出しにそれぞれフォントサイズやカラーを設定していく方法があります。ですが、あまり効率的とは言えません。そこでdivタグの登場です。div要素を追加し、同じフォントサイズ、カラーを適用する部分に同一のclass名をつけておくことで効率よくcssを反映させることができます。エディター内ではh2を範囲として指定したい場合は次のように入力しますが、cssとセットで使うものだと覚えておくとよいでしょう。

<div>
  <h2>テキスト</h2>
</div>

<span>　範囲指定を表すタグ

spanタグはdivと同様、範囲を指定するタグです。ではいったい何が違うのかというと、spanタグはインライン要素と呼ばれ、エディター内では改行されないというのが大きな特徴です。役割としては、文中の一部分のみを範囲指定し、その部分にのみcssで記述した情報を反映することが可能です。ここまででご紹介したもののなかで、唯一のインライン要素タグとなります。（ちなみに、hタグ、pタグ、divタグはブロック要素と呼ばれます。）エディター内では次のように入力します。

テキストの「ト」のみに、cssの情報を反映させることができます。こちらもcssとセットで使うものだと覚えておきましょう。

<h2>テキス<span>ト<span/></h2>

表現の工夫や画像にまつわるタグ3選

ここまででご紹介した4つのタグは文章構造を表し、段落をつけ、効率的に文字サイズや文字色を変更できるというものでした。次は、画像やリスト、リンクといった、制作したページを更にわかりやすく読みやすくするタグについご紹介します。

<img>　画像を表すタグ

画像を表すimgタグには終了タグがありません。src属性という「情報元」（sourceの略）の明示によって、画像を表示させます。エディター内では次のように入力します。

<img src="http://～">

<ul>・<ol>・<li>　リストを表すタグ

ul、ol、liはそれぞれ単独では使いません。ulとli、またはolとliを組み合わせることによって、リストをつくります。ulタグを使う場合、文の先頭に黒点が付き、箇条書きのようなリストになります。olタグを使う場合、数字が上から1,2,3…と連番でつきます。また、<ul></ul>の中に<li></li>が入る、今回のような構造を入れ子と呼びます。要素が要素の中に入っている場合は基本的に改行だけでなく、インデント（字下げ）をするとより見やすくなります。エディター内では以下のように入力します。

<ul>
  <li>テキスト1</li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ul>
<ol>
  <li>テキスト1</li>
  <li>テキスト2</li>
  <li>テキスト3</li>
</ol>

<a>　リンクを表すタグ

aタグは主にhref属性（hypertext referenceの略）でリンク先を指定するときに使われます。基本の形として、まずはURL（絶対パス）のリンクを覚えましょう。

<a href="https://～">リンクテキスト</a>

URLは飛び先ですが、リンクテキストの部分をURLに差し替えることで

<a href="https://wp-load.in/">https://wp-load.in/</a>

https://wp-load.in/

というような表示も可能です。

【まとめ】html学習でタグを覚えるよりも大切なこと

htmlを学習していると、「タグを制するものがwebを制する」なんて言葉も見かけます。しかし、ただタグの文字列と意味を覚えるだけでは全く意味をなしません。

タグを覚えているだけでは、web制作は進まないからです。

効率的にhtml学習を進める上で初心者が大切にしたいことは、実際に手を動かして、完成物を見ながらああでもない、こうでもない、と迷いながら成長していくことではないでしょうか。

インターネットが加速度的に普及してきたことで、htmlの学習も本からwebが主流になってきました。有名なものだと、「Progate」というブラウザ上で実際の制作画面を見て、タグを打ち込みながらアウトプットとインプットが同時にできるサービスもあります。

初級編は無料で学習を進めることができるので、自己流の進め方に悩んでいる方は一度試してみてはいかがでしょうか。
Progate：https://prog-8.com/