たくさんあって覚えられない！HTMLタグの一覧と役割をわかりやすく解説

2023.09.08

WEBプログラミング学習やホームページを作成しようと思ったら必ず使用するのが『HTMLタグ』!最近ではノーコーディングといってHTMLタグなしでも作成できるサイトなどもありますが、やっぱりプログラミングの基本は『HTMLタグ』ですよね。

しかし、プログラミング初心者の方は「HTMLタグって難しそう」とか「HTMLタグがわからなかったらプログラミング学習についていけないんじゃないか」とネガティブに感じている方も多いのではないでしょうか。

そこで今回は、プログラミング初心者の方のためにHTMLタグの一覧と役割を解説していきたいと思います。

難しい専門用語を使わずに、わかりやすく解説していきますのでぜひ参考にしてみてください。

HTMLとは？

HTMLとは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」のことで『マークアップ言語』と呼ばれるものになります。

マークアップ言語とは他にもHTMLの他にも『SGML』や『XML』といったものがあります。

マークアップ言語とはマークをすることで文章を構造化する言語のこと。

「ここには見出しを配置しますよ」「ここは表を挿入しますよ」とマークしてあげることで文章が構造されていき、サイトや記事が見やすいものとなっていきます。

ちなみに、プログラミング言語とマークアップ言語は違うので注意してください!!

一般的に、マークアップ言語とは文章を構造化するための言語(見出しや表、リスト作成など)で、プログラミング言語はデータを計算・処理をする言語です。

ちょっとややこしいのですが、違いがあるので惑わされないようにしましょう!

それでは改めてHTMLは何かって言うことをお話していきましょう。

HTMLが使えるようになるとWEBページが作成できるようになります。

ほとんどのWEBページはHTMLを使って制作されているんです。

今見ていただいているこのサイトももちろんHTMLを使って作られているんですよ(^^)

HTML とは見出しを付けたり、表を入れたり、文字にいろいろな装飾ができたりすることのできる言語だということがわかったところで、HTMLタグの仕組みや役割についてお話していきましょう。

コンピューターは人間と違い、どこの部分が大事な文章かを判断することができませんし、それに伴い文字の装飾を自動で変えてくれることはありません。

「ここ大事だから赤文字で大きく強調したい!」って思ってもコンピューターが自らやってくれることはないので、コンピューターに指示しないといけません。

コンピューターに指示、といっても口で「赤で強調よろしく!」っていうだけではコンピューターは動いてくれませんよね^^;

そこで、コンピューターにわかるようにだすこの指示を「HTMLタグ」を使って行います。

『タグ』とは一言で表すと「テキストに意味を与えるマーク」です。

「ここは赤文字にしてね」「ここは見出しだからね」というように、コンピューターにしっかりと教えてあげるためのものです。

ちなみに、タグで囲んだ文字列を「要素」と言います。この『タグ』や『要素』といった単語はHTMLではめちゃくちゃよく使用するので、しっかり理解しておきましょう!

次に、タグの中でもよく使われているHTMLタグの種類を紹介したいと思います。

タグ名	タグの役割
h	見出しのこと h1が一番大きくh2、h3、h4と続きます。一般的には記事の大見出しにh2、小見出しにh3、h4、h5を使います
p	段落（改行）
a	リンクを挿入
li	箇条書き
strong	文字を強調