初めてHTMLを見たときは、何やら英語がずらずらと書かれていて、何だこれは…となった方もいらっしゃるのではないでしょうか？
こんなのわかるようになるのかな？
いやもう絶対に無理！
と拒否反応が出る方もいらっしゃると思います。
ですが、1つ1つじっくり理解すれば大丈夫です。
一気にすべて理解する必要はありません。
こんなもんなんだという気持ちで臨むのが一番良いかと思います。
今回はHTMLファイルの構成について解説いたします。
HTMLの勉強を始めて苦戦されている方の、お役に少しでも立てれば幸いです。
HTMLファイルとは（.html）
HTMLとは拡張子（ファイル名の最後についている名前、Excelなら.xlsxなど）が.htmlとなっているファイルに記述されているマークアップ言語のことで、こちらに記述された文言が、ブラウザ上に表示されます。
※ブラウザとは（ChromeやEdge、Safariなど）WEBサイトを閲覧するためのソフトのことです。
まずはHTMLファイルの中身を見てみましょう。
HTMLファイルの基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLの解説</title>
<meta name="description" content="ここにホームページの概要文や説明文を記載します">
</head>
<body>
</body>
</html>
早速、英語がずらずらと並んでいます。
順を追って説明させていただきます。
<!DOCTYPE html>とは
Doctype宣言といい、HTMLを記述するための、おまじないのようなものと理解していただいて問題ないかと思います。
HTMLにはバージョンがあり、最新ではHTML5と呼ばれるバージョンが使用されております。
この記述を行うことによって、HTML5で記述されていますよ、ということを明示的にコンピュータに説明しているということになります。
<html> ・・・ </html>とは
Doctype宣言のすぐ下に記述します。こちらもお決まりのようなものです。
意味合いとしては、この中にHTMLを記述しますよ！といったところになります。
lang=”ja”の記載がありますが、これはJapaneseの略で、日本語のサイトであることを設定しています。
HTMLではこのようにタグと呼ばれるもので囲って使用されます。（<html>）
これらのタグは開始タグ、終了タグと呼ばれるもので囲まれており、終了タグにはバックスラッシュが入ります。（/html）
中には特殊なものがあり、閉じタグがないものもありますが、実際の業務で使用するタグの中ではとても種類が少ないので、そこまで意識する必要はありません。
基本的に開始タグと終了タグで囲まれているのかという認識で問題ないと思います。
<head> ・・・ </head>とは
この部分はブラウザ上には出力されません。
出力はされませんが、Webサイト上でとても大事な情報を記載します。
順を追って解説させていただきます。
<title> ・・・ </title>
こちらはホームページのタイトルを記述します。
検索したときに表示される名前であったり、ブックマークで表示される名前でも使用されます。
こちらのタグは必須となりますので、必ず記載するようにしましょう。
<meta name=”description” content=”・・・”>
content=”・・・”の中にWebサイトの概要や説明文を記載します。
記載した文言は検索エンジンで、タイトルの下に表示されます。
こちらの文章を記載しておかないと、検索エンジンでなんのホームページなのか、タイトルでしか判断ができなくなります。非常に大事なタグとなりますので、必ず記載するようにしましょう。
<meta charset=”UTF-8″>
文字コードの設定になります。
この設定がないと、文字化けが発生し、うまく表示されない可能性があります。
こちらも非常に大事なタグとなりますので、必ず記載するようにしましょう。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
こちらのタグはスマートフォンやタブレットなどで表示する際の、表示領域の設定となります。
こちらの記載がGoogleで推奨されてる基本的なviewportの設定方法となり、基本的にこちらの設定で問題ありません。
記載がないとスマートフォンなどにうまく対応できないため、必ず記載するようにしましょう。
<body> ・・・ </body>とは
HTMLの本体部分でもあり、こちらの中に記載したものがブラウザ上に表示されます。
bodyタグの中では様々なタグを使用し、記述を行っていきます。
ただ様々といっても、基本的に使用するタグは10種類～ほどのため、１つ１つ覚えていきましょう！
別記事にてよく使用するタグについてはまとめさせていただく予定です。
さいごに
HTMLファイルの構造について紹介させていただきました。
headタグで指定するものについては、Webサイトの裏方のような動きをしており、見えない部分ですが、非常に大事な部分でもあります。
基本的に毎回使用するタグは同じのため、少しでも多くコードに触れ、慣れていきたいですね！
