01 / 06
箇条書きは ul と li
箇条書きは2つのタグの組み合わせで作るよ。
<ul>… リスト全体の入れ物<li>… 1行1行の項目
<li> を <ul> の中に入れて書く。この「入れ子」がHTMLの大事な考え方だよ。
<ul> <li>りんご</li> <li>みかん</li></ul>ページを組み立てる
INPUT · スライド
リストとリンクを学ぼう
01 / 06
箇条書きは ul と li
02 / 06
番号つきリストは ol
順番が大事なリストは <ul> の代わりに <ol> を使うと、自動で番号がつくよ。
中身が <li> なのは同じ。
<ol> <li>たまごを割る</li> <li>まぜる</li> <li>焼く</li></ol>03 / 06
リンクは a タグ
ページとページをつなぐリンクは <a> タグで作る。
href="..." の部分にリンク先のURLを書くよ。タグに追加するこういう情報を属性と呼ぶんだ。
<a href="https://example.com">れんしゅうサイトへ</a>04 / 06
リンクの文字は中身で分かるように
<a> で囲んだ文字が、画面に出るリンクの文字になる。ここは押したら何が起きるか分かる言葉にしよう。
- ✗
<a href="...">こちら</a> - ○
<a href="...">料金のページ</a>
目の見えない人が使う読み上げソフトは、リンクだけを拾って読み上げることがある。「こちら」ばかりでは何のリンクか分からないんだ。
<a href="/price">料金のページ</a>05 / 06
組み合わせて使う
リストの項目の中にリンクを入れることもできる。
お気に入りリンク集、ナビゲーションメニュー——Webページの定番パーツはこの組み合わせでできているよ。
<ul> <li><a href="https://example.com">お気に入り1</a></li> <li><a href="https://example.org">お気に入り2</a></li></ul>06 / 06
なぜリストのタグを使うのか
見た目だけなら、<p> を並べて行頭に「・」を書いても似たものは作れる。それでも <ul> を使うのには理由があるよ。
<ul> と書いてあれば、ブラウザにも読み上げソフトにも検索エンジンにも「これは項目の集まりだ」と伝わる。「全部で3項目、その1つ目」といった案内ができるようになるんだ。
タグは見た目ではなく意味を決めるもの。この章のはじめに出てきた考え方が、ここでも効いているよ。