HTMLが何もわからない人に見て欲しいHTMLの基本-WEB向上中！

今まさにHTMLの勉強を始めよう！勉強を始めたばかりという人に、まず覚えて欲しいHTMLの基本をご紹介します。

HTMLを知らない人からするとプログラミングのような複雑さをイメージしている人もいますが、実際にはそれほど難しくは無く、独学でも十分に習得できる言語です。
このページでは全体の基本構成と、書き方の基本的な部分をご紹介いたします。

HTMLファイルってそもそもどうやって作るの？

HTMLの元はテキストファイルです。テキストファイルの拡張子を「.html」とし、HTMLのルールで中身を記述すると、それをブラウザ側が解釈し意図した表示を行ってくれます。

Windowsは初期設定で拡張子が表示されていないので、拡張子って何？という方もいると思います。拡張子とはファイルの中身がどんな内容かを識別するものです。
Windowsで表示させるにはフォルダの上にある「表示」タグをクリックします。表示されたメニューに「ファイル名拡張子」があると思うので、それにチェックを入れると拡張子が表示されます。

試しに以下のコードをテキストファイルにコピーし、ファイル名を「text.html」という名前で保存して下さい。

<!DOCTYPE html>
<html>
<head></head>
<body>
テスト
</body>
</html>

作ったファイルをブラウザのウィンドウにドラッグして下さい。「テスト」という文字がブラウザ上に表示されると思います。
このように拡張子が「.html」のものを作る事で、htmlファイルを扱う事ができます。

まずはHTMLの基本構成を理解しましょう

HTMLファイルが簡単に作れることが理解できたと思います。
では実際に中の構成はどういった意味を持ち、どういったルールで記述されているのか解説していきたいと思います。

htmlはタグと呼ばれる< ></ >で囲むことで、文章の中身の意味を明確にします。タグごとに決められた意味があり、そのルールのもとブラウザが内容を理解します。

大きな構成要素として以下のようなブロックで分かれます。

<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
 
</body>
</html>

最初の<!DOCTYPE html>は、この中身がHTML5で書かれている事を宣言しています。<html></html>は、この中がhtmlで書かれた内容である事を定義しています。
この2つは特にそれほど意識する必要はありません。htmlファイルを記述する時には必ず記述が必要だという理解で十分です。

headとbodyで囲まれた中身が、実際に記述していく領域となります。まずはheadで囲まれた領域ですが、ここでは
・HTML文書のタイトル
・文字コードの指定
・外部ファイルの読み込み
などを記述します。主にSEO（googleなどの検索に引っかかりやすくする）としての情報の記述と外部ファイルの読み込みを行う場所になります。

bodyは、実際にブラウザで表示される内容を記述する場所です。
大きく2つの領域がある事を理解できたかと思うので、次の項以降で、head部分とbodu部分について詳しく触れたいと思います。

headの中身にはどんな記述をすれば良いのか？

head領域で最低限必要な事は、タイトルと文字コードの指定です。

<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>

文字コードは少し馴染みが無いかもしれませんが、テキストファイルを保存する時に「SJIS」や「UTF-8」を選択できる項目があると思います。その保存コードとここで指定する内容を合わせるようにして下さい。

Windowsの標準のテキストエディタ（メモ帳）で何も指定せずに保存した場合は、charset="Shift-JIS"として下さい。ブラウザはここで書かれた文字コードで中身を解釈しますので、実際の保存形式と記述が違うと文字化けを起こし内容がまったく読めない状態で表示される事があります。
文字コードを悩まれる場合は、一般的に一番使われている「UTF-8」で保存する事をオススメします。

  <title>タイトル</title>

次にtitleですが、Googleなどの検索結果で表示される場合に、このtitleの内容が件名で表示されます。ユーザーが見る事を意識してタイトルを付けて下さい。

head領域は他にも、外部ファイルの読み込みを記述したり、SEO強化でmeta設定を追加したりもしますが、ここでは最低限必要な文字コードの指定とtitleの記述に留めたいと思います。

ブラウザに表示されるbody内での記述方法を覚える

body内ではブラウザで表示させる内容を記述します。ここではテキストや画像の内容を記述するのですが、それぞれ記述のルールがありその通りに記述する事で意図した表現を行う事ができます。

ここでは最初に覚えておく必要があるというタグをご紹介します。
最初に作った「test.html」ファイルを利用して、この項目の記事を参考に、実際の表示を確認してみて下さい。

文章で利用する pタグ / brタグ

1つの段落の文章をを囲むタグです。テキストは基本pタグで囲まれます。
また合わせてbrタグも覚えて下さい。brタグは改行を意味します。

  <p>文章を記載します。<br>
  brは改行を意味します。</p>

リンクを張る為の aタグ

サイトを見ていてテキストや画像をクリックすると他のページに飛ぶ事があると思いますが、それをリンクを張るといいます。

リンクを張る為のタグがaタグです。このタグで囲われた領域をクリックすると、href属性に記述されたURLに移動します。

  <a href="https://www.google.com/">googleに移動します。<a>

target="_blank"を追加する事で、今のページを残したまま別タブで該当ページに移動させる事ができます。

  <a href="https://www.google.com/" target="_blank"">別タブでgoogleに移動します。<a>

