1. はじめに
HTMLの学習内容は広大なので、本記事では
「改行」「区切り」「リスト」「説明リスト」「Emmet省略記号」
を記載する。
2. 改行
index.html
<br>
・breakという意味。 ・文章の最後に入力。 ・開始タグのみ（終了タグは無し）
【サンプル】
index.html
<body>
<p>〒150-00〇〇<br>東京都渋谷区〇〇町xx-x<br>〇〇ビルx階</p>
</body>
【表示例】
※p要素を複数配置せずにbr要素で記述した方がスッキリと記述することができる。
3. 区切り
index.html
<hr>
・horizontal rule の略。 ・テーマの意味的な区切りを表す。 （話の切り替え、節内での話題変換など）
【サンプル】
index.html
<body>
<p>2021年8月11日(水)</p>
<hr>
<p>本日の予定</p>
</body>
【表示例】
4. リスト
index.html
<li></li>
・List Itemの略。 ・リストの項目を記述する際に使用する。 ・リスト表示したい項目に<li>タグをつけて <ul>～</ul>または<ol>～</ol> の間に記述する。
ul
・Unordered Listの略。 ・リスト項目に順序を付けない場合に使用。
【サンプル】
index.html
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
【表示例】
ol
・Ordered Listの略。 ・リスト項目に順序を付ける場合に使用。
【サンプル】
index.html
<ol>
<li>金賞</li>
<li>銀賞</li>
<li>銅賞</li>
</ol>
【表示例】
リスト内の子要素
【サンプル】
index.html
<body>
<ul>
<li>パン</li>
<li>
ご飯
<ul>
<li>白米</li>
<li>赤飯</li>
</ul>
</li>
</ul>
</body>
【表示例】
5.説明リスト
一連の用語と説明をリスト化したもの。
dl:説明リスト要素 dt:説明の用語 dd:用語の説明
【サンプル】
index.html
<body>
<dl>
<dt>用語</dt>
<dd>説明</dd>
</dl>
</body>
【表示例】
6.補足_Emmet省略記号
複数のタグを使用したい場合、Emmet省略記号を使用する。
【サンプル】
olタグ内にliタグを3つ用意したい場合
index.html
<body>
ul>li*3
</body>
と表記する。
【参考資料】
Emmet Cheet Sheet
https://docs.emmet.io/cheat-sheet/