【初心者さん向け】HTMLとは？基礎を身に付けて不安を減らそう！

HTMLって何？言葉はよく見かけるけど難しそう、、ネットショップやホームページを作成するときにHTMLが必要ってほんと？。
そんな疑問を持たれている初心者の方向けに、HTMLの基礎についてお話いたします。

HTMLはいろんな場面で使われています
HTMLとは？
HTMLタグとは？
1. HTMLタグ／参考例
HTMLタグの使い方
閉じタグがないHTMLも存在する
1. 閉じタグ不要のHTML
HTMLを実践してみよう
まとめ

HTMLはいろんな場面で使われています

インターネットが当たり前の昨今、なにか調べる時や買い物をする時などネットを使っている人も多いのではないでしょうか。
調べるときに使う検索エンジン（GoogleやYahoo!JAPAN等）、または通販サイトで有名な楽天市場やYahoo!ショッピングなど、あらゆるところでHTMLは使われています。

あなたが見ているこのページもHTMLが用いられています。

HTMLとはWEBサイトやページを作る上で、欠かせないものなのです。

HTMLとは？

HTMLとは、HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略称です。
マークアップ言語といわれるもので、HTMLは「タグ」というもので成り立っています。

HTMLタグとは？

HTMLを理解するには、まず「タグ」という概念を知る必要があります。
タグとは、文字に意味を持たせてあげるような役割をしてくれます。
HTMLタグには、さまざまなものが存在しますが、以下は参考例としてピックアップしたものです。

HTMLタグ／参考例

h1タグ＝見出しとしての意味を持つ
pタグ＝段落としての意味を持つ
bタグ＝文字を太字にする意味を持つ

など

HTMLタグの使い方

以下は、前項でピックアップした「h1タグ」「Pタグ」「bタグ」を記述したものです。

<h1>ここに見出しを入れる</h1>
<p>ここに本文を入れる</p>
<b>ここに書かれた文字は太字になる</b>

< >で囲まれている部分が、タグになります。
タグの基本は<開始タグ>と</終了タグ>の１セットです。
終了タグは閉じタグなどと呼ばれたりもしますが、タグ名の前に/（スラッシュ）を記述します。

初心者の方でよくミスしがちなのが、</終了タグ>を書き忘れてしまったり、書く場所を間違えてしまうケースです。
ミスの状況によっては、WEBページの表示が大きく崩れてしまうこともあるので、気を付ける必要があります。

閉じタグがないHTMLも存在する

前述で「終了タグ（閉じタグ）」のことを説明しましたが、HTMLタグの中には閉じタグがないものがあります。
例えば、下記のHTMLタグは閉じタグが不要です。

閉じタグ不要のHTML

brタグ＝改行としての意味を持つ
imgタグ＝画像を出力する意味を持つ

など

HTMLを実践してみよう

HTML習得の近道は、実践あるのみです。
HTMLを書くことを繰り返すことで、基本的な使い方ならそこまで時間をかけずに覚えることができます。

今回は、参考例としてメモ帳を使ったHTMLタグの書き方と、HTMLファイルの作り方を以下で解説いたします。

【1】メモ帳を開く

Windowsの方はメモ帳を開いてください。
（macの方はテキストエディットなどを活用してください）

【2】サンプルHTMLをコピーする

今回は簡単に練習できるよう、サンプルHTMLをご用意しましたので、以下をコピーしメモ帳へ貼り付けてください。

上記ではご紹介していない新たなHTMLタグが記述されていますが、これらはHTMLファイルを作る際の骨組みとなります。ここでは初心者の方が混乱を招く恐れがあるので割愛させていただきますが、基本的にイチからWEBページを作成しない場合はあまり意識する必要はありません。

<html>
<head>
    <meta charset="UTF-8">
    <title>ここにページのタイトルを入力</title>
    <meta name="Description" content="ここにページの概要を入力">    
</head>
<body>
    <h1>HTMLの基本知識を身に付けよう</h1>
    <p>本記事をご覧いただきありがとうございます。<br>少しでもご参考になれば幸いです。</p>
    <b>HTMLは難しいものではありません</b>
</body>
</html>