HTMLってプログラミングではないけれど、しっかりとしたホームページを作るには、ちゃんとした構造体を作らないといけません。
しっかりとした、ちゃんとした・・・こんなあやふやな事を言われても、なんだかピンと来ないので、一体どういうモノが良いのか、
どうなると悪い状態なのかを考えてみたいと思います。
古いHTMLと新しいHTML
古いHTMLは多くの場合、カオス状態となってしまったHTML4の事を指します。 バージョンが古いと何が問題なのかというと、インターネットブラウザは通常最新版に自動でアップデートされていくため、アクセスしたホームページに書かれているHTMLのバージョンが古いと見え方が異なってしまう場合があります。 もしかすると、ホームページにおいてトラブルに発展する可能性もあるため、できる限り最新のバージョンで作る事が推奨されています。 ということで、HTML5での記述は必須でもあります。 HTML4とHTML5の違いを理解していくと、もはや全くの別物言語であると思っても仕方がないように感じてくるでしょう。廃止された主なタグ
center 文字や要素の左右中央揃え ※cssで実装 frame ページ内に複数のHTMLが配置できるフレームの定義 ※iframeタグで実装 frameset ページ内に複数のHTMLが配置できるフレームセット noframes フレーム機能が使えなかった場合に表示するタグ font フォントの指定 big 文字を大きくする ※cssで実装 tt 等倍フォントにする ※cssで実装 s 文字に下線を引く ※cssで実装 u 文字に下線を引く ※cssで実装 applet javaを埋め込むアプレット機能廃止された属性
align 文字の左右寄せ ※cssで実装 background 背景色や背景画像の設定 ※cssで実装 <a name='sample'> アンカーリンクとして使用 ※id属性を使って実装する <li type='sqare'> リストの先頭マーカーの種類を指定 ※cssで実装 <table border='1'> 枠線の太さを指定 ※cssで実装 <meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'> ページ内の文字エンコードを指定 ※<meta charset='utf-8'>DOMの深さ
フレームワークを使うと意図せずに深くなってしまいますが、自分で構築する場合はできる限りDOMが深くなりすぎないように注意する必要があります。 一概にどのくらいの階層の深さが適切なのかという指標はありませんが、 無駄に深くて、ページを更新する時に、迷子になってしまったり、 cssなどで設定を追加する時に、煩雑になっていて分かりにくくなってしまう、 というのが避けられれば問題ないと思います。 メジャーなwebサービス等の場合は、ページ内の情報を守るため、スクレイピング回避処理としてDOM構造をわざと分かりにくくしているケースもあるので、 そうした意図する仕様がない場合は、できる限り完結にすることを意識しましょう。レスポンシブデザインとスマートフォン対応
今どきのホームページで代表的なモノが、「レスポンシブデザイン」でしょう。 一昔前の携帯電話のホームページを持つ時に、携帯電話のインターネットブラウザがあまりにもスペックが低く、 画像を表示するにもかなりスピードが遅かったため、本来のホームページとは別に容量を軽くしたホームページを作って、URLから切り分けて使っていた会社さんも多いと思います。 スマートフォンが主流になった今としては、ワンソース管理ということで、１つのソースコードで様々なサイズの表示に対応できる「レスポンシブデザイン」が主流になってきました。 主に、CSSのメディアクエリを使った実装するのと、その他の付随する色々な技術に対しての知識が必要になるため、実装できるエンジニアのスキルも低い場合は対応できないという場合も多々あるようです。 今どきのフレームワーク（wordpressやwixなど）を使うと、問答無用にレスポンシブデザインに対応できるので、分からなくても実装できてしまう方法はありますよ。見やすさと分かりやすさ
SDGsが頻繁に耳にする今現在、視覚障害者であってもホームページを問題なく見ることができるページを提供するのは必要不可欠です。 色にはしきい値と言うものがあり、背景色と文字色は、ある一定のしきい値の差がないと、見ることができません。
とん吉
ちん平
かん太
サリー
よし子
どの状態が見やすいかは一目瞭然ですよね？
このような色のしきい値を、アクセシビリティと言って、ホームページを制作する側がちゃんと理解しておかなければイケないポイントでもあります。
