「Mac Safariの文字コードを変更して文字化けに対処する方法」という記事を見つけて、
こんな文字化けにはブラウザ側で対処できました。
「「表示」メニューより、「テキストエンコーディング」を選び、表示された候補から選びます。
日本語の「Shift_JIS」、「EUC」または、Unicodeの「UTF-8」を選択すれば、大体の文字化けは直ります。」
とのことでした。
実はエディタにはmiを使って、こんなこんな風にhtmlソースをファイルにしていて、試しにsafariで表示させてみたら上の画像の様に文字化けしてしまいました。
下のコードはこの書籍の内容を入力したものです。
miのファイル保存の形式をUTF-8にしたときに文字化けしていることがわかりました。
図のようにShift_JISで保存すればこの文字化けは出ませんでした。
今回の場合、Safariで表示の時の文字コードの設定を「UTF-8」に切り替えれば、
この様に文字化けなく表示できました。
「文字コードを簡単に変更する方法（Mac・Windows）」という記事があり、miエディタを紹介していました。
すっかりPCも便利になったと思っていたのに、未だに「文字コード」に悩まされる場面があるのだと、ある意味驚きました。
なお、この書籍ではMacの場合は標準の「テキストエディット」をエディタとして利用している様です。
ただし、確認したのは
のバージョンだけですが、
拡張子に「html」を付けたファイルは、自動ではHTMLをブラウザで開いた時と同様の表示になる様で、
「環境設定」で「HTMLファイルを、フォーマットしたテキストではなくHTMLコードと表示」にチェックを入れること。
編集テキストファイルのエンコーディングを「自動」ではなく開く時、保存したい時に使いたいファイルの形式に合わせる必要がある様です。
#追記(2021/03/05)
「テキストエディット」のこの方法ではうまくうまくいかないようで、miエディタで文字コードを変更して保存するか、表示をさせるブラウザの方で対応するしかなさそうです。
#追記(2021/03/05)
確認するとSafariの環境設定のデフォルトエンコーディングは日本語(Shift JIS)になっていました。
これがおそらく表示がうまくできなかった原因です。
#追記(2021/03/05)
Apple公式の資料がありました。
「MacのSafariで「詳細」環境設定を変更する」というものなのですが、「デフォルトのエンコーディング」に関しては、「よく表示するWebページの言語に適したエンコーディングを使用してください。このオプションは、Webページが文字化けしている場合に便利です。」とありました。