Grouping content

ol、ul、liラベル

ol-ordered listの略で、順序のあるリストを表します
ul-無秩序リストを無秩序リストと略す
Li-list itemを表す各項目のタグをリストします
注意すべきは、li要素はolまたはul要素でのみ使用でき、ol、ulの直系サブ要素としてはli要素しか使用できないことです.ul,ol > li

dl、dt、ddタグ

リストを定義するためにol、ul、liタグが使用されているように
dl、dt、ddもリストを定義するために使用されます.
差異がある場合は、辞書などの任意のコンテンツを定義します.
dl - definition list
dt - definition term
dd - definition description

使用例

1.メタデータの表示

類型:激しい論争が好きな弁論家(ENTP)
適用

<dl>
	<dt>유형</dt>
    <dd>뜨거운 논쟁을 즐기는 변론가(ENTP)</dd>
</dl>

類型:激しい論争が好きな弁論家(ENTP)

2.目標の定義（説明）

例
論争好きな弁論家
ENTPは自分の構想を実現する気質が強く、特有の局外的な性格を加え、その名の通り革命家の気質を持っている.すべての分野で、既存の体制を覆したり、分野全体の飛躍を実現したりする人が多い.
適用

<dl>
	<dt>뜨거운 논쟁을 즐기는 변론가</dt>
    <dt>ENTP</dt>
    <dd>ENTP는 본인이 구상하는 바를 실현시키고 싶어하는 기질이 강하며, 여기에 특유의 아웃사이더적인 성격까지 겹쳐 말 그대로 혁명가의 기질을 띠고 있다. 모든 분야에 있어서, 기존의 체제 자체를 뒤집어 버리거나 분야 전체의 도약을 이루어내는 인물들이 많다.</dd>
</dl>

注意事項

dlは、1つ以上のdt、dd偶を含む必要があります.
dt,ddはdl以外では独立して使用できない.
しかし、dtとddは必ずしもペアになる必要はありません.
だからdtは兄弟要素として1つ以上のddを持つことができる.さらに、1つ以上のdtが連続的に現れることができる.
divはdt、ddペアを巻き付けるのに使用できますが、dt-ddの兄弟要素ではありません.
dlには、空白以外のテキストノードとdiv、dt、dd以外の要素を含めることはできません.

divラベル

divレイアウトを分割するためのタグ
コンテンツのシェイプは変更されませんが、サブアイテムの複数の要素を組み合わせてスタイルを変更できます.
article、section、geader、navは基本的にdivと同じです.違いはラベルに意味を与えることです.
たとえば、コンテンツが独立したコンテンツである場合は、divではなくarticleを使用します.
言い換えれば、article、section、header、navはdivで置き換えることができますが、より適切な要素が見つかり、置き換え可能なタグがない場合は、最後の手段として使用します.

Semantic Tags

詩文マークは意味のあるマークで、意味に応じて使うべきです.
3つの重要な心理的マーカーの原因

最適化seo
検索を最適化して、特定のキーワードを検索するときに、作成した検索エンジンの上部でソートできます.

Webアクセス性
画面リーダー(視覚ではなく)を使用してWebページを読むか、キーボードのみを使用してWebサイトにアクセスする場合は、正しいビジュアルタグを使用して作成されたWebサイトが正常に動作します.

保守性
div boxのみを使用してすべての構造を組織するよりも、メンテナンスが容易です.

しかしHTMLでは新しいタグが登場し,ブラウザ間の互換性の問題ではブラウザ間での問題が発生する可能性があるため,ユーザターゲットに合ったタグを柔軟に使用する必要がある.

figure, figcaption

Webページを閲覧すると、字幕(字幕、説明)が付いた画像に触れることがありますが、これらの内容については、画像を字幕に関連付けるグラフィック要素を導入することができます.

<figure>
	<img src="images/baby.jpg" alt="엄마 코끼리와 아기 코끼리">
	<figcaption>
		관심 받고싶어하는 아기
	</figcaption>
</figure>

アイコン問題要素は画像にタイトルを追加するために導入され、図とアイコン問題要素が現れるまでimg要素を対応するタイトルに関連付けることはできません.

pラベル

段落のタグを表示します.これは完全な段落を意味するため、pタグではpをサブアイテムとして使用する必要はなく、改行に使用する必要もありません.

pre

HTML合成の一般的な内容が画面に表示されます.コード表示

<pre>
  <code>
    let val= 1;
    function myFunc(value){
      return value;
    }
    myFunc(val);
  </code>
</pre>

blockquote

参照ブロック、主に文で使用
例

<blockquote>
    <p>제발 그만해.. 이러다가 다~~ 죽어!</p>
    <cite>오징어게임 오일남</cite>
</blockquote>
<p><q>제발 그만해.. 이러다 다~~ 죽어!</q>라고 오일남이 소리쳤습니다.<p>

main

HTML main要素は、ドキュメントの主な内容を表します.
主な分野とは、ドキュメントのコアトピックやWebアプリケーションのコア機能に直接関連する部分です.プライマリ要素に入るコンテンツは、ドキュメントの一意のコンテンツでなければなりません.
これらの情報は、サイトロゴ、検索フォーム、著作権情報など、他のページまたはセクションで繰り返される場合があります.
IEは最近登場したサポートされていない要素であり、使用に注意する必要がある.

hr

hrタグは当初横線を表すのに用いられていたが、HTML 5では意味のある要素である.
ストーリー内のシーン切り替えや、段落内でトピックを変更するときに区別します.pタグ内の使用は、段落区切りに使用されるため、Web規格に違反しています.