HTMLリスト：ステップバイステップガイド

HTMLリストタグは、Webページにリストを作成するために使用されます。順序付きリスト、順序なしリスト、説明リストの3種類のリストを作成できます。

Webページを作成するときは、適切な形式のリストとして情報を表示することをお勧めします。たとえば、リスト形式で表示したい学生名の名簿がある場合や、リストとしてフォーマットしたい一連のブログ投稿がある場合があります。

HTMLで 、リストを作成できる組み込み関数があります。このチュートリアルでは、HTMLについて説明します。 リストの種類とそれらをWebページに実装する方法。

HTMLリストタイプ

HTMLには3種類のリストがあります 、およびそれぞれに特定の目的とコードがあります。これらは次のとおりです。

• Ordered list ：特定の順序でアイテムのリストを作成するために使用されます。
• Unordered list ：順序のないアイテムのリストを作成するために使用されます。
• Description list ：アイテムと説明のリストを作成するために使用されます。

リストは、テキスト内、改行後、または別のリスト内に配置してnested listを作成するかどうかに関係なく、Webページの任意の部分に表示できます。 。これらの3種類のリストをHTMLで作成する方法を詳しく見ていきましょう。 。

HTMLリスト：注文済み

Ordered list HTMLで使用されます リストの順序が必要な場合。たとえば、特定の順序で実行する必要のある一連の命令がある場合は、順序付きリストを使用する必要があります。 Ordered list 番号付きリストです。

Ordered list <ol>を使用する タグを付け、リスト内の各アイテムは<li>を使用します 鬼ごっこ。順序付きリストの例を次に示します。

<ol>
	<li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.</li>
	<li>Leave the mix to rest for 30 minutes.</li>
	<li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.</li>
	<li>Pour batter mixture into the pan and cook on each side for one minute.</li>
</ol>

上記の例では、パンケーキの基本的なレシピを作成しました。このリストの各ステップは順番に実行する必要があるため、順序付きリストを選択しました。コードの出力は次のとおりです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

Ordered list 番号1から始めて、昇順で進みます。ただし、リストを別の番号で開始する場合は、startを使用できます。 そのような属性：

<ol start="5">
	<li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).</li>
	<li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.</li>
	<li>Enjoy your pancakes!</li>
</ol>

新しいリストは次のように表示されます：

HTMLリスト：順序なし

リストのアイテムの順序が重要ではないアイテムのリストを作成する場合は、HTML unorderedを使用できます。 リストタグ。 Unordered listを作成できます <ul>を使用する タグ、および各リストアイテムは、順序付きリストと同様に、<li>で始まります。 タグ。

これはUnordered listの例です ：

<ul>
	<li>Alex</li>
	<li>Carol</li>
	<li>Lucy</li>
	<li>Shawn</li>
</ul>

リストは次のように表示されます：

HTMLリスト：説明リスト

リストを作成するときは、リストの各アイテムの説明を含めることをお勧めします。たとえば、生徒の名前のリストがある場合は、メインのリストテキストの一部としてではなく、成績を追加することができます。

ここにDescription listがあります Description list 各要素の説明を含むアイテムのリストです。 Description list <dl>を使用して作成されます タグ、リストの主な要素は<dt>を使用します タグ、および定義は<dd>を使用します タグ。

これがDescription listの例です HTMLで ：

<dl>
	<dt>Economy Class</dt>
	<dd>Standard seats, no meal service.</dd>
	<dt>First Class</dt>
	<dd>Luxury seats, catered meal service.</dd>
</dl>

このコードは次のリストを返します：

ご覧のとおり、飛行機のクラス名はリスト形式で表示され、それらの名前の説明は各項目の下に表示されます。各説明もインデントされており、リストアイテムと区別されます。

結論

リストはHTMLの必須タグです 、これにより、開発者は適切な形式で情報を提示できます。通常、リストはユーザーにとって読みやすく、リストを使用すると、開発者は情報構造をより細かく制御できます。

このチュートリアルでは、リストをHTMLに分類しました。 、および3種類のHTMLのいずれかを作成する方法 リスト：ordered （li olタグ）、unordered （ul liタグ）、およびdescription （dt ddタグ）。これで、HTMLでリストを作成する準備が整いました。 プロのように！