HTML semantic tag

13473 ワード

semantic HTML Tag html テキストリンク

semantic tagとhtml tagを整理しました.<気圧に注意>

セマンティックタグ(semantic tag):ドキュメント内の情報をよりよく表現するために使用される意味のあるタグ。

Semantic tag?

意味のあるタグを使用して、開発者とブラウザに意味を理解させます.
開発者にとって、コードをより速く表示し、構造を理解することができます.
ブラウザは、検索エンジンのより正確な検索を支援します.

意味なし:tagには意味がありません。

div

span

など...

意味:tagの意味が明確です。

form, table, article

header, nav, footer

section, article, aside

main, figure, mark, summary, details ...

<!-- 예시 -->
<html> 
  <head> 
    <title>문서 제목</title>
    <meta> 
  </head>
  <body> 
    <header> 
      	<h1>안녕하세요!</h1> 
    </header>
    <section> 
      <nav> 
        <ol> 
          <li>홈으로 이동</li> 
          <li>메뉴로 이동</li>
       	</ol>
      </nav>
      <main> 
        <article> 
          <h2>주요 내용...</h2>
				</article>
				<article>
		      <h2>주요 내용...2</h2>
				</article>
      </main>
      <aside></aside> 
    </section>
    <footer> 
      <ul>
        <li>작성자 : 000</li>
        <li>저작권 ...</li>
      </ul>
    </footer>
  </body>
</html>

タグの定義

しゅこん

html

ルート要素

メタデータ

head

メタデータが含まれます.タイトル、スクリプト、スタイルシートなど

title

ブラウザのタイトルバーまたはページタブに表示されるドキュメントのタイトル.

base

基本urlを指定します.ドキュメントには1つしか存在しません.

link

外部リソースの接続

style

現在のドキュメントのスタイルについて

ゾーンルート

body

ドキュメントには1つしか存在しません.htmlの内容を表します.

コンテンツ領域

address

連絡先情報の領域

article

サイトから独立した領域.再利用可能な領域.

aside

ドキュメントの主な内容に間接的に関連する部分.横書き内容

footer

bodyまたはsectionのツイッター領域.著者、著作権情報などを含む.

header

ページタイトル、フラグ、検索フォーム、ナビゲーションなど.

h1~h6

領域のタイトルを表します.

hgroup

h 1〜h 6要素をグループ化するために使用される.

main

bodyの主な内容を表します.

nav

ナビゲーションを表します.メニューが含まれています.

section

独立した領域を表す.

article vs section vs div

article:ドキュメントから独立したコンテンツとして存在します.ブログ、掲示板等

部:関連要素を分離する場合.タイトルとコンテンツ、ディレクトリとコンテンツなど

div:無意味な領域分割.シンプルな造形目的.

テキスト

blockquote

長い引用文.

div

意味のないコンテナ.コンテンツ領域を表示するタグが無効な場合にのみ使用します.

dl

説明リスト.用語(dt)および説明(dd)を隠すために使用される.

dt

説明したい用語

dd

用語説明

figure

画像、イラスト、グラフ、コードセグメントなどのコンテナロール.

figcaption

図要素の説明

hr

ゾーン分離ロール.横線で表現する.

ol

ソートされたリストタグ.普通の数字で表す.

ul

ソートされていないリストタグ.弱火で表現する.

li

ol,ulラベルのリストラベル

p

1つの段落.ブロックレベル要素.

pre

htmlで作成したコンテンツに従って表現されるロール.空白文字をそのまま表示します.

行内テキスト

a

アンカーマーク.ハイパーリンクを作成します.

abbr(abbreviation)

略語.

b

太字

bdi

周囲のテキストの書く方向とは異なるテキスト領域を定義します.

bdo

サブエレメントのテキスト方向性を定義する

br

折り返し

cite

作品の出典マーク.タイトルを含める必要があります

code

短いコード表現.

data

機械読み取り可能なデータ処理値.

dfn

用語定義を表す.親要素には、用語の定義または説明が含まれます.

em

斜体強調表示されたテキスト

i

斜体技術用語、外国語文、人物の考え方などに用いられる.

kbd

任意のデバイス(キーボード入力、音声入力など)を用いたユーザ入力を表す.

