コンテンツ構造化のためのHTML入門

HTMLはすべてのウェブページの基盤です。ウェブサイトの構造と内容を定義し、家の壁やドア、屋根が家を構成するのと同じ役割を果たします。

HTMLは通常、開始タグと終了タグのペアからなる要素で構成されています。これらの要素は階層構造を形成し、一部の要素は他の要素の中に入れ子にされることで、意味のあるページ構造を作ります。

例

Run Code をクリックして出力を確認してください。

HTMLでのさまざまなタグの追加

HTMLでは、さまざまなタグを使用してウェブページに多様なコンテンツを追加できます。テキスト、画像、リンクなどを追加する方法は次のとおりです:

テキストの追加

ウェブページにテキストを追加するには、段落には <p> タグ、異なるレベルの見出しには <h1> から <h6> タグを使用します。

画像の追加

画像を追加するには、<img> タグを使用します。画像のソース（src 属性）を指定し、必要に応じて代替テキスト用の alt 属性や、サイズ指定の width および height 属性を追加します。

<img src="image.jpg" alt="Description of the image" width="300" height="200" />

リンクの追加

他のウェブページやリソースへのハイパーリンクを追加するには、<a> タグを使用します。遷移先ページのURLは href 属性で指定します。

リストの追加

順序付きリスト（番号付き）や順序なしリスト（箇条書き）を作成するには、それぞれ <ol> タグと <ul> タグを使用します。これらのタグの中で、各リスト項目には <li> タグを使用します。

フォームの追加

ユーザー入力用のフォームを作成するには、<form>、<input>、<button> などのフォーム関連タグを使用します。

これらのHTMLタグを使用することで、シンプルなテキストや画像からインタラクティブなフォームまで、さまざまなコンテンツをウェブページに追加可能。以下に、考慮されたタグを用いたウェブサイトの例を示す。

ビデオチュートリアル