Semantic?第1章


htmlのいろいろなことを知っていると出てくるこの言葉
「意味のあるレイアウトは非常に重要です」
だからどうして.どうしてそんなに重要なの?答えを見に行こう

Semanticって何?


NAVER英語辞典によると、意味には意味があり、意味論の意味がある.
英語を見ればわかりますが、このように見るともっと混同されます.

Semantic Element, Semantic Tag


HTML 4からHTML 5に移行する段階では、「意味」という言葉が非常に重要になります.
これは、検索エンジンで単語や写真などを探していると、これらのラベルを分析し、検索結果として露出するためです.
w3Schoolでは、開発者およびブラウザにその意味を明確に伝える要素をsemantic要素として表す.
A semantic element clearly describes its meaning to both the browser and the developer.
たとえば、htmlを作成してフォーラムの文章をwebに公開しているとします.
<div></div>

<p></p>

<article></article>
私たちには3つの選択肢があります.(もちろん、それ以外にも選択肢はたくさんあります.例のために3つだけ選びました)
一番上から意味があるかどうか話します.実際、このように意味を理解し理解するのは、本宣科よりずっと簡単です.

  • divラベル
    divラベルはdivisという意味で、縛られています!そう教えてくれたラベルです.もちろん、divラベルを使用して、私たちのフォーラムの文章をバンドルされたブロックと見なすことができます.使っても大丈夫ですし、ネットでもよく見えます.でも….もったいない気がするもっと良い表現はありますか?

  • Pタグ
    pタグには、段落の意味、「段落または段落」の意味があります.文章は文章で、段落で、このラベルを書くことができます.もちろん、divのように、ネット上でもよく表示されるので、異常はありません.でも….私たちはもっと良いラベルを持っています.

  • アイテムタグ
    これが文章のラベルです.articleタグは文字通り(新聞の)文章など、フォーラムの文章をネット上に送りたいのですが、とても適切なタグです.tagで意味がよく伝わり、webでもこのラベルで包装された内容がarticle要素であることが認識されます.
  • このような多様なラベルの中で、最も各コンテンツ要素が何であるかを体現し、Web上によりよく表示するために、適切な場所で各ラベルを使用し、意味ラベルなどを使用することができる.そうですね.意味要素、意味tagはもう理解しました.
    もう一つ例を挙げる.

    最近ヒットした御夢語というゲームの紹介ページを作成するために、上記の画像を持ってきました.
    画像をWebにアップロードする方法は大きく2つあります.1つ目はimgタグを使用し、2つ目はbackground-imageを使用して画像を挿入します.
    上のように、一つ一つじっくり考えてみます.
    このイメージを背景ではなくイメージとしてその意味を伝えたい.
    検索エンジンが「A夢の星写真」と入力すると、上の写真が出てきて、私のブログの文章が露出されることを望んでいます.

  • imgタグを使用して画像を挿入します.
    imgは画像の略で、エンジンにこれが画像であることを教えます.
    もちろん、検索結果として写真が露出する確率は非常に高い.

  • background-イメージを使用して画像を入れます.
    div,pタグなどの複数のブロックタグの内部に画像を背景として挿入することで,領域の大きさや空間を保護することができる.でも….検索エンジンはこれが写真であることを認識しません.div pタグには、写真の意味ではなく、領域、段落の意味があるからです.
  • だから重要だ!


    このように、Web検索エンジンやWeb上で使用するタグを通じて、私の内容がどのような意味を持っているかを知ることができます.そのため、意味タグ、要素を使ってhtmlを書くことが重要です.△英語では「機械が読める」というのは、Webから検索できるという意味です.では.次の質問に到達します.だからSemanticWebは何ですか?

    Semantic Web…次の文章で説明します.眉を顰める.一度に多くのことを理解しようとすると、もっと難しくなります.あ….☆