トップページのファイル名
まず、コーディングを始める際、テキストエディタを開いたらページごとにファイル名をつけます。
しかし、トップページのファイル名はなんでもいいというわけではありません。必ず「index.html」を用いなければ読み込まれません。
HTMLを書き始める前に、まずはファイル名を正しく設定してから書き始めましょう。
HTMLに必須の要素
次に、テキストエディタを起動し、新規ドキュメントを開くと、下記のようなHTMLが元から書かれた状態になっています。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
こちらに書かれているものが、HTMLに欠かせない要素です。
ここからそれぞれの要素について説明していきます。
DOCTYPE宣言
<!doctype html>
HTMLには、新旧のバージョンがあり、どのバージョンでHTMLを記述しているかを宣言するのがDOCTYPEです。DOCTYPEは、必ず1行目に書く必要があります。 DOCTYPE宣言が無いと、ブラウザ側がどの形式で記述しているのかがわからず、CSSが実装される以前のWebサイト/ブラウザとの互換のための「互換モード」でHTMLを表示させてしまいます。 互換モードではCSSの記述がうまく読み込まれず、レイアウトが崩れてしまう場合があります。
html要素
<!doctype html>
HTMLには、新旧のバージョンがあり、どのバージョンでHTMLを記述しているかを宣言するのがDOCTYPEです。DOCTYPEは、必ず1行目に書く必要があります。 DOCTYPE宣言が無いと、ブラウザ側がどの形式で記述しているのかがわからず、CSSが実装される以前のWebサイト/ブラウザとの互換のための「互換モード」でHTMLを表示させてしまいます。 互換モードではCSSの記述がうまく読み込まれず、レイアウトが崩れてしまう場合があります。
head要素
<head>
</head>
head要素は、HTML文書に関する情報(メタデータ)を記述します。head要素の中には1つだけ、必ず明記することが義務づけられている要素があります。それがtitle要素です。headタグ内に記述した内容は、ブラウザに表示されませんが、titleタグのテキストは、タブ名やブックマークで表示されます。
title要素
<title>無題ドキュメント</title>
headタグ内に記述します。ページのタイトルを記述します。
meta charset =”UTF-8″
<title>無題ドキュメント</title>
headタグ内に記述します。ページのタイトルを記述します。
body要素
<title>無題ドキュメント</title>
headタグ内に記述します。ページのタイトルを記述します。
まとめ
いかがでしたでしょうか?
今回の記事では、HTMLファイルに必須の構成要素について、それぞれの意味を解説していきました。
HTMLの勉強を進めるときは、それぞれのタグやコードの意味を理解しながら実際のテキストエディタで練習することがおすすめです。こちらの記事を参考にしながら、一緒に勉強していきましょう!