なぜシーメンスラベルを使うのですか?


1.チームメンバーがHTMLタグを見ると、レイアウト構造をすばやく理解できます。

<div class="main">
  <div>
    <div>
      <div class="nav-bar">
     	<ul>
          <li><a href="#">Menu -1 </a></li>
          <li><a href="#">Menu -2 </a></li>
          <li><a href="#">Menu -3 </a></li>
    	</ul>
      </div>  
    </div>
  </div>
</div>
極端なnav-barがdivラベルの間に埋め込まれていることを想像してみてください.nav-barはdivラベル間で検索するだけで見つかります.ここで、문제점はnav-barが親ラベルからどのようなスタイルを継承し、サブラベルにどのような影響を及ぼすかを知ることが難しい.私が書いたコードなら、思い出で知ることができますが、隊員たちから見れば、眉をひそめることになります.
divタグではなく、同じ機能を持つタグであれば、その意味を与えますか?💡
<header>
   <h1>HTML5 Header</h1>
</header>
<nav>
   <ul>
      <li><a href="#">Menu -1 </a></li>
      <li><a href="#">Menu -2 </a></li>
      <li><a href="#">Menu -3 </a></li>
   </ul>
</nav>
<section>
  <article>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet</h1>
  </article>
  <article>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </article>
</section>
このようにラベルを見るだけでビューポイントを見るときのレイアウトがわかりますし、どんなスタイルがあるか一目で予測できますし、他の人もコードを簡単に見ることができます.
コラボレーションすると、コードスタイルガイドやコード会議がどれほど重要かを感じることができます.
このコードスタイルと会議は、実際には開発速度と製品性能に直接関連しています.

2.SEOとアクセス性


SEO検索エンジン最適化


適切なタイトルやサブタイトル、詩文ラベルを活用すれば、検索エンジンはスクロール時に必要なNizを見つけて検索するので、強調したい内容を意識的に作る必要がある.

アクセス可能Webアクセス


Webページは視覚的ではなく、視覚障害者のために設計されたスクリーンリーダーです.

3.心理ラベルをよく理解する!



bodyタグ


その名の通り、HTMLタグは彼らの最上端、つまり見たものを最上端から包むタグです.

タイトルタグ


これは、ページにブランドのロゴが表示されたり、ユーザーが使用できるメニューの位置が表示されたり、セッションでタイトルを書きながらレイアウトのラベルを簡単に持ち去ることができます.

navラベル


ページにナビゲーションやメニューなどを書くためのラベル.

プライマリタグ


重要なコンテンツの部分を持つときに使用するラベル.

フッタータグ


必須ではありませんが、最後に添付の内容やリンクの部分を書くときに使うラベルです.

asideラベル


これは、ホームページ内のページ内容に直接関係しない部分に使用するタグです.

アイテムタグ


は、重要なコンテンツを含むラベルです.

sectionタグ


これは一部のラベルで、詳しくは以下の参考文献に残っています!
tableラベルにもsimanticラベルがよく使われています💡
<table>
  <thead>속성을 나타내주는 부분</thead>
  <tbody>값을 나타내주는 부분</tbody>
  <tfoot>테이블의 속성의 따른 값의 합 따위에 결과값</tfoot>
</table>
それ以外に、本当に多くの心理的なラベルが存在しています.みんなが知っている必要はありませんが、もっとよく知っているものを探さなければなりません.
備考:https://webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/