皆さんは、プログラミングと聞いてどのようなイメージを抱いていますか？
よく人にプログラミングのイメージを聞くと難しそうという答えが高確率で返ってきます。
しかし、プログラミングって一見難しそうに見えますが、理屈を理解すればそこまで難しくはないのです。
そこで今回は、プログラミングを学びWebサイト制作を行う際には、必ず必要なHTMLという言語についてご紹介しますので、ご覧ください！
目次
HTMLコードは、サイト制作に必須
HTMLとは、Hyper Text Markup language（ハイパーテキスト・マークアップ・ランゲージ）の略です。
ちなみに、Webページを作る際に最も必要なマークアップ言語のうちの一つなのでこの記事を読んでマスターしましょう！
皆さんも、何か調べ物をしたい時Googleで検索機能を使って調べると思いますが、その調べるサイトのほとんどがこのHTMLを用いて作られています。
HTMLコードの役割は、分かりやすくするため
ちなみに、Hyper Text Markup language（ハイパーテキスト・マークアップ・ランゲージ）を日本語に訳すると「ハイパーテキストに目印をつける言語」となります。
では、Hyper Text（ハイパーテキスト）というのは、ハイパーリンクを埋め込むことができるテキストのことです。
このハイパーリンクとは、Webサイトを閲覧する際に見た経験がある方も多いと思いますが、URLに下線が引いてありそのURLをクリックすると、他のWebページに飛ぶことができます。
そのようにHTMLは、そのハイパーリンク機能で関連する情報同士を集めて整理する特徴があるのです。
では、Markup（マークアップ）とはどういう意味かというと、ブログを執筆した経験がある方はわかると思いますがWebサイトを制作する時には構成を練らなければいけません。
ブログであれば見出しは必須ですし、時にはリストや表が必要な場合もあります。
このように、文書内に必要な見出しなどの各部分のことを要素（element）と呼び、どんな要素か言語で明確にすることによって、コンピュータが文章の構造を理解できるようになります。
つまり、わかりやすいサイトを作るために目印をつけるための記号としてHTMLタグは使われているのです。
HTMLコードの文書情報を表すタグ
実は、HTMLのタグは全部で100種類以上もあります。
それを全部覚えるのはとても大変だと思うので、絶対知っておくべきHTMLのタグをいくつかご紹介しますのでご覧ください！
それでは、文書情報を表すタグを5つご紹介します！
<html>タグ
HTMLは、<html>と</html>で文章全体を囲って、HTMLの文章であることを表す文章です。
ちなみに、HTMLでプログラムを作るときは必ず記述をしなければいけません。
<head>タグ
<head>は、ブラウザや検索エンジンに必要な情報を渡すために必ず、必要なタグです。
headタグの中に<title>や<meta>、<link>といった文書情報を表すタグを中に入れることは覚えておきましょう！
<tittle>タグ
<title>は、文字通りページのタイトルを作成する際に用いるタグです。
ブラウザのタイトルバーにも、表示されます。
<meta>タグ
<meta>は、そのWebサイトのキーワード、ディスクリプションと言って検索した時にタイトルの下に表示される説明文などを記載するタグです。
つまり、metaタグは、検索する人にこのサイトはどういうサイトですよといったこのサイトを開くか開かないかの役割をしています。
<link>タグ
<link>は、外部ファイルを読み込む時に使うタグです。
例えば、ファビコンといってインターネットで検索した際に検索タブの左側に表示されるアイコンの読み込みなどに用いられます。
特定のまとまりをまとめるタグ
サイトを作成する時には、Webサイトをわかりやすくするために見出しであったり特定のまとまりを作ったりする機会が多いです。
そのため、その特定のまとまりをまとめるタグをご紹介します！
<body>タグ
<body>は、ユーザーが見ることができる文書の内容を書き込む際に用いる言語です。
なぜこのタグを使う必要があるかと言いますと、普通の文書だけだとコンピュータがそれを文書だと認識してくれないため、この<body>タグをつけることで初めて認識してくれます。
<section>タグ
<section>は、一つのまとまりであることを示す時に用いられるタグです。
例えば、Webページ内のセクションとしては、導入部分のところによく使われています。
<h1>〜<h6>タグ
<h1>〜<h6>とは、見出しを作成する時に用いられているタグです。
ちなみに、数字が小さいタグほど見出しは大きくなります。
<p>タグ
<p>とは、段落を作成する際に用いられるタグです。
このタグを使うことで、より見やすいサイトを作成することができます。
<div>タグ
<div>とは、単体では意味を持たないタグですが、囲った部分をブロックレベル要素としてグループ化することができるタグです。
例えば、Webサイトのレイアウトを構成する際に必要なタグであり、重要なタグのうちの一つなので特に覚えておきましょう。
<header>タグ
<header>とは、Webサイトの冒頭によく用いられているタグです。
例えば、画像や冒頭のタイトルなどによく用いられています。
<footer>とは、<header>タグとは反対にページの下の部分で用いられているタグです。
コンピュータに「この部分は、サイトの下の方ですよ」て教えるためにこのタグを使います。
文章や画像などを表すタグ
文章や画像を表す際にも、タグを用いないとサイトをしっかり表示させることができないため、こちらのタグもぜひ、覚えてください！
<img>タグ
<img>とは、「image」の略称で文書内に画像を表示する際に、用いられるタグです。
ちなみに、画像の大きさを指定したいときは、<img>の中に「weight（幅）」と「height（高さ）」という属性を加えて、その後に＝（イコール）で数字を表記すれば画像の大きさを変更することができます。
<a>タグ
<a>とは、指定した部分をハイパーリンクとして扱うことができるのです。
ちなみに、文章だけではなく画像もリンクさせることができます。
<table>タグ
<table>とは、<tr>、<th>、<td>などと組み合わせて、表を作成する際に用いられるタグです。
ちなみに、
- <tr>は、縦の列を作るタグ
- <th>は、見出しを作るタグ
- <td>は、横の行を作るタグ
として使われています。
<script>タグ
<script>とは、Java ScriptといったWebサイトを表示するブラウザ上で動くプログラムを組み込むタグです。
その際によく用いられています。
まとめ
いかがでしたか？
今回は、「【初心者必見】HTMLコードを表示するためのタグ20選！」をご紹介しました！
これで、プログラミング を作る際に必要なHTMLのコードをマスターすることができました。
そのため、他にもコードを表示させる方法や他のプログラミング言語も学び、Webサイトを実際作成することに挑戦してみましょう。
ぜひ参考にしてみてくださいね。
