この記事では、 h1->h6タグとul–liタグを使用して、HTMLで見出しとリストを作成する方法を紹介します。

Wordで記事を表示する場合、その記事のメインタイトルに見出し1​​を付けます。次に、大きなアイテムの見出し2を配置し、各大きなアイテムの中に見出し3を配置します。HTMLでも、見出しタグ（ hと略記）を使用してWebに表示します。

次に、 ulタグとliタグも紹介します。これらは2組のタグであり、多くの場合、一緒になってリストアイテムを作成します。さあ、始めましょう。

HTMLで見出しを作成する

hタグ（見出し）は、Webページのメインタイトルとサブ見出しを作成するために使用され、タイトルを強調する効果があるだけでなく、WebサイトのSEOの分野でも機能します。

h1 > h6の合計6つのhタグがあり、各タグのデフォルトのフォントサイズは徐々に小さくなります。 H1が最大サイズになり、次にh2 ..、最後にh6が続きます。

 <h1>Tiêu đề H1</h1> <h2>Tiêu đề H2</h2> <h3>Tiêu đề H3</h3> <h4>Tiêu đề H4</h4> <h5>Tiêu đề H5</h5> <h6>Tiêu đề H6</h6>

あなたがよりよく理解するために、私がこの記事でどのように提示したかを次のように見てください：

• 記事のメインタイトルh1タグ「見出しとリスト形式のHTMLタグ」を付けました
• 2つの小見出し「見出しフォーマットタグ」と「リストフォーマットタグ」は、 h1のごく一部であるため、 h2タグを使用します。
• 同様に、各h2タグでさらに分割されている場合は、 h3タグを使用します。

HTMLでリストを作成する

見出しを使用してアイテムのメインタイトルと小見出しを作成する場合、listタグを使用してデータを一覧表示します。このプレゼンテーションは、Wordを使用する場合に非常に一般的です。

例：3つのアイテムがあるとすると、次のようにリストします。

• item1
• item2
• item3

上記の構造を作成するには、 ulタグとliタグを組み合わせる必要があります。ここで、 ulタグはアイテムのリストを宣言するために使用され、 liタグは各アイテムを宣言するために使用されます。

上記の例では、そのHTML構造は次のようになります。

 <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>

サブアイテムが必要な場合、つまり各アイテムにサブアイテムのリストがある場合は、そのアイテム内にulタグを作成する必要があります。

例：Item2には、次のように追加の子アイテムがあります。

• item1
• item2
  • item2.1
  • item2.2
• item3

これで、HTML構造は次のようになります。

 <ul> <li>item1</li> <li>item2 <ul> <li>​item2.1</li> <li>item2.2</li> </ul> </li> <li>item3</li> </ul>

次のような番号でマークされたリストを作成する場合：

1. アイテム1
2. アイテム2
3. アイテム3

次に、次のように、 olタグをliタグと組み合わせて使用​​します。

 <ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol>

HTMLで見出しとリストを作成するための自作の演習

トピックは次のとおりです。見出しタグを使用して見出しとサブセクションを作成し、HTMLとCSSを使用して記事を作成します。各アイテム内で、ulタグとliタグを使用してリストを作成します。

通常、 ulタグとliタグを使用して、マルチレベルメニュー、垂直メニュー、および水平メニューを作成します。ただし、これを行うには、CSSと組み合わせる必要があります。したがって、HTMLとCSSの2つの部分を学習した後、これらの実用的な例を実行します。