問題
3headタグとbodyタグを理解しよう
HTMLでWebページを作る際に必ず使用するheadタグとbodyタグについて学習します。 それぞれには明確な役割があり、記述内容が全く異なるので違いを正しく理解しておきましょう。
HTMLの問題に挑戦しよう！
問題
「headタグとbodyタグを理解しよう」
以下の指定内容をheadとbodyの適切な場所に書いていきましょう。
記述が終わったら念のためブラウザを開いて確認してみましょう。
VSCODEで作成している場合はファイル名の書いたタブをブラウザにドラッグ＆ドロップすれば確認できます。
・metaタグを使って文字コードを「UTF-8」で指定する
・titleタグを使ってタイトル(タブ部分)を「忍者CODE」とする
・h1タグを使って「忍者CODE」というテキストをブラウザで表示する
・metaタグを使ってディスクリプションを「忍者CODEはプログラミング学習サービスです。」と設定する
・linkタグを使って外部ファイル(CSSファイル)「style.css」を参照できるように指定する
・pタグを使って「忍者CODEで学習をはじめる」というテキストをブラウザで表示する
期待する画面
解答と解説（headタグとbodyタグを理解しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
文字コードを指定するにはmetaタグにcharset属性を使って指定します。
UTF-8は世界的にも最もポピュラーな文字コードです。
文字コードの設定はブラウザに表示するべきではない情報なので、headに書きます。
タイトルの設定はtitleタグの間に設定したタイトル名を書くだけでOKです。
Googlechromeなどの検索画面に表示される内容もここで設定したタイトルが表示されます。
こちらはタブや検索結果などのページコンテンツ外で表示する内容なのでheadに書きましょう。
ディスクリプションは検索画面でタイトルの下に表示される説明文です。
指定するにはmetaタグにname属性を指定しdescriptionとします。
表示するテキスト情報はcontent属性で指定します。こちらもheadに書きましょう。
外部ファイルの設定はlinkタグを用いてrel属性を指定します。
CSSを参照する場合は値をstylesheetを指定しhref属性でファイルの場所とファイル名を指定します。
今回は同じ階層にある設定なのでstyle.cssとします。こちらもheadの中に書きましょう。
最後にh1とpタグで書いた内容は、ブラウザに表示すべき内容になるのでbodyに書けばOKです。
ポイント
headタグとは
headタグとは、サイトのタイトルや説明文、外部ファイルなどを読み込む処理などを定義する場所のことです。
headタグで囲まれた内容は、titleタグを除いてブラウザの画面上には表示されません。titleタグの内容はブラウザ上部のタイトルバーに表示されます。
headタグの中身は、titleタグ、metaタグ、linkタグなど作成するWebページに関する情報を記述していきます。また、CSSやJavaScriptを外部ファイル化した場合、headタグの中で読み込ませることもあります。
bodyタグとは
bodyタグとは、文章や画像などの実際にサイトに表示するコンテンツを定義するためのタグです。
bodyタグで囲まれたテキストや画像などはブラウザに表示されていきます。
