HTMLの構造：構成要素
HTMLドキュメントの基本構造を理解します。
「HTMLの構造：構成要素」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
HTMLの構造：Webページを作る基本要素
2つ目のレッスンへようこそ！今日は、HTMLドキュメントの構造と、それぞれの部分がどのように組み合わさっているかを学びます。Webページの骨格を学ぶようなものだと考えてください。
HTMLドキュメントの構造
HTMLドキュメントには、ブラウザーが理解できる決まった構造があります。ブラウザーに何をするかを伝えるレシピのようなものです。
HTMLドキュメントの基本的な部分は次のとおりです。
- DOCTYPE宣言：HTMLドキュメントであることをブラウザーに伝えます。
- HTMLタグ：ページのすべてのコンテンツを含みます。
- head：ページに関する情報（タイトルなど）を保持します。
- body：ユーザーに表示されるコンテンツを保持します。
構造はどのようになっている？
基本的なHTMLドキュメントの構造は次のようになります。
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
DOCTYPE宣言
<!DOCTYPE html>宣言は、すべてのHTMLドキュメントの先頭に記述します。ブラウザーに、HTMLの最新バージョンであるHTML5を想定するよう伝えます。
HTMLのレシピの出発点だと考えてください。
HTMLタグ
<html>タグは、ドキュメント内のすべてのコードを囲むメインのコンテナーです。ブラウザーに「ここに含まれるものはすべてHTMLです」と伝えます。
次のように記述します。
<html>
<!-- All other HTML tags go here -->
</html>
headセクション
<head>セクションには、ページ自体には表示されないWebページの情報を記述します。たとえば、次のようなものです。
- タイトル：ブラウザーのタブに表示されるテキスト。
- メタ情報：ページの説明などの追加情報。
例：
<head>
<title>My Cool Web Page</title>
</head>
bodyセクション
<body>セクションには、テキスト、画像、リンクなど、ユーザーに表示されるすべてのものが含まれます。ここがメインのコンテンツ領域です。
例：
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
すべてを組み合わせる
ここまで学んだすべての部分を含む、HTMLドキュメントの完全な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
よくできました
おめでとうございます！HTMLドキュメントの構造を学びました。これで、Webページを作るために各部分がどのように組み合わさるかが分かりました。次のレッスンでは、ページに実際のコンテンツを追加していきます。最初のWeb作品を作る準備をしましょう。
よくある質問
「HTMLの構造：構成要素」レッスンは無料ですか？
はい。「HTMLの構造：構成要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「HTMLの構造：構成要素」で何を学びますか？
HTMLドキュメントの基本構造を理解します。 ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「HTMLの構造：構成要素」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- HTMLとは？
- HTMLの構造：構成要素
- HTMLのタグと要素
- 初めてのHTMLページを設定する