HTML5における＜li＞タグの使い方

<li>要素は、リストの項目を記述する際に使用するための要素になります。「li」とは「list item」の略です。今回はHTML5における<li>タグの使い方についてご紹介します。

HTML5における<li>タグの使い方

<li>要素は、リストの項目を記述するための要素なので、<ul>や<ol>のリスト構造タグの、項目の設定のために使用します。番号なしのリストの記述<ul>で<li>を利用した場合、以下のようになります。

以下は上記のタグの表示サンプルです。このように箇条書きの表現は、webサイトのコンテンツでもよく利用すると思いますが、・と<br>を使用してしまうと文章構造上ふさわしくありませんし、装飾にも不便です。必ずリストタグを利用するようにしましょう。

親要素が、<ul>ではなく、<ol>の場合、value要素を利用してリストの項目の順序を設定することができます。<ol>要素は、番号付きリストを生成するものです。特に指定しないと、記述の順番通りに数字が反映されることになります。例えば、先ほどのリストを番号付きのリストに変更してみます。<ul>を<ol>に変えるだけです。

表示はこのようになります。

先ほどのタグを、value属性を利用して、好きな整数を指定してみます。

表示サンプルです。このように、指定した通りに表示することができます。

基本的な<li>要素の使用方法は以上になります。<ul>タグや<ol>タグの使い方と合わせて覚えておくと便利でしょう。