More than 3 years have passed since last update.

HTMLの主なタグと用途(1) 「改行」「区切り」「リスト」「説明リスト」「Emmet省略記号」

Last updated at 2021-11-23Posted at 2021-08-11

##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
:::note info
・Unordered Listの略。
・リスト項目に順序を付けない場合に使用。
:::
【サンプル】

index.html

<ul>
 <li>りんご</li>
 <li>みかん</li>
 <li>ぶどう</li>
</ul>

【表示例】

###ol
:::note info
・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/