mark

テキストをハイライトします.

q

短い引用文.

ruby

ルビーコメント.ルビー注釈は東アジア文字の発音を表記するために用いられる.

rb

ルビー注記を適用する文字を区切る

rp

ルビー注記がサポートされていないカッコを指定するには

rt

発音または翻訳を表すテキスト部分

rtc

<rb>要素で表される文字の意味を表す注釈.

s

線の削除

samp

コンピュータプログラム出力例

small

テキスト

span

行内要素

strong

太字表現.重要または緊急の表示

sub

下付き文字の配置

sup

上付き文字の配置

time

日付と時刻を機械読み取り可能に表す

u css(text-chentication:下線)として推奨

下線を引く

var

数式またはプログラミングの変数の名前

wbr

現在の要素の改行規則は無視され、ブラウザが改行できる場所を示します.

画像とマルチメディア

area

「イメージマッピング」(image-map)で、ハイパーリンクをリンクする領域を定義します.map要素でのみ使用

audio

音声の内容

img

画像の内容

map

イメージマップの定義(クリック可能なリンク領域)

track

audio,videoのサブエレメント.時間字幕等の字幕情報の指定に使用

video

ビデオ再生をサポートするメディアプレーヤーをドキュメントに挿入

組み込みコンテンツ

embed

img、オーディオ、ビデオなどの他のメディア要素がサポートされていないメディアを含める場合に使用します.メディアファイルに一致するタグの使用を推奨
html 5で使用します.html 4はサポートされていません.

iframe

htmlに他のページを挿入します.使用時にパフォーマンスの問題を確認する必要があります.

object

複数のマルチメディア(オーディオ、ビデオ、Javaウィジェット、Active X、Flashなど)をWebページに挿入し、Webページ自体を他のHTMLドキュメントに挿入できます.
html 4で使用します.html 5にはサポートされていないプロパティがたくさんあります.

param

objectラベルの呼び出しプラグインのパラメータを定義する

picture

imgタグの複数の画像リソースのコンテナを定義する
0個以上のsourceラベルと1つのimgラベルからなる.

source

画像、オーディオ、ビデオラベル内で使用します.
複数のメディアソースを定義します.

スクリプト#スクリプト#

canvas

グラフィックとアニメーションの描画に使用します.
スクリプトによる描画アクションの実装

noscript

ブラウザがスクリプトを無効にするとhtmlが表示されます

script

スクリプトの定義

変更を表示

del

テキストの範囲を削除

ins

テキストの範囲を追加

表の内容

caption

表の説明または見出し

col

表の列要素

colgroup

表の列要素

table

表要素

tbody

表本文コンポーネント

td

表のセル要素

tfoot

表のネスト要素

th

theadラベルで使用されるセル要素

thead

表ヘッダーの要素

tr

表の行要素

棚

button

ボタン要素

datalist

Input要素でlistを使用するときにoptionラベルを含む要素

fieldset

フォームタグの要素を組み合わせた要素.組み合わせた要素の周囲にボックス線を描きます.

form

フォーム要素のコミット

input

入力タイプと制御コンポーネントの要素が複数存在します.

label

説明要素

legend

fieldsetタグの説明を表す要素

meter

ゲージは要素を表します.たとえば、ディスクの使用率です.
進捗は進捗要素を使用します.

optgroup

optionラベルをバンドルする要素

option

select、optgroup、datalistタグに使用します.
リスト内のアイテムを表す要素

output

結果要素

progress

タスクの完了度を表す要素.進捗フラグに使用します.

select

オプションメニューのドロップダウンリスト要素を指定

textarea

複数行テキスト編集要素

インタラクティブタグ

details

ユーザーが折りたたみまたは展開できるコンポーネント要素

dialog

ポップアップ要素

summary

detailsラベルに表示されるヘッダー要素
リファレンス

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

https://developer.mozilla.org/ko/docs/Web/HTML/Element

http://www.tcpschool.com/html-tags/intro

Reference

この問題について(HTML semantic tag), 我々は、より多くの情報をここで見つけました https://velog.io/@sss5793/HTML-semantic-tag

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

CentOS 7共通ファイル管理コマンド

s 3配置自動化時npm ERR!Missing script:「build」エラー