ホームページで公開する内容は、タグでマークアップしていきます。
HTML5で使用するタグはたくさんありますが、その中からよく使うものをご紹介します。
第3回ではいくつかのタグを使ってindex.htmlを作成しました。
今回はsub.htmlを使っていくつかのタグを紹介していきます。
第3回を行っていない人はこちらから。
【第3回】HTML・CSSの入門 -html5の基本2-
sub.htmlファイルに基本のHTML５要素を記述しておきます。
＜emmet＞
[！]キーを入力 → [Enter]キーをおす
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>いくつか修正をおこなっておきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>練習２</title>
</head>
<body>
</body>
</html>箇条書きリスト
＜ul＞<li>~</li></ul>
＜ol＞<li>~</li></ol>
箇条書きリストには、番号なしリスト(ul)と番号付きリスト（ol）があり、どちらもリストで表示します。この箇条書きリスト（番号なしリスト）をメニューを作成するのに使用しています。
ul ・・・ Unordered list
ol ・・・ Ordered list
li ・・・ List
番号なしリスト（unordered list）
＜emmet＞
記述方法：タグ{コンテンツ}*n
タグ>タグ -> 親要素＞子要素
[ul>li{リスト$}*3] → [Enter]キーをおす
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
番号つきリスト(ordered list)
＜emmet＞
記述方法：タグ{コンテンツ}*n
＄->連番
*n->繰り返す
[ol>li{リスト$}*5] → [Enter]キーをおす
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ol>
表
表組みです。
大きな枠組みをtable、行をtr（table row）、列をtd（table data）、見出しの列はth(table header)で表します。
タグのみだと線が表示されません。線はcssで設定しましょう。
＜emmet＞
記述方法：タグ＋タグ -> 兄弟要素
[table>(tr>th{見出し$}*5)+(tr>td{内容$}*5)*3] → [Enter]キーをおす
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
<th>見出し4</th>
<th>見出し5</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
</table>
