[TIL] HTML_Text-level Semantics
テキストを使用するときに使用するラベルは次のとおりです.
テキストレベルは、使用するコンテンツ領域と同じ大きさのみです.
MDNブラウザの互換性の確認
w3s
caniuse
mdnの方が正確!
📌 <br> , <wbr>
テキストレベルは、使用するコンテンツ領域と同じ大きさのみです.
MDNブラウザの互換性の確認
w3s
caniuse
mdnの方が正確!
📌 <br> , <wbr> <br>
:改行用タグ
📌 <a href=「パス」>
:リンク(ハイパーテキスト)を作成します.<a>
のアンカーに移動するページの住所を書くことができます.
アンカータグはsections、group content要素のサブアイテムであってもよい.
ただし、アンカー要素をアンカーラベルに配置することはできません.また、<button>
などのユーザーとインタラクティブな要素をサブ要素として配置することはできません.
<>テキスト<>を付けないとクリックできないので、書きます.# 현재 탭에서 창 열기
<a href="https://www.naver.com">click</a>
# 새로운 창을 열어서 페이지 열기
<a href="https://www.naver.com" target="_blank">click</a>
# index.html로 이동
<a href="./index.html">click</a>
# 다른페이지로의 이동이 아닌, 해당 html 페이지 안에서의 이동!
# ex. 목차로 이동하기
<a href="#three">click</a> <!-- 해쉬 링크 -->
# index.html 다운로드 기능
<a href="./index.html" download>click</a>
# hwp 열기
<a href="./hello.hwp">hwp click</a>
# hwp 오픈 후 지정된 파일 이름(a.hwp)으로 저장
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
# pdf 열기
<a href="./hello.pdf">pdf click</a>
# pdf 열고 지정된 파일 이름으로 저장
<a href="./hello.pdf" download="a.pdf">pdf download click</a>
ちなみに、ダウンロード機能はグラフィックでは機能しません.
📌 <b> , <strong> <b>
(bold):太字表示用!<strong>
:太字+ハイライト表示
デザイン上の違いはありませんが、重要度の意味は違います.
📌 <i> , <em> <i>
(斜体):斜体フォント用!
html 5の後に意味があります.専門用語、主要言語とその他の言語で表現される場合(ex.主要言語はハングルですが、英語で表現される)、小説の登場人物の考え方は、主要言語と区別すべき部分を表現するためです.<em>
:ティルトフォント+ハイライト表示
📌 <dfn> <dfn>
:現在のコンテキストで定義されている用語を表すタグ
dfnタグが<p>
タグ内にある場合、または<dt><dd>
対、<section>
要素である場合、その内容はdfn定義の説明と見なされる.
最初にドキュメントが表示されたときに主に使用します.ページに一度だけ!
📌 <abbr> <abbr>
:略語、略語の説明または意味を表すために使用される
マウスを離すと表示されます!
📌 <sup> , <sub> <sup>
:上付き
下付き文字
主に化学記号、数学式などの句読点を表現するのに用いられる.
小さい字のために使うことができません!
📌 <sub> <span>
:改行せずに領域をグループ化するための(グループ化のための)
(div(元素を縛るための)ラベルのように、意味もなく、縛るための、本当に最後の手段です!)
IDまたはクラスを使用して複数の要素を制御します....중략...
<style>
#명언 {
color:red;
}
</style>
...중략...
<p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>
Reference
この問題について([TIL] HTML_Text-level Semantics), 我々は、より多くの情報をここで見つけました
https://velog.io/@dayhun/TIL-Text-level-semantics
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
:リンク(ハイパーテキスト)を作成します.
<a>
のアンカーに移動するページの住所を書くことができます.アンカータグはsections、group content要素のサブアイテムであってもよい.
ただし、アンカー要素をアンカーラベルに配置することはできません.また、
<button>
などのユーザーとインタラクティブな要素をサブ要素として配置することはできません.<>テキスト<>を付けないとクリックできないので、書きます.
# 현재 탭에서 창 열기
<a href="https://www.naver.com">click</a>
# 새로운 창을 열어서 페이지 열기
<a href="https://www.naver.com" target="_blank">click</a>
# index.html로 이동
<a href="./index.html">click</a>
# 다른페이지로의 이동이 아닌, 해당 html 페이지 안에서의 이동!
# ex. 목차로 이동하기
<a href="#three">click</a> <!-- 해쉬 링크 -->
# index.html 다운로드 기능
<a href="./index.html" download>click</a>
# hwp 열기
<a href="./hello.hwp">hwp click</a>
# hwp 오픈 후 지정된 파일 이름(a.hwp)으로 저장
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
# pdf 열기
<a href="./hello.pdf">pdf click</a>
# pdf 열고 지정된 파일 이름으로 저장
<a href="./hello.pdf" download="a.pdf">pdf download click</a>
ちなみに、ダウンロード機能はグラフィックでは機能しません.📌 <b> , <strong> <b>
(bold):太字表示用!<strong>
:太字+ハイライト表示
デザイン上の違いはありませんが、重要度の意味は違います.
📌 <i> , <em> <i>
(斜体):斜体フォント用!
html 5の後に意味があります.専門用語、主要言語とその他の言語で表現される場合(ex.主要言語はハングルですが、英語で表現される)、小説の登場人物の考え方は、主要言語と区別すべき部分を表現するためです.<em>
:ティルトフォント+ハイライト表示
📌 <dfn> <dfn>
:現在のコンテキストで定義されている用語を表すタグ
dfnタグが<p>
タグ内にある場合、または<dt><dd>
対、<section>
要素である場合、その内容はdfn定義の説明と見なされる.
最初にドキュメントが表示されたときに主に使用します.ページに一度だけ!
📌 <abbr> <abbr>
:略語、略語の説明または意味を表すために使用される
マウスを離すと表示されます!
📌 <sup> , <sub> <sup>
:上付き
下付き文字
主に化学記号、数学式などの句読点を表現するのに用いられる.
小さい字のために使うことができません!
📌 <sub> <span>
:改行せずに領域をグループ化するための(グループ化のための)
(div(元素を縛るための)ラベルのように、意味もなく、縛るための、本当に最後の手段です!)
IDまたはクラスを使用して複数の要素を制御します....중략...
<style>
#명언 {
color:red;
}
</style>
...중략...
<p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>
Reference
この問題について([TIL] HTML_Text-level Semantics), 我々は、より多くの情報をここで見つけました
https://velog.io/@dayhun/TIL-Text-level-semantics
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<i>
(斜体):斜体フォント用!html 5の後に意味があります.専門用語、主要言語とその他の言語で表現される場合(ex.主要言語はハングルですが、英語で表現される)、小説の登場人物の考え方は、主要言語と区別すべき部分を表現するためです.
<em>
:ティルトフォント+ハイライト表示📌 <dfn> <dfn>
:現在のコンテキストで定義されている用語を表すタグ
dfnタグが<p>
タグ内にある場合、または<dt><dd>
対、<section>
要素である場合、その内容はdfn定義の説明と見なされる.
最初にドキュメントが表示されたときに主に使用します.ページに一度だけ!
📌 <abbr> <abbr>
:略語、略語の説明または意味を表すために使用される
マウスを離すと表示されます!
📌 <sup> , <sub> <sup>
:上付き
下付き文字
主に化学記号、数学式などの句読点を表現するのに用いられる.
小さい字のために使うことができません!
📌 <sub> <span>
:改行せずに領域をグループ化するための(グループ化のための)
(div(元素を縛るための)ラベルのように、意味もなく、縛るための、本当に最後の手段です!)
IDまたはクラスを使用して複数の要素を制御します....중략...
<style>
#명언 {
color:red;
}
</style>
...중략...
<p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>
Reference
この問題について([TIL] HTML_Text-level Semantics), 我々は、より多くの情報をここで見つけました
https://velog.io/@dayhun/TIL-Text-level-semantics
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<abbr>
:略語、略語の説明または意味を表すために使用されるマウスを離すと表示されます!
📌 <sup> , <sub> <sup>
:上付き
下付き文字
主に化学記号、数学式などの句読点を表現するのに用いられる.
小さい字のために使うことができません!
📌 <sub> <span>
:改行せずに領域をグループ化するための(グループ化のための)
(div(元素を縛るための)ラベルのように、意味もなく、縛るための、本当に最後の手段です!)
IDまたはクラスを使用して複数の要素を制御します....중략...
<style>
#명언 {
color:red;
}
</style>
...중략...
<p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>
Reference
この問題について([TIL] HTML_Text-level Semantics), 我々は、より多くの情報をここで見つけました
https://velog.io/@dayhun/TIL-Text-level-semantics
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<span>
:改行せずに領域をグループ化するための(グループ化のための)(div(元素を縛るための)ラベルのように、意味もなく、縛るための、本当に最後の手段です!)
IDまたはクラスを使用して複数の要素を制御します.
...중략...
<style>
#명언 {
color:red;
}
</style>
...중략...
<p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>
Reference
この問題について([TIL] HTML_Text-level Semantics), 我々は、より多くの情報をここで見つけました https://velog.io/@dayhun/TIL-Text-level-semanticsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol