Primer lesson: ハイパーテキストマークアップ言語

ハイパーテキストマークアップ言語 (HTML)

HTML は、Hypertext Markup Language (ハイパーテキストマークアップ言語) の略です。Web ブラウザーで表示するように設計されたドキュメントの標準マークアップ言語です。HTML は、カスケーディングスタイルシート (CSS) などのテクノロジや、JavaScript などのスクリプト言語によってサポートされます。

ウェブの基盤

インターネットの本質は、世界中に接続されたコンピュータの巨大なネットワークです。このネットワークとやり取りする主な方法は、インターネット経由でアクセスされる相互リンクされたハイパーテキストドキュメントのシステムである World Wide Web (WWW) です。WWW の中心となるのは、HTML で記述されたドキュメントである Web ページです。HTML はサイトの基本構造を提供し、その後、CSS や JavaScript などの他のテクノロジによって拡張および変更されます。

HTML ドキュメントの構造

HTML ドキュメントは、山括弧で囲まれた要素であるネストされたタグのセットに従って構造化されます。これらのタグは、Web ブラウザにコンテンツの表示方法を指示します。単純な HTML ドキュメント構造の例を次に示します。

 <!DOCTYPE html>
<html>
    <ヘッド>
        <title>ページタイトル</title>
    </head>
    <本文>
        <h1>これは見出しです</h1>
        <p>これは段落です。</p>
    </本文>
</html>

このコードは、タイトル、見出し、およびテキストの段落を含む基本的な Web ページを定義します。

HTML 要素とタグ

HTML ドキュメントは HTML 要素で構成されています。各要素は、開始タグ、コンテンツ、および終了タグによって表されます。要素の開始タグと終了タグは同一ですが、終了タグには要素名の前にスラッシュが含まれます。

たとえば、<code><p></code> タグはテキストの段落を囲み、次のように構造化されます。

 <p>これは例の段落です。</p>

要素によって目的が異なります。例:

<code><h1>...</h1></code> から <code><h6>...</h6></code> タグは見出しに使用されます。
<code><a></code> タグはハイパーリンクを定義します。
<code><img></code> タグはドキュメントに画像を埋め込みます。

属性

HTML 要素には、要素に関する追加情報を提供する属性を設定できます。属性は要素の開始タグ内に配置され、多くの場合、<code>name="value"</code> のように名前と値のペアで指定されます。

たとえば、画像を埋め込むには、<code><img></code> タグと <code>src</code> (ソース) 属性を使用して画像の URL を指定します。

 <img src="image.jpgのurl" alt="画像の説明">

<code>alt</code> 属性は、画像を表示できない場合に画像の代替テキストを提供します。

リンクとナビゲーション

<code><a></code> タグを使用すると、Web の相互接続の基礎となるハイパーリンクが作成されます。ハイパーリンクは、別の Web ページ、同じページ上の別のセクション、またはダウンロード可能なファイルにリンクできます。例:

 <a href="https://example.com">Example.com にアクセス</a>

これにより、<code>https://example.com</code> へのリンクが作成されます。

順序なしリスト (<code><ul></code>)。項目の順序は重要ではありません。順序なしリスト内の項目は箇条書きでマークされます。
順序付きリスト (<code><ol></code>)。項目の順序が重要になります。順序付きリスト内の項目には番号が付けられます。

リスト内の各項目は、<code><li></code> (リスト項目) タグで囲まれます。

HTML5

HTML5 は標準の最新の進化版であり、マルチメディアやインタラクティブなドキュメントに対する最新のニーズを反映した多くの新機能が導入されています。これには、新しい構造要素 (<code><header></code>、<code><footer></code>、<code><article></code>、<code><section></code>)、グラフィック要素 (描画用の <code><canvas></code>、スケーラブルなベクターグラフィック用の <code><svg></code>)、およびメディア要素 (<code><audio></code> および <code><video></code>) が含まれます。

セマンティック HTML

セマンティック HTML とは、HTML マークアップを使用して、Web ページの情報のセマンティクス、つまり意味を強化することです。要素の外観や動作を単に定義するのではなく (これは CSS と JavaScript の役割です)、セマンティック HTML ではコンテンツの構造とタイプを正確に記述します。たとえば、<code><article></code> タグは、その中のコンテンツが記事であることを示し、<code><nav></code> タグはナビゲーションメニューを表します。

セマンティック HTML を使用すると、Web コンテンツのアクセシビリティと検索性が向上し、より使いやすく、見つけやすくなります。

結論

HTML は World Wide Web の基盤となる技術で、Web ページの基本構造を提供します。タグ、属性、要素を使用することで、HTML は構造化されたドキュメントの作成を可能にします。HTML を理解して使用することで、単純なテキストドキュメントから複雑なインタラクティブマルチメディアエクスペリエンスまで、Web 上でアクセス可能な幅広いコンテンツを作成できます。Web 開発の基礎として、Web の設計や開発を目指す人にとって HTML の習得は不可欠です。

ハイパーテキストマークアップ言語

ハイパーテキスト マークアップ言語 (HTML)