02HTMLの骨組み
HTMLの骨組みは以下のコードです。
「Lesson2_HTML」フォルダの中に「html_1.html」を作成し、以下のコードを貼り付けてください。
<!doctype html>
<html lang="ja">
<head>
<!-- ファイルの読込などを行う -->
</head>
<body>
<!-- ここに記載した内容が画面に表示される -->
</body>
</html>HTMLは基本的に<タグ名>という形で記述します。
最初の<タグ名>を開始タグ、</タグ名>を終了タグまたは閉じタグといいます。
タグの中に書かれている文字を要素名といい、書かれている内容がその文書でどのような意味を持つのかを示すことができます。タグは画面には表示されません。
それぞれのタグがどのような意味を持っているのか、1つずつ解説していきます。
| タグ | 説明 |
| <!doctype html> | この部分は「これから書く内容はHTMLですよ」ということを宣言しています。 |
| <html lang=”ja”></html> | HTMLを記述する場合はまず<html></html>を記述します。あまり深く考えなくて大丈夫です。 ※lang=”ja”は言語が日本語であることを表しています。英語の場合は「en」と記述します。 |
| <head></head> | headタグといわれる部分で、この中でサイトに関する情報やCSSファイルなどを読み込みます。 例えば、メタ情報と呼ばれるサイトに関する情報や、linkタグで他のファイルを読み込んだり、titleタグでブラウザのタブに表示されるサイト名を設定したりします。 |
①<!doctype html>
具体例
メタ情報
<meta name="description" content="サイトの説明文">
<!-- → 検索されたときのサイトの説明文を設定できます -->
<meta name="twitter:url" content="リンク先URL">
<!-- → twitterで共有され、リンクが押されたときのリンク先を設定できます -->ファイル読み込み
<link href="cssファイル名" rel="stylesheet">タイトル設定
<title>サイトタイトル</title><body></body>
bodyタグといわれる部分で、実際に画面に表示される部分を記述します。 画面表示に関するHTMLの記述方法については、次のLesson2-3で詳しくご紹介します。
まとめると、以下の画像のように記述場所を分けます。
コメントとは？
骨組みのコードの中で記載されているものをコメントといいます。 コメントは画面には表示されません。開発時のメモを残すときに活用します。
HTMLでは<!– –>と記述することでコメントの意味になります。
<!-- ここにコメントを記載 -->
コメントを残す