TIL 12 | Semantic Web, Semantic Tag

https://www.w3schools.com/html/html5_semantic_elements.asp

Semantic Web

機械は人の代わりにウェブページの情報を理解し、必要な情報や加工情報だけを私たちに表示し、私たちが必要とする形で加工します.

使用理由

<div id="nav"></div>
<!--<div>tag로 표현하는 navigation-->
<nav></nav>
<!--<nav>tag만으로 navigation을 나타낸다-->

意味tagを用いてWebドキュメントを比較的簡単に表現でき,直感的にtagが何を表しているか(意図と意味)が一目でわかる.

Semantic Tag

<header>Webドキュメントのタイトルを定義します.ページ全体のタイトルまたは一部のタイトルの定義に使用

<footer>Webドキュメントのフッターを定義します.ページ全体のフッターまたは一部のフッターの定義に使用

<section>辞書の意味によって、Webドキュメントの一部、章を区別するために使用されます.
ドキュメント内の領域の範囲を限定し、ドキュメントの輪郭を構成する

<article>ドキュメント内の独立したコンテンツを区別するために使用されます.
ニュースエントリ、ブログ本文などの独立した領域を指定します.

<nav>ドキュメント全体または一部を表すナビゲーション領域.
Webブラウズリンクとして機能するコンテナ

<aside>ドキュメントの主な内容とは独立した領域を定義します.
広告ブロックなど、周囲のコンテンツとは異なる領域を指定します.

<hgroup>ドキュメントのタイトルをグループ化します.例えば、見出しと副題が同時に存在する文書については、<h1>要素と<h2>要素で見出し・副題を定義することができ、これらの見出しは<hgroup>に分類される.複数のタイトルを組み合わせて1つのタイトルとして扱うことができます

<address>文書の作成者への連絡情報などの付加情報を表す

<time>ドキュメントの作成時間、公開時間の指定に使用

<blockquote>ドキュメント内の参照セクションの定義

出所https://m.mkexdev.net/77

Question 🤪

サイトに画像を入れるには2つの方法があります.

<img>ラベル使用

<div>タグに背景を付ける-画像属性

「2つの方法の違いと、どのような場合に使用するかを説明してください.」
HTMLタグを使用します.
1.検索エンジンのインデックスを可能にする
2.altプロパティとtitleプロパティを使用して、追加情報を追加できます.
CSS経由
1.クラスを指定して、共通の部分を一度に変更できます.
2.JSではなくCSSだけで動画を柔軟に適用