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

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

HTMLはHypertext Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。Webブラウザで表示される文書の標準マークアップ言語です。HTML HTML 、カスケーディング・スタイル・シート（ CSS ）などの技術やJavaScriptなどのスクリプト言語によってサポートされます。

ウェブの基盤

インターネットの根幹は、世界中に接続されたコンピュータの巨大なネットワークです。私たちがこのネットワークとやり取りする主な方法は、インターネットを介してアクセスされる相互にリンクされたハイパーテキスト文書のシステムであるワールド・ワイド・ウェブWWW WWW ）です。WWWの中核を成すのは、 HTMLで記述された文書であるウェブページです。HTML HTMLサイトの基本構造を提供し、 CSSやJavaScriptなどの他の技術によって拡張・変更されます。

HTMLドキュメントの構造

HTML文書は、山括弧で囲まれた要素であるネストされたタグのセットによって構造化されます。これらのタグは、ウェブブラウザにコンテンツの表示方法を指示します。単純な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マークアップを用いてウェブページ内の情報のセマンティクス（意味）を強化することを指します。要素の見た目や動作を単に定義するのではなく（これはCSSとJavaScriptの役割です）、セマンティックHTMLコンテンツの構造と種類を正確に記述します。例えば、<code><article></code>タグは、その中のコンテンツが記事であることを示します。一方、<code><nav></code>タグは、ナビゲーションメニューであることを示します。

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

結論

HTMLワールド・ワイド・ウェブの基盤となる技術であり、ウェブページの基本構造を提供します。タグ、属性、要素を用いることで、 HTML構造化された文書の作成を可能にします。HTML HTML理解し活用することで、シンプルなテキスト文書から複雑でインタラクティブなマルチメディア体験まで、ウェブ上でアクセス可能な幅広いコンテンツを作成できます。ウェブ開発の基礎として、 HTMLの習得はウェブのデザインや開発を目指す人にとって不可欠です。

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