WEBプログラミング学習やホームページを作成しようと思ったら必ず使用するのが『HTMLタグ』!最近ではノーコーディングといってHTMLタグなしでも作成できるサイトなどもありますが、やっぱりプログラミングの基本は『HTMLタグ』ですよね。
しかし、プログラミング初心者の方は「HTMLタグって難しそう」とか「HTMLタグがわからなかったらプログラミング学習についていけないんじゃないか」とネガティブに感じている方も多いのではないでしょうか。
そこで今回は、プログラミング初心者の方のためにHTMLタグの一覧と役割を解説していきたいと思います。
![](https://utakata-plan.com/wp-content/uploads/2023/08/main-top-img.jpg)
難しい専門用語を使わずに、わかりやすく解説していきますのでぜひ参考にしてみ てください。
目次
HTMLとは?
HTMLとは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」のことで『マークアップ言語』と呼ばれるものになります。
マークアップ言語とは?
マークアップ言語とは他にもHTMLの他にも『SGML』や『XML』といったものがあります。
マークアップ言語とはマークをすることで文章を構造化する言語のこと。
「ここには見出しを配置しますよ」「ここは表を挿入しますよ」とマークしてあげることで文章が構造されていき、サイトや記事が見やすいものとなっていきます。
ちなみに、プログラミング言語とマークアップ言語は違うので注意してください!!
一般的に、マークアップ言語とは文章を構造化するための言語(見出しや表、リスト作成など)で、プログラミング言語はデータを計算・処理をする言語です。
ちょっとややこしいのですが、違いがあるので惑わされないようにしましょう!
HTMLとは?
それでは改めてHTMLは何かって言うことをお話していきましょう。
HTMLが使えるようになるとWEBページが作成できるようになります。
ほとんどのWEBページはHTMLを使って制作されているんです。
![](https://utakata-plan.com/wp-content/uploads/2023/08/main-top-img.jpg)
今見ていただいているこのサイトももちろんHTMLを使って作られているんですよ(^^)
HTMLタグの役割
HTML とは見出しを付けたり、表を入れたり、文字にいろいろな装飾ができたりすることのできる言語だということがわかったところで、HTMLタグの仕組みや役割についてお話していきましょう。
コンピューターは人間と違い、どこの部分が大事な文章かを判断することができませんし、それに伴い文字の装飾を自動で変えてくれることはありません。
「ここ大事だから赤文字で大きく強調したい!」って思ってもコンピューターが自らやってくれることはないので、コンピューターに指示しないといけません。
コンピューターに指示、といっても口で「赤で強調よろしく!」っていうだけではコンピューターは動いてくれませんよね^^;
そこで、コンピューターにわかるようにだすこの指示を「HTMLタグ」を使って行います。
『タグ』とは一言で表すと「テキストに意味を与えるマーク」です。
「ここは赤文字にしてね」「ここは見出しだからね」というように、コンピューターにしっかりと教えてあげるためのものです。
ちなみに、タグで囲んだ文字列を「要素」と言います。この『タグ』や『要素』といった単語はHTMLではめちゃくちゃよく使用するので、しっかり理解しておきましょう!
よく使うHTMLタグ一覧
次に、タグの中でもよく使われているHTMLタグの種類を紹介したいと思います。
タグ名 | タグの役割 |
---|---|
h | 見出しのこと h1が一番大きくh2、h3、h4と続きます。 一般的には記事の大見出しにh2、小見出しにh3、h4、h5を使います |
p | 段落(改行) |
a | リンクを挿入 |
li | 箇条書き |
strong | 文字を強調 |
タグの役割を解説
【h】…見出し:(h1、h2、h3…)
見出しを設定したいときは<h1>や<h2>などの<h>タグを使い、<h1>が最も大きな見出しとなります。
一般的にはh2〜h4のタグをよく使います。
【p】…段落:通常のテキスト
段落をつけるときには<p>タグを使います。
ここで注意が必要なのが、<p>タグ内で改行してもブラウザの表示では改行されないということ!
OK例:<p>このようにしようします。</p>
NG例:<p>このように
すると改行されません。</p>
こんな感じで<p>の途中で改行しても正しく表示されないので注意してください!
【a】…リンクを挿入
リンク付のテキストを表示したい時に<a>タグを使います。
【li】…箇条書き
文字を箇条書きにしたい時は<il>タグを使用します。
【strong】…太文字で強調
<strong>タグは文字を太くして強調したい時に使います。
この他にもHTMLには多くのタグがあります。
まとめ
いかがでしたでしょうか?
hとかliとかstoronといった英単語がでてきたりすると、「難しそう〜…!」って思ってしまいがちですが、中身はとってもシンプルです。
最初は、気になったサイトを右クリックしてソースを見たり、自分で簡単なタグを使って書く!を繰り返して感覚を掴んでみるといいでしょう。
なんならコピペからでも全然大丈夫です。
「習うより慣れよ」で実践あるのみです!
今回紹介したタグ以外にも、たくさんのタグがありますので、「HTMLタグ一覧」を見ながら少しずつ覚えていくのがいいかと思います。
そして、自分で作成しているうちに見た目にもこだわりたくなってきたらCSSを使えばもっと自分のイメージ通りに表示されるようになり楽しくなってきます。(CSSの話はまたいずれ…)
最初は戸惑うこともあるかもしれませんが、慣れてくるとだんだん楽しくなってくると思います。
是非、楽しみながら学習していってくださいね!
最後までお読みいただきありがとうございました。
![](https://utakata-plan.com/wp-content/uploads/2023/09/utakata-bottom-bnr-1024x333.png)