[2022.04.17]Semantic HTML要素(可視化HTMLタグ)
意味のあるHTML?
学習の過程で、文書やYouTubeで意識的にHTMLを書くという話をよく耳にします.詩的なラベルはいったい何ですか.詩自体から見れば「意味的」だ.
つまり、意味のあるHTMLタグを書く必要があり、意味のあるタグを書くにはどうすればいいのか知りたいです.divまたはspanに加えて、他のタグを使用して、シミュレーションHTMLの作成方法を学習してみてください.
仮想タグの利点
仮想的に作成されたHTMLタグは、開発者やブラウザにHTML要素が何を意味するかを明確に伝えることができます.検索エンジン最適化(SEO)もよく、必要なコードを検索しやすくなります.
非意味タグ
非シンボルタグである場合、代表的なものは<div>および<span>である.
特に意味がないので気軽に使えます(?)あります.
特に、多くのWebサイトでは、ブロック要素<div>タグがコンテナとしてよく使用されていることがわかります.非仮想タグの問題といえば、利点と欠点아무런 의미없이 사용 된다が1つの点である.
書くときに便利に使えますが、実際にはこのマークが何を意味しているのか分かりにくいです.
HTML Semantic Elements
意味のないラベルの代わりにロマンチックなラベルを作ることができます.
もちろん、意味のないラベルも適切に混合して使用しますが、ウェブサイトの大きなレイアウトは次の仮想要素を参照したほうがいいです.
インデックスラベル名用途1<article>ブログ記事;ニュースなどの独立して分割または再利用可能なコンテンツを表します.ドキュメントのコンテンツに間接的に関連する部分を表します.3<aside>openの状態でのみ情報を表示するコンポーネントを生成します.4<details>親<figcaption>親<figure>親<figure>要素を含む他のコンテンツの説明または例を示します.<header>独立したコンテンツを表すために使用されます.6<main>タイトルまたはバッジに使用され、ページ内の主なコンテンツを作成します.7<nav>△唯一でなければなりません.ドキュメントに他のページまたは現在のページを表示するためのリンク.メニュー、ディレクトリ、インデックスなどに使用できます.9<section>は、コンテンツが似ているコンテンツを記述するために使用されます.10<summary>要約の場合に使用されるタグです.通常、<details>TAGの最初のサブアイテムとして使用されます.11<time>時間を表すタグとして使用されます.12footer著作権、連絡先情報、サイトマップ、関連ドキュメントなど、サイトの下部に使用されます.
1. article
<article>には、<article>をサブエレメントとして使用することができる.
重ねて使うと、外部の文章に関する文章を表します.例えばブログコメント-コメントあり<article>ラベルにh1~h6要素を加え、各<article>を識別する.
プロジェクトラベルを使用して、独立して使用可能なコンテンツを作成できます.
(文章を外したり、単独で使用したり、他の場所に置いたりしても意味を保つことができる内容)
9番の<section>と似ていますが、違いは<article>の内容が完全に分離されており、他の場所で使用できる独立した内容であることです.
sectionをarticleに組み合わせて使用するか、articleをsectionに組み合わせて使用することができます.
△誰が親になっても構わない.
<h1>Article 태그</h1>
<article class="article-container">
<aritcle class="content">
<h2>글 제목</h2>
<time datetime="2022-04-17">날짜</time>
<p>글 내용</p>
</aritcle>
<aritcle class="content">
<h2>Title</h2>
<time datetime="2022-04-17">2022.04.17</time>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum praesentium optio,
consectetur corporis molestiae dolor consequuntur? Tenetur illum quia magni adipisci?
Ex hic repellendus alias amet voluptate sit, voluptatibus quod.
</p>
</aritcle>
</article>
2. aside
これは、コアコンテンツではなく、ドキュメント内の他のコンテンツを意味します.例えば、バナーまたは広告、およびコアコンテンツに関連する追加情報は、片側に置くことができる.
<h1>Article 태그</h1>
<div class="container">
<aritcle class="content">
<h2>글 제목</h2>
<time datetime="2022-04-17">날짜</time>
<p>글 내용</p>
</aritcle>
<aside>
광고
</aside>
</div>
<h1>Article 태그</h1>
<div class="container">
<aritcle class="content">
<h2>오늘의 날씨</h2>
<time datetime="2022-04-17">2022.04.17</time>
<p>맑음</p>
</aritcle>
<aside>
<p>날씨는 그날 그날의<br>기상 상태를 의미한다.</p>
</aside>
</div>
3.details
<details>タブは、「開く」ステータスをクリックしたときに内部情報を表示する部品を生成します.
タグ属性にopenを加えると、内部情報が最初から開いている状態になります.<details>タグのデフォルト形式は▶ 세부정보と同じです.このプレビュータイトルラベルを変更するには、<details>の最初のサブアイテムを使用して<summary>タグにサマリーを作成します.
<details>
<summary>눌러보세요.</summary>
<p>내용</p>
</details>
4.figcaption
figcaptionのサブアイテムで、追加コンテンツを追加できます.(タイトルと同じ)<figure>
<img src="#" alt="img">
<figcation>
이미지에 대한 설명
</figcation>
</figure>
5. figure
独立したコンテンツを表現するために使用されます.通常は付録の画像、イラスト、グラフなどを入れます.
また、4番目に表示されたfigcaptionをサブエレメントとして追加の説明を追加することもできます.
6. header
ページタイトルやフラグなどに使用します.<article>TAGなどは、タイトル、ロゴ、ナビゲーションを定義するためによくサブラベルとして使用されます.<header>
<h1>헤더</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
7. main
<body>はタグの主な内容を示す.すなわち、ページ内のコアコンテンツを作成するために使用されます.
1つ以上のmainタグは使用しないでください.(ドキュメントの一意の内容でなければなりません)<main>
<h1>사이트 제목</h1>
<article>
<h2>제목</h2>
<p>내용</p>
</article>
<article>
<h2>제목</h2>
<p>내용</p>
</article>
</main>
8. nav
現在のページ内、他のページへのリンクを表すリンクです.
通常、メニュー、ディレクトリ、インデックスを表すために使用されます.<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>
9. section
コンテンツを分離して別の場所に貼り付けることができる場合は、<article>タグを使用し、類似したコンテンツを作成する場合は<section>タグを使用します.sectionをarticleに組み合わせて使用するか、articleをsectionに組み合わせて使用することができます.
通常の造形の容器として使用する場合は、sectionではなく<div>タグを使用します.<section>
<h2>section 태그</h2>
<p>일반 컨테이너로는 사용하지 말것.</p>
</section>
10. summary
要約を表すタグ.第3部で説明したように、タグに使用される第1のサブアイテム<details>TAG.
11. time
datetimeプロパティを時間を表すタグとして使用します.(datetimeプロパティは必須ではありません.)
有効なdatetime値があり、参照して記述できます.
有効なdatetime <time datetime="2022-04-07">2022년 04월 07일</time>
12. footer
フッターに使用し、Webサイトの下部にWebサイトの地図、関連ドキュメント、著作権情報などを記入します.<footer>
<p>
Portions of this content are ©1998–2022 by individual mozilla.org contributors.
</p>
</footer>
参考資料
W3school html semantic elements
MDN Semantics
MDN HTML elements reference
Reference
この問題について([2022.04.17]Semantic HTML要素(可視化HTMLタグ)), 我々は、より多くの情報をここで見つけました
https://velog.io/@reasonz/2022.04.17-Semantic-HTML-elements-시맨틱한-HTML-태그
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
意味のないラベルの代わりにロマンチックなラベルを作ることができます.
もちろん、意味のないラベルも適切に混合して使用しますが、ウェブサイトの大きなレイアウトは次の仮想要素を参照したほうがいいです.
インデックスラベル名用途1
<article>ブログ記事;ニュースなどの独立して分割または再利用可能なコンテンツを表します.ドキュメントのコンテンツに間接的に関連する部分を表します.3<aside>openの状態でのみ情報を表示するコンポーネントを生成します.4<details>親<figcaption>親<figure>親<figure>要素を含む他のコンテンツの説明または例を示します.<header>独立したコンテンツを表すために使用されます.6<main>タイトルまたはバッジに使用され、ページ内の主なコンテンツを作成します.7<nav>△唯一でなければなりません.ドキュメントに他のページまたは現在のページを表示するためのリンク.メニュー、ディレクトリ、インデックスなどに使用できます.9<section>は、コンテンツが似ているコンテンツを記述するために使用されます.10<summary>要約の場合に使用されるタグです.通常、<details>TAGの最初のサブアイテムとして使用されます.11<time>時間を表すタグとして使用されます.12footer著作権、連絡先情報、サイトマップ、関連ドキュメントなど、サイトの下部に使用されます.1. article
<article>には、<article>をサブエレメントとして使用することができる.重ねて使うと、外部の文章に関する文章を表します.例えばブログコメント-コメントあり
<article>ラベルにh1~h6要素を加え、各<article>を識別する.プロジェクトラベルを使用して、独立して使用可能なコンテンツを作成できます.
(文章を外したり、単独で使用したり、他の場所に置いたりしても意味を保つことができる内容)
9番の
<section>と似ていますが、違いは<article>の内容が完全に分離されており、他の場所で使用できる独立した内容であることです.sectionをarticleに組み合わせて使用するか、articleをsectionに組み合わせて使用することができます.
△誰が親になっても構わない.
<h1>Article 태그</h1>
<article class="article-container">
<aritcle class="content">
<h2>글 제목</h2>
<time datetime="2022-04-17">날짜</time>
<p>글 내용</p>
</aritcle>
<aritcle class="content">
<h2>Title</h2>
<time datetime="2022-04-17">2022.04.17</time>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum praesentium optio,
consectetur corporis molestiae dolor consequuntur? Tenetur illum quia magni adipisci?
Ex hic repellendus alias amet voluptate sit, voluptatibus quod.
</p>
</aritcle>
</article>2. aside
これは、コアコンテンツではなく、ドキュメント内の他のコンテンツを意味します.例えば、バナーまたは広告、およびコアコンテンツに関連する追加情報は、片側に置くことができる.
<h1>Article 태그</h1>
<div class="container">
<aritcle class="content">
<h2>글 제목</h2>
<time datetime="2022-04-17">날짜</time>
<p>글 내용</p>
</aritcle>
<aside>
광고
</aside>
</div><h1>Article 태그</h1>
<div class="container">
<aritcle class="content">
<h2>오늘의 날씨</h2>
<time datetime="2022-04-17">2022.04.17</time>
<p>맑음</p>
</aritcle>
<aside>
<p>날씨는 그날 그날의<br>기상 상태를 의미한다.</p>
</aside>
</div>3.details
<details>タブは、「開く」ステータスをクリックしたときに内部情報を表示する部品を生成します.タグ属性に
openを加えると、内部情報が最初から開いている状態になります.<details>タグのデフォルト形式は▶ 세부정보と同じです.このプレビュータイトルラベルを変更するには、<details>の最初のサブアイテムを使用して<summary>タグにサマリーを作成します. <details>
<summary>눌러보세요.</summary>
<p>내용</p>
</details>4.figcaption
figcaptionのサブアイテムで、追加コンテンツを追加できます.(タイトルと同じ)<figure>
<img src="#" alt="img">
<figcation>
이미지에 대한 설명
</figcation>
</figure>5. figure
独立したコンテンツを表現するために使用されます.通常は付録の画像、イラスト、グラフなどを入れます.
また、4番目に表示された
figcaptionをサブエレメントとして追加の説明を追加することもできます.6. header
ページタイトルやフラグなどに使用します.
<article>TAGなどは、タイトル、ロゴ、ナビゲーションを定義するためによくサブラベルとして使用されます.<header>
<h1>헤더</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>7. main
<body>はタグの主な内容を示す.すなわち、ページ内のコアコンテンツを作成するために使用されます.1つ以上のmainタグは使用しないでください.(ドキュメントの一意の内容でなければなりません)
<main>
<h1>사이트 제목</h1>
<article>
<h2>제목</h2>
<p>내용</p>
</article>
<article>
<h2>제목</h2>
<p>내용</p>
</article>
</main>8. nav
現在のページ内、他のページへのリンクを表すリンクです.
通常、メニュー、ディレクトリ、インデックスを表すために使用されます.
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
</nav>9. section
コンテンツを分離して別の場所に貼り付けることができる場合は、
<article>タグを使用し、類似したコンテンツを作成する場合は<section>タグを使用します.sectionをarticleに組み合わせて使用するか、articleをsectionに組み合わせて使用することができます.通常の造形の容器として使用する場合は、sectionではなく
<div>タグを使用します.<section>
<h2>section 태그</h2>
<p>일반 컨테이너로는 사용하지 말것.</p>
</section>10. summary
要約を表すタグ.第3部で説明したように、タグに使用される第1のサブアイテム
<details>TAG.11. time
datetimeプロパティを時間を表すタグとして使用します.(datetimeプロパティは必須ではありません.)
有効なdatetime値があり、参照して記述できます.
有効なdatetime
<time datetime="2022-04-07">2022년 04월 07일</time>12. footer
フッターに使用し、Webサイトの下部にWebサイトの地図、関連ドキュメント、著作権情報などを記入します.
<footer>
<p>
Portions of this content are ©1998–2022 by individual mozilla.org contributors.
</p>
</footer>W3school html semantic elements
MDN Semantics
MDN HTML elements reference
Reference
この問題について([2022.04.17]Semantic HTML要素(可視化HTMLタグ)), 我々は、より多くの情報をここで見つけました https://velog.io/@reasonz/2022.04.17-Semantic-HTML-elements-시맨틱한-HTML-태그テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol