TIL

【HTML practice note_01】

Ad Banner

ボタンラベルではなくaラベルを使用するのはなぜですか?
🅰 寸法で最も重要なのは「どんな顔をしているか」ではなく、「どんな役割を果たしているか」です.ボタンのような顔をしていても、「別のページに移動」をすると、ボタンの前にanchorと表記してから、「意味的には正しい(=意味的に)」ことができるからです.
Browserはbuttonが「ボタン」にすぎず、アンカーポイントが「他のページに移動する際に使用される要素群」であることに気づいた.

Google Search Result Item

タイトルを表すh 1ラベルにページを移動するリンクロールがある場合は、h 1ラベルにアンカーラベルを含めることができます.
ブラウザが非タグテキストを使用するときに混同されないように、ペン記号ではなくescape code(entities)を使用します.
Escapeコードを使うのは意味のためというよりブラウザのためです.
実際、$、<、>などを使うだけなら、普通は問題ありません.しかし、これも古いブラウザの場合、htmlをレンダリングするときに上の記号によって誤ったレンダリングを避けることがある理由です.
●『のescape code in』(終了記号)lt;より小さい(不等号左を準小とする)
●>のescapeコード「(終了記号)gt;」より大きい(不等号左を基準)
htmlエンティティリストリファレンスサイト
各種htmlエンティティリファレンスサイト
1)機能上の役割
2)情報内容の意味

Feature Box

imgタグの属性値のうちaltの属性値の内容が1つもない場合、画像情報にあまり意味がない場合でも、値を空白にして属性を明記する必要があります.😲
つまり、imgラベルにはsrc、alt attributeを記入しなければなりません!✨

<img src="https://~~" alt="" />

提供する情報に画像が情報としてあまり価値や重要性がない場合は、imgタグではなくdivタグにclassを追加し、cssを使用して「background-image」に装飾します.
(imgタグを無効にしてブラウザのレンダリングを減らす)

// html
<div class="feature-box no-image">
  <!-- <img src="" alt"" /> -->
</div>

// css
/* For feature box without image */
.feature-box.no-image {
  background-image: url("https://~~.com");
}

HTMLでimgタグを使用:この画像は情報コンテンツとして価値があります!

CSSを使用した背景画像:装飾用のみ!

他のCSSセレクタ(セレクタ)
HTMLで1つのラベルに2つのclassを指定した場合、CSSで選択プログラムを作成する方法が異なります
class名間の区切り部分には有効なコードの意味があります.

<div class="feature-box no-image">
<!-- class로 feature-box와 no-image를 주기 위해선 둘 사이에 공백이 필요함 -->
</div>

.feature-box.no-image  {
  /*feature-box클래스와 no-image클래스 모두 가지고 있는 요소*/
}
.feature-box .no-image  {
  /*feature-box클래스의 자식중에 no-image 클래스를 가진 모든 요소*/
}

Logo in Header

☪県のウェブサイトを代表するロゴはタイトルの役割を果たしているが、画像ファイルの形式で構成されているのに、なぜimgタグをh 1タグにバインドしなければならないのだろうか.
🅰 まずページ自体の完全なタイトルの役割であり、ナビゲーション中のタイトルの役割でもあるので、h 1ラベルを使用します.
⑪h 1を使う意味上の理由があると思います.h 1がなければimgだけがタイトルの役割を果たしているとは思えない.
ただし、タイトルがテキストではなく画像であれば、「情報内容で意味があるかどうかを測るときに価値がある」としてimgタグを使用します.(つまりcss処理を使用しない)

<h1>
  <!-- Text --> // Text를 생략하고
  // h1 태그를 보고 (이미지로 된)제목은 alt의 속성값(Home)을 의미함을 파악할 수 있다
  <img src="./images/home.png" alt="Home" />
</h1>

👨‍🏫Ahha~新しい知り合いのポイント!😆
個別のテキストと(テキストの内容と同じ画像を含む)imgタグにaltを書き込む必要がある場合は、テキストを省略してimgタグのalt属性のみを作成できます!
(テキストがある場合は、画像を隠すために追加のcss処理が必要になります.これは面倒です.)
テキストを使用する必要はなく、altを記述するだけで、画像が見えない場合やスクリーンリーダーを使用する場合に情報を提供することができます.

Breadcrumb & Pagination

Breadcrumb:キーワードを並べてリストするリンク形式(サイト移動パス)

iconはリンクの役割を果たさず,情報値として何の意味もないためmarkupは必要ない.
iconと区切り記号である「/」はスタイル要素であるためhtmlではなくcssで処理できます.
どのようにして意味、構造に基づいてmarkupを行うことができるかを考えてみましょう!✨
Pagination:数値をリストしてページを移動するリンク形式.

リンク形式であっても、ol、liタグを使用して並列順序の重要なリストを作成します.
誤ったNope❗aタグでリストをグループ化すると、シリアル番号がリンクになるので、リストに入る必要があります!
ロールがリンクされていない場合は、aラベルではなくbuttonラベルを使用して作成します.
buttonラベルでは、disabled attributeを使用して非アクティブ状態を表すことができます.(aラベルのフォーム要素は使用できません./input、button、textareaなど)
他のCSSセレクタ(セレクタ)

/* .pagination 안의 자식요소들 중에 disabled 속성을 가진 모든 자식요소들 */
.pagination *[disabled] {}
/* .pagination 안의 자식요소들 중 .disabled를 가진 모든 자식요소들 */
.pagination .disabled {}

👨‍🏫Ahha~新しい知り合いのポイント!😆
Webアクセス性の開始-アクセス可能なリッチインターネットアプリケーション:Webページ(特にダイナミックコンテンツ、Ajax、HTML、JavaScript、および関連技術開発のユーザーインタフェースコンポーネントのアクセス性を増加させる方法に関する技術仕様.
Webのアクセス性を向上させるAPIは、インターネットユーザーがアクセスしやすいようにします.aria-label属性はスクリーンリーダーユーザが属性値を読み出し、明確に情報を伝達することができる!とても役に立ちますx 3😍
これは,我々が見えない場合にブラウザに良い情報を伝えたり,スクリーンリーダーを介してWebを利用するユーザに伝達すべき情報を提供したい場合に用いる属性である.
class、idなどの「Global attributes」は、任意のタグで使用できます.

// Screen reader는 'Previous'라고만 읽게 되어 정확히 무엇을 의미하는지 알기 어렵다.
<a href="#">
  Previous
</a>

// Screen reader는 "Go to the previous page."를 읽게 되어 정확한 의미 파악이 가능하다.
<a href="#" aria-label="Go to the previous page.">
  Previous
</a>

これらの機能はFront-End開発者にとって非常に重要です.
これはブラウザの使い方についての経験です.
一般ユーザーでも体調不良のユーザーでも、Webを使いやすくすることを常に考えておくべきです.👍