下記テキストリンクをクリックすると、別タブで開く実際の動作が確認できます。
別タブでgoogleに移動します。

画像を表示させるための imgタグ

画像を表示したい場合はimgタグを使います。画像はjpg、gif、pngの拡張子の画像が基本使えます。
src属性に画像が格納されている場所を記述しますが、記述方法は2種類あり絶対パスか相対パスかで記述します。特にどちらが優れているとかはなく、使いやすい方で記述します。

  <img src="https://www.test.com/image/test.gif">

絶対パスとはドメインも含めた全てのパスを記述する方法です。複数のページにおいて階層が違っていても、同じ記述のままで利用できます。

  <img src="image/test.gif">

相対パスはhtmlファイルが保存された場所を起点に、画像の格納されたパスを指定する方法です。
例えばhtmlファイルと同じ場所に「image」フォルダがあり、その中に画像ファイルがある場合は上記のように記載します。

  <img src="../../image/test.gif">

格納場所が上位階層にある場合は「../」と記載すると1つ上の階層を意味ます。
htmlファイルから見て2つ上のディレクトリ内にある「image」フォルダに画像が格納されている場合は以下のように記載します。

色々な方法がありますが、利用している内に慣れてくると思いますので、自身が管理しやすい方法で記述して下さい。

見出しの重要度を示す hタグ

文章の見出しではpタグではなくhタグを使います。
見出しタグは他のタグと違いh1～h6まで存在し、それぞれに上下がありh1が大見出しとなります。数字が大きくなるごとに下位の見出しと言う意味になります。

  <h1>大見出し</h1>
  <h2>中見出し</h2>
  <h3>小見出し</h3>

なぜタグを使い分ける必要があるのか？

普段使うgoogleなどの検索エンジンは、botと呼ばれるツールが自動で各サイトを訪問しページの中身を分析しています。
botは中身を分析し、どの検索キーワードにどれくらい有益なページかを判断しています。その判断によって検索順位が決められ、結果、ページの流入に大きな差が出ます。

これらのタグを使う事で、googleがページの中身の意味を正しく理解・評価されるようにしようというのがタグを付ける意味です。

実はこれらを使い分けるのは自然検索流入を増やすためのものなので、そこをまったく意識しないのであれば、例えば見出しをpタグでページを作っても問題ha ありません。

ブラウザに表示した時にあれれ？と思ったら確認するポイント

HTMLを始めたころは、自分は正しく記述したつもりが、ブラウザで表示すると意図せぬ表示結果となる事も多々あると思います。
その度に心が折れそうになる事もあると思いますので、いくつかのよくある例をここでご紹介したいと思います。同じような症状となった場合に参考にして下さい。

見たことが無いような文字が表示される

下記のような解読不能な文字が表示された場合の確認ポイントです。

前の項でも触れましたが、metaで指定した文字コードと、保存した文字コードが違う可能性が高いです。

  <meta charset="UTF-8">

htmlファイルの文字コードと一致する記述をmeta要素で指定し直して下さい。またはmetaで指定している文字コードでhtmlファイルを保存し直して下さい。

タグがブラウザ上に表示されてしまう

このように意図せずタグが表示された場合は、タグの一部が全角で入力されていないか確認してみて下さい。
タグの一部でも全角が混じると文字列として判断されてしまいます。特に「<」「/」「>」やhタグの数字部分、imgタグの「i」などは全角でもわかりにくい時があるので注意が必要です。

表示が大きく崩れる

  <p>明日は晴れ<p>

この記述のようにタグの締め忘れ（pタグの締めタグに「/」が無い）をしていないかご確認下さい。
タグの記述をミスしていても、ブラウザが自動で補完を行い気づかないという事が良くあります。締めタグが無いと意図せぬところで表示崩れが起こったり、JavaScriptの動作に影響を与える事がありますので気を付けて下さい。

画像が表示されない

この場合はまず画像のファイル名とhtmlファイルに記述しているファイル名が同じか確認してみて下さい。拡張子が違っている事もあるので、拡張子も含め確認して下さい。
ファイル名に誤りが無い場合は、階層が誤っている可能性が高いです。実際に格納されているフォルダの場所と、記述しているパスの階層に誤りが無いかご確認下さい。

こういった不備を防ぐ方法

専用のコーディングソフトを利用する方法があります。専用のコーディングソフトでは、色で正しい記述かが一目でわかるようになっていたり、自動で締めタグを記述するような機能が備わっています。

私はMicrosoft社の「Visual Studio Code」という無料ソフトを使っていますが、無料と思えない十分すぎる機能が備わっているのでオススメです。

最後に

今回ご紹介した内容だけだと、世の中にあるウェブサイトからはほど遠いデザイン性がまったくない表示になると思います。
そういったデザイン部分はcssというもので整えていきます。htmlとcssはセットで覚える必要がありますが、cssもそれほど難しい内容では無いので、htmlと並行して学習していくことをオススメします。

HTMLは言語的にも複雑では無く、情報も溢れているのでとても覚えやすい言語だと思います
どこの会社でもWEB媒体は無視できなくなっている昨今、ウェブページの基本となるHTMLの知識は必ず役に立つと思いますので、ぜひhtmlの知識を深めていって下さい。

HTMLが何もわからない人に見て欲しいHTMLの基本