HTMLはHypertext Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。ウェブページを作成するための特別な言語です。ウェブサイトにアクセスすると、コンピューターはHTMLを読み取り、テキスト、画像、リンクを表示します。HTMLはウェブサイトの構成要素と考えてください。レゴブロックを使って家や車を作るのと同じように、HTMLタグを使ってウェブページを作成します。
HTMLは、ウェブページ上のテキスト、画像、動画、リンクをどのように表示するかをコンピュータに指示するコードです。まるで絵を描いている友人に指示を与えるようなものです。HTMLでは、山括弧で囲まれた単語（タグ）を使って、ウェブページの一部の開始と終了を示します。
あなたが訪れるウェブサイトはすべて、何らかの形でHTMLを使用しています。HTMLがなければ、あなたが目にするウェブページは存在しません。HTMLはコンテンツを整理し、コンピューターにページの表示方法を指示します。インターネットを動かすのはHTMLのおかげで、ウェブ開発において最初に学ぶべきものです。
HTML文書は特別な構造を持っています。<code><!DOCTYPE html></code>という宣言で始まり、コンピュータにそのページがHTMLを使用していることを伝えます。そして、文書はヘッダーとボディという2つの主要な部分に分かれます。
非常に単純な HTML ドキュメントは次のようになります。
<code><!DOCTYPE html>
<html>
<ヘッド>
<title>私の最初のウェブページ</title>
</head>
<本文>
<p>こんにちは、世界！</p>
</本文>
</html> </code>
この例では、 <head>セクションにページのタイトルを指定し、 <body>セクションに画面に表示されるコンテンツを配置します。
HTMLでは、ウェブページの様々な部分をマークするためにタグを使用します。タグとは、山括弧で囲まれた単語です。例えば、<code><p></code>は、コンピュータに段落であることを伝えます。段落の終わりには、終了タグである<code></p></code>を使用して段落の終わりを示します。
HTMLの要素は、開始タグ、コンテンツ、終了タグで構成されます。例:
<code><p>これは段落です。</p></code>
各タグは、Web ブラウザにコンテンツの表示方法を指示します。
HTMLには多くのタグがあります。最も一般的なタグをいくつかご紹介します。
属性はHTML要素に関する追加情報を提供します。属性は開始タグの山括弧内に追加されます。最も一般的な属性は、画像タグで使用されるsrc属性とalt属性です。
たとえば、画像を追加するには、次のように記述します。
<code><img src="picture.jpg" alt="素敵な写真"></code>
ここで、 src はブラウザに画像ファイルの場所を伝え、 alt は画像を表示できない場合に画像の説明を提供します。
HTML ドキュメントは 2 つの部分に分かれています。
リンクを使うと、あるページから別のページへ移動できます。HTMLでは、 <a>タグを使ってリンクを作成します。タグ内のhref属性は、ブラウザにリンク先を伝えます。
例えば：
<code><a href="https://www.example.com">Example.com にアクセス</a></code>
このリンクをクリックすると、ブラウザでexample.com というWeb サイトが開きます。
画像はウェブページを明るくし、より魅力的にします。画像を追加するには、 <img>タグを使用します。 <img>タグには終了タグがないことを覚えておいてください。
画像を追加する方法は次のとおりです。
<code><img src="sunflower.jpg" alt="明るいひまわり"></code>
このコードは、ブラウザにヒマワリの画像を表示するよう指示します。src属性は画像の場所を指し、 alt属性は画像の説明を提供します。
リストは情報を整理し、整然としたフォーマットで表現します。HTMLには主に2種類のリストがあります。
順序なしリストの例を次に示します。
<コード><ul>
<li>アップル</li>
<li>バナナ</li>
<li>チェリー</li>
</ul> </code>
順序付きリストの例を次に示します。
<コード><ol>
<li>まず</li>
<li>2番目</li>
<li>3番目</li>
</ol> </code>
表は、行と列に情報を表示するのに役立ちます。データを比較したり、グリッドに項目をリストしたりする必要がある場合に便利です。
以下は HTML テーブルの簡単な例です。
<code><表の境界線="1">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>アリス</td>
<td>10</td>
</tr>
</テーブル> </コード>
この表では、 <tr> は表の行を定義し、 <th>は表のヘッダー (太字のテキスト) に使用され、 <td> は表のデータ (セル) に使用されます。
HTMLでは、音声や動画などのマルチメディアを追加することもできます。 <audio>タグを使えば音声ファイルを含めることができ、 <video>タグを使えば動画プレーヤーをWebページに埋め込むことができます。
以下はビデオ埋め込みコードの例です。
<code><video width="320" height="240" コントロール>
<source src="movie.mp4" type="video/mp4">
</ビデオ> </コード>
このコードは、再生、一時停止、音量調整用のボタンを備えたビデオプレーヤーを作成します。controls属性は、ブラウザにこれらのボタンを表示するよう指示します。
インターネット上のすべてのウェブサイトはHTMLで構築されています。学校のウェブサイト、楽しいゲームサイト、あるいはオンラインストーリーを読んでいるところを想像してみてください。HTMLは、テキスト、画像、その他のコンテンツを分かりやすく整理するために、舞台裏で働いています。
たとえば、お気に入りの漫画キャラクターの画像をオンラインで見たり、楽しいトピックの詳細を読むためにリンクをクリックしたりするとき、HTML がその機能を実現します。
簡単なプロジェクトを見てみましょう。猫のような、お気に入りの動物についての小さなウェブページを作りたいとしましょう。タイトル、猫に関する文章、写真、そして猫に関する面白い豆知識が載っているウェブサイトへのリンクなどを追加できます。
HTML コードは次のようになります。
<code><!DOCTYPE html>
<html>
<ヘッド>
<title>私の好きな動物</title>
</head>
<本文>
<h1>猫について</h1>
<p>猫は遊び好きで、優しい性格です。寝ることと喉を鳴らすことが大好きです。多くの人が猫をペットとして飼っています。</p>
<img src="cat.jpg" alt="かわいい猫">
<a href="https://www.catfacts.com">猫についてもっと知る</a>
</本文>
</html> </code>
このプロジェクトでは、見出し、段落、画像、リンクを使用します。HTMLを使って、多くのパーツからなる完全なWebページを構築する方法を説明します。
HTML は Web ページの構造を構築しますが、Web サイトの外観や動作を面白くするツールは他にもあります。
今日は HTML について学んでいますが、CSS と JavaScript について知ることで、Web サイトがどのように作成されるかを理解するのに役立ちます。
HTMLを調べていくと、他にもたくさんのタグが見つかるでしょう。ここでは、知っておくべきタグをいくつかご紹介します。
これらのタグを使用すると、Web ページでコンテンツがどのように表示されるかをより詳細に制御できます。
HTMLは最初に作成されて以来、大きく変化してきました。多くの新しいタグや機能が時とともに追加されてきました。HTMLが新しいバージョンになるたびに、複雑で美しいウェブサイトの作成が容易になります。今日では、HTMLはCSSやJavaScriptと連携して、使いやすく見栄えの良いモダンなウェブサイトを構築しています。
この進化により、HTML は習得が容易で、単純な Web ページから複雑な Web アプリケーションまであらゆるものを作成できるほど強力になりました。
HTMLを学ぶのは楽しいですが、インターネット上では常に安全を確保することが大切です。ウェブサイトにアクセスしたり、オンラインコンテンツを閲覧したりする際は、何かわからないことがあれば必ず大人に相談してください。あなたの安全は第一です。HTMLの学習は、常に楽しく安全な体験であるべきです。
今日学んだ重要な用語をいくつか見てみましょう。
HTMLは実世界の様々な場面で使われています。いくつか例を挙げてみましょう。
これらの例は、HTML が日常生活のさまざまな場面で非常に便利なツールであることを示しています。
今日は、HTML （ハイパーテキスト・マークアップ・ランゲージ）の略称について学びました。これはウェブページを作成する際に使われる基本言語です。覚えておくべき重要なポイントは以下のとおりです。
HTMLは、インターネット上で目にするあらゆるウェブサイトの基盤です。タグや属性といったシンプルな構成要素を組み合わせることで、楽しくインタラクティブなページを作成できます。学習を続けることで、HTMLがウェブページに命を吹き込み、インターネットを便利で刺激的な場所にしていることがわかるでしょう。
