HTML 5およびSemantic Webの場合


HTML 5とは?


html 5の誕生


html 5は2014年10月28日に次世代ウェブ規格に決定した.
バージョンには7つの機能が追加されました

  • マルチメディア
    フラッシュメモリなどのプラグインの支援を必要とせず、ビデオやオーディオ機能を独自にサポートします.

  • ビデオカード
    キャンバスを使用した2 DグラフィックスとCS 3、WebGLを使用した3 Dグラフィックスをサポートします.
  • (WebGL:JavaScriptプログラミング言語で提供され、互換性のあるWebブラウザでインタラクティブな3 Dグラフィックを使用できるベースのグラフィックライブラリ.)
  • 通信
    html 5はサーバとのソケット通信をサポートするため、サーバと双方向通信を行うことができる.
  • デバイスアクセス
    カメラや動作センサなどのハードウェア機能を直接制御できます.
  • オフラインおよびリポジトリ
    オフラインでもアプリケーションを起動できます.
  • システムラベル
    HTML要素の意味を明確に説明する記号タグを導入することで,検索エンジンを最適化し,開発者も検索エンジンも内容の意味を明確に説明できるようにした.
  • CSS3
    html 5はCSS 3を完全にサポートしています.
  • HTML 5の構造


    HTML 5ドキュメントはDOCTYPE htmlで始まり、ドキュメント形式をHTML 5として指定します.
    HTMLドキュメントは.htmlを持つ簡単なスタックファイル.
    つまり、手帳としても使えます.
    しかし、手帳の効率が低すぎるため、editorやIDEを使うのが便利です.

    HTML+CS+Javascript Web規格からインポート
    次にhtml/head/bodyです.
    html
    Webブラウザは、Webドキュメントの開始と終了を示すタグです.
    <html>을 만나면 </html>까지의 소스를 읽어 화면에 표시한다.
    head
    WebブラウザがWebドキュメントを解析するために必要な情報を記録する場所です.
    ドキュメントのタイトル、メタデータ、および外部ファイルの参照が含まれます.
    これらの情報はブラウザでは表示されません.
    metaラベル
    メタタグとは、本の価格、ページ数、著者などの本に関する情報を記録することである.
    メタタグで最も重要なのは
    画面に文字を表示するときによく使われるコードを指定します.
    <meta charset="UTF-8">를 지정하지 않는 다면 화면에서 한글이 깨질 수도 있다.
    その後、メタタグを使用して、Webサイトのキーワード、簡単な説明、著者などの情報を指定できます.
    これらは検索エンジンの検索サイトの参考になります.
    body
    実際には、Webブラウザの一部として、ブラウザに出力されるすべての部分がここで作成されます.

    HTMLのデフォルト構文


    要素

    <p> html 요소</p>
    これは、開始タグと終了タグからなる要素です.
    ラベルは大文字と小文字を区別しませんが、W 3 CはHTML 4に小文字を使うことをお勧めしますので、HTML 5にも小文字を使うことをお勧めします.

    空の要素


    contentを持つことができない要素を空の要素と呼びます.
    空の要素にはコンテンツは使用できません.プロパティのみ使用できます.
    br
    hr
    img
    input
    link
    meta

    属性(Attribute)


    属性は要素の性質と特徴を定義します.要素には属性があります.
    プロパティは、要素の追加情報を提供します.プロパティは開始タグにあり、名前と値がペアになっている必要があります.
    <img src="index.html">
    srcは画像ファイルのアドレスを表します.

    グローバル属性(Attribute)


    グローバル・プロパティは、すべてのタグで使用できるプロパティです.一部のプロパティは機能しない場合がありますが、通常は使用できます.
    id:一意の識別子要素を指定します.繰り返し不可
    class:スタイルシートで定義されたclassを指定します.繰り返し可能
    hidden:CSSのhiddenとは異なり、ブラウザには露出しません.
    lang:言語を指定するときに使用します.検索エンジンがスクロールすると、Webページで言語を認識できます.
    スタイル:スタイルを指定します.
    tabinbox:ユーザーがキーボードナビゲーションを使用する場合(移動時)の移動順序を指定します.
    title:要素のタイトルを指定します.

    Semantic Web


    Semanticとは、その言葉を意味的に見たとき、私たちはすぐにその意味を知ることができることを意味します.
    Semantic Webはその言葉のように意味のあるWebであり、これを理解するためにはサイトの目的を知る必要があります.

    サイトの目的


    サイトの目的は簡単です.
    自分を含めた他の人にホームページを見せることです.
    私たちの多くはグーグルやNAVERで検索して、欲しい情報を含むページを探しています.
    この検索を支援するプロセスは検索エンジンであり,Semantic Webを作成する理由も検索エンジンがウェブサイトをより容易に検索できるようにするためである.
    さらに、開発者が所望の要素の意味を明確に表現し、コードの可読性を向上させ、メンテナンスを支援することもできます.
    Semantic Webはウェブメタデータを付与し,もともと複雑なデータセットであったウェブページに「意味」と「相関」を付与する.

    Semanticタグが必要

  • シンボルを使用するため、ユーザーはWebページでソースコードを表示するだけで、どの部分がタイトルで、どの部分が本文の内容なのかを知ることができます.

  • ドキュメント構造の区分が正確であるため,Webドキュメントを様々な機器で容易に表現できる.

  • サイトを検索すると、必要なコンテンツを正確に見つけることができます.

  • *ソース(https://poiemaweb.com/html5-semantic-web)
    すなわち
    Semantic WebタグとSemanticタグは、ブラウザ、検索エンジン、開発者にコンテンツの意味を明確に伝えることができます.