Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ チャレンジ:HTMLドキュメントを正しく構造化する | HTMLフォームとユーザー入力
究極のHTML

チャレンジ:HTMLドキュメントを正しく構造化する

メニューを表示するにはスワイプしてください

目標

基本的なHTMLドキュメント構造を作成し、正しいウェブページを構築すること。この構造はすべてのHTMLページの基盤であり、ブラウザがコンテンツを正しく表示するために必要な要素で構成されている。

Note
注意

ウェブページのデザインが一見シンプルに見えても、正しいドキュメント構造を維持することが非常に重要。これにより、ウェブサイトの可読性と機能性がすべてのブラウザで保たれる。

課題

基本的なHTMLドキュメント構造の作成。すでに自信がある場合は、ステップバイステップガイドを参照せずに進めても問題ありません。より詳細なガイダンスが必要な場合は、手順ごとの説明も利用可能です。

ステップバイステップガイド

ステップ1:HTMLドキュメントの開始

HTMLで記述されていることをブラウザに伝えるため、HTMLのドキュタイプ宣言を入力。宣言はHTMLドキュメントの最初の行に記述。

index.html

index.html

ステップ2:htmlの開始タグと終了タグの追加

DOCTYPE宣言の後に、HTMLの開始タグと終了タグを追加します。HTMLドキュメント全体の構造はこれらのタグ内に含まれます。さらに、ドキュメントの言語を指定するために lang 属性も含めます。

index.html

index.html

ステップ3:headセクションの作成

HTMLタグ内に開閉の<head>タグを追加。headセクションには、タイトルや外部スタイルシートへのリンクなど、HTMLドキュメントに関するメタ情報が含まれる。

index.html

index.html

ステップ4:タイトルの追加

<head>タグ内に開閉の<title>タグを追加。これらのタグの間に入力したテキストは、ブラウザのタイトルバーやタブにウェブページのタイトルとして表示される。

index.html

index.html

ステップ5: bodyセクションの作成

<head>セクションの後に、開くと閉じる<body>タグを追加します。bodyセクションにはウェブページの表示内容が含まれます:

index.html

index.html

ステップ6:bodyにコンテンツを追加

<body>タグ内には、見出し、段落、画像、リンクなどの要素を追加可能。以下は、見出しと段落を追加する例。

index.html

index.html

自分で試してみよう

index.html

index.html

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 1.  16

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1.  16
some-alt