0Pricing
HTML for Kids · レッスン

HTMLのタグと要素

タグと要素とは何か、どのように機能するのかを学びます。

「HTMLのタグと要素」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。

HTMLのタグと要素

次のレッスンへようこそ！今日は、HTMLのタグと要素について学びます。これらは、皆さんが作るすべてのWebページの基本要素です。

HTMLのタグと要素 — イラスト1

HTMLタグとは？

HTMLタグは、山かっこ<>で囲まれた特別なキーワードです。タグの中にあるコンテンツをどう扱うかをブラウザーに伝えます。

タグの例：<h1>

タグは通常、開始タグと終了タグのペアで使います。

例：

<h1>Hello</h1>

HTML要素とは？

HTML要素は、開始タグ、コンテンツ、終了タグを組み合わせたものです。

たとえば、次のようになります。

<h1>Welcome to My Page</h1>

タグの種類

タグには主に2つの種類があります。

  • ペアタグ：開始タグと終了タグの両方を持ちます。例：<p>Paragraph</p>
  • 自己終了タグ：終了タグを必要としません。例：<img />

よく使われるタグ

ここでは、よく使う基本的なHTMLタグを紹介します。

  • <h1> to <h6>：見出し（大きいものから小さいもの）
  • <p>：段落
  • <a>：リンク
  • <img>：画像
  • <br>：改行

例を見てみましょう。

<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />

タグの属性

属性は、要素に関する追加情報を提供します。開始タグの中に記述します。

例：

<a href="https://example.com" 
target="_blank">Visit Example</a>

タグの入れ子

あるタグを別のタグの中に配置できます。これを入れ子と呼びます。

例：

<p>This is a <strong>bold</strong> word.</p>

入れ子にしたタグを閉じる順序

覚えておきましょう：外側のタグを閉じる前に、必ず内側のタグを閉じてください。

例：すべてを組み合わせる

ここまで学んだことをすべて組み合わせた例を見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Example</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a <strong>simple</strong> paragraph of text.</p>
    <a href="https://example.com" target="_blank">Click here to learn more</a>
    <br />
    <img src="image.jpg" alt="A beautiful view" />
  </body>
</html>

よくできました

おめでとうございます！HTMLのタグ、要素、属性、入れ子について学びました。これらは、皆さんが作るすべてのWebページの基本要素です。次のレッスンでは、実際のコンテンツを含む最初のHTMLページを作成します。

HTMLのタグと要素 — イラスト11

よくある質問

「HTMLのタグと要素」レッスンは無料ですか？

はい。「HTMLのタグと要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。

「HTMLのタグと要素」で何を学びますか？

タグと要素とは何か、どのように機能するのかを学びます。 ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML for Kidsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「HTMLのタグと要素」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML for Kidsレッスンでコードを書いて実行できますか？

はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. HTMLとは？
  2. HTMLの構造：構成要素
  3. HTMLのタグと要素
  4. 初めてのHTMLページを設定する
← HTML for Kidsに戻る