[Replit] Sementic Web, Semantic Tags

7678 ワード
CSS html テキストリンク

Sementic


:意味的、意味論的

Sementic Web!


Web上に存在する多くのウェブメタデータを付与し,本来複雑なデータセットであるウェブページを意味と相関を持つ膨大なデータベースに構築する考え方.Sementic Tag誕生

.non-semantic


要素で説明しない
(div、spanなど)

.semantic


要素の意味を明らかにする
(form、table、img、header、nav、aside、section、article、footerなど)

・意味Web構造



Sementic Tags


長所

  • SEO
  • 検索エンジンの最適化に役立ちます.
    navラベルを使用すると、検索エンジンbotはすぐにナビゲーションメニュー領域であると判断できます.

  • Webアクセス性
    一般的なブラウザでは差はありませんが、スクリーンリーダー(視覚障害者向けのネットサーフィンプログラム)などのプログラムを使用すると、可用性が大きく異なる可能性があります.

  • メンテナンス
    divを盲目的に使用すると管理が困難になります.シンボルタグを使用している場合は、タグ名を表示するだけでどの領域であるかを知ることができ、シンボルタグの名前を表示し、そのタグに基づいて操作することができます.

    • .non-sementicとsementicの違い


    ex) non-sementic
    <!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        width: 600px;
        height: 600px;
       
      }
      .a {
        background-image: url( "이미지주소" );
      }
    </style>
  </head>
  <body>
    <div class="a">
    </div>
  </body>
</html>
    ex) sementic
    <!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      img {
        width: 600px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <img src="이미지 주소">
  </body>
</html>
    [Leetcod] 120. Triangle
    file_operations構造