HTMLファイルの作り方やファイル名のルール

どうも、りかちゅうです！HTMLとはWEBサイトの土台を作るための言語です。顔で言うならば、鼻の形、目の形などのパーツを指します。そこら辺もよくわからない方は後ほど載せる記事を見てください！それで、HTMLのファイルを作るためには必ず書かないといけないことがあります。どれだけ重要なのかと言いますと書き忘れたら機能しないです。また、HTMLのファイル名にもルールがあります。ですので、この記事にてそれらのことを話したいと思います！

HTMLとは何か？

HTMLが何かわからない人もいると思います。ですので、まずはHTMLとは何かについて話したいと思います！HTMLとはHTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の頭文字をとった略称です。言語は英語です。大まかに訳すと文書構造や装飾などの情報を正しく認識させたり、複数の文書を相互に関連付けたりしながらサイトの土台となるファイルを作成する役割のある言語ということです。シンプルに土台のための言語と思えばいいです。もし細かいことが知りたい方はこちらの記事を見てください！

WEBサイトの骨組み！HTMLとは何か？

書き始めに必ず書くこと

以上がHTMLの概要です。何度も言いますがHTML=サイトの土台となる言語です。その土台を作るためには書き始めに必ず書かないといけないものがいくつかあります。ですので、今から話しますね。

1.<!doctype HTML>

<!doctype html>は”document type definition”の省略で初めに書かないといけないものです。日本語に訳すと「文章型の定義」です。なぜ初めに書かないといけないのか？それはどのバージョンのHTMLなのか、どの仕様に合わせて作っているかを示唆しないといけないからです。<!doctype html>と書けばいいです。そうすれば最新バージョンであることを示唆することができますから。

2.<html>~</html>(<html>要素とは親要素と子要素の関係性がある)

<!doctype html>のすぐに書きます。階層は同じです。このタグはHTMLの文書だということを示しています。また、<html>のタグにlang属性といって主要な言語を指定することができます。例えば日本語の場合は<html lang=”ja”>~</html>です。書くことによって翻訳機能が何語から何語に翻訳するかを判断するそうです。それもあって書いた方がいいですが任意です。個人的には指定するとフォント設定がめんどくさくなるので書かないはです。フォント設定のことは別記事にて話したいと思います。

※英語で指定したい場合は<html lang=”en”>、フランス語ならば<html lang=”fr”>です。もっと知りたかったら調べてください。

3.<head>~</head>(<HTML>要素とは親要素と子要素の関係性がある)

<head>要素は<html>要素の中にある要素です。見出しにも書きましたが<html>要素とは親子要素です。ですので、階層を1つ下げます。この要素は文章全体の情報を定義するためにあります。具体例としてはページのタイトルや説明文使用する外部ファイルのリンクです。ただ、この要素はブラウザには表示されません。

4.<meta charset=”UTF-8″>(<head>要素とは親要素と子要素の関係性がある)

<meta>タグとはある事柄の内容や性質を説明するデータ示すタグです。このタグは空要素と言って終了タグがないです。また、コンテンツも囲みません。ただ、内容や性質を入れるだけです。それで、今回はcharset属性加えて要素を作ります。この属性は関連する文書やリソースの文字符号化方式を示すための属性です。ですので、この属性に「UTF-8(小文字でも大丈夫です)」という属性を書きます(他にも種類はありますが原則としてこれが王道です)。書かないと正しい文字探せないので文字化けをしてしまします。

5.<title>~</title>(<head>要素とは親要素と子要素の関係性がある)

ページのタイトルを記述します。tititleという英語が分かれば察せるはずです。それで、この要素はブラウザのタブやユーザーがブックマークした時のタイトルとして表示されます。また、検索結果の見出しとして表示されます。ですので、必ず書かないといけません。

6.<meta name=”description” content=”~”>(<head>要素とは親要素と子要素の関係性がある)

ページについての説明文を書きます。検索エンジンでページタイトルと共に表示されます。どんなサイトなのかを判断できるようにするといいです。また、name属性にdescription(日本語で説明という意味です)を書きます。また、content属性に説明文を書きます。

7.<body>~<body>(<HTML>要素とは親要素と子要素の関係性がある)

HTML文書の本体部分です。<body>内にあるコンテンツが実際にブラウザ上で表示されます。何を書くのかについては別の記事で話したいと思います。

 

まあ、文章で書いてもわからない点もあるので、書いたものを見せます。HTMLファイルの内容がこちらです。

また、ブラウザではこのように映ります。

何となくでも分かってもらえると嬉しいです。

メモを書きたい時

番外編です。HTMLのファイル内でメモを残したいときはあると思います。どこになにが書いてあるのか、注意点など。このようなことはブラウザ上に見られたくないと思いますよね？そんな時はあることをすればいいです。それは表示したくない内容を「<!–」と「 –>」で囲めばいいです。具体例としてはこんな感じです。

<!–ここにコメントが書けます –>

そうすればブラウザ上では表示されません。

HTMLのファイル名のルール

HTMLファイルを書く時にはルールがあります。まずはファイルの種類を示すために拡張子をつけることです。HTMLの場合は最後に.htmlと付けてください。また、すべて小文字の英語(半角のみです)でかつ記号はアンダーバーとハイフン以外は使ってはいけません。空白を入れるのもNGです。ちなみにさきほど載せたファイル名はkama.htmlです。

まとめ

おそらく、初めて見る人からすると何これと思うかもしれません。私も初めはそんなもんでした。ですが、自分から書いていけば慣れていくものです。こればかりは実際にどうなるのかを体験しない限りは感覚は身につきません。ですので、自分の好きな内容などで練習することをおすすめします。以上です！最後まで読んでいただきありがとうございました。

りかちゅう