タグ

HTMLに関するmoo_sanのブックマーク (3)

  • 「HTMLでは環境依存文字(①や©など)を文字参照にしなければいけない」という誤解と、本当に置換すべき文字

    HTMLファイルで特殊記号を使う際、① は ①、© は © のように置き換えて書かないといけないものだと思いこんでいないでしょうか。 現代ではそれは誤解です。 UTF-8では特殊記号の文字参照は不要 そもそも環境依存文字とは、データを扱う機種・ソフトウェアなどの違い(文字コードの割り当ての違い)により表示に違いが出てしまう文字のことでした。 例えばShift_JISには © が含まれておらずそもそも保存できなかったり、 ① などの丸数字は含まれているものの、WindowsMac OS(当時)の割り当ての違いにより正しく表示できなかったりしました。[1] しかし現在ではUnicodeによって文字コードは統一化されており、その問題はほとんど起きなくなっています。 近年では多くの場合 UTF-8 でファイルを記述すると思います。 HTMLファイルの文字エンコーディングが

    「HTMLでは環境依存文字(①や©など)を文字参照にしなければいけない」という誤解と、本当に置換すべき文字
  • アクセシビリティを考慮したHTMLコーディングガイド

    これ何なの? もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう!という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの?という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です! 🕹ボタン buttun タグを使いましょう

    アクセシビリティを考慮したHTMLコーディングガイド
  • headタグの中に記述していいHTML要素と記述してはいけないHTML要素

    [レベル: 中級] メタデータ (metadata) に関する技術ドキュメントを Google は検索セントラルサイトに公開しました。 <head> 要素(タグ)内では有効な HTML 要素だけを使用するように注意喚起しています。 head 内で有効な要素 <head> セクションで有効なメタデータとして Google 検索で認識されるのは次の HTML 要素です。 title meta link script style base noscript template head 内で無効な要素 上で挙げた以外の要素を <head> 内に記述してはいけません。 特にありがちなのは次の要素を <head> に追加するケースです。 iframe img 無効な HTML 要素が <head> に存在すると <head> 内のメタデータの読み取りをそこで Google は 終了します。 <head

    headタグの中に記述していいHTML要素と記述してはいけないHTML要素
    moo_san
    moo_san 2022/05/12
  • 1