HTMLマークアップの難しさ ~ 中年パソコン初心者のWEb制作格闘記 ~ vol.9
お久しぶりです、メンバーの『BAN-CHO』です。
今回は、いつまでたっても難しい「HTMLマークアップ」についてです。
皆さんはどうですか?簡単ですか?
私は難しいです。特に「最適なHTMLタグの選択」が難しい。
「こだわりすぎ」「自己満足」とか言われることもありますが、諸々の制約はあるものの、仕事なのだからできるだけの事はする。
そういう考えです。
達成感もありますから。(やっぱり…自己満足でしょうか?)
では、なぜ最適なHTMLタグの選択にこだわるかというと、それはアクセシビリティやSEOに関係してくるからです。
HTMLタグには元々備わっている役割や機能があるので最適なタグの選択によるマークアップを行うことで、そのページの文書構造(本の目次のような)が明確になり、スクリーンリ-ダ-の利用がし易くなったりします。
キーボードでの使用も容易になり、誰しもが使いやすいウェブサイトへの第一歩になります。
また、Googleなどの検索エンジンに伝わり易くするための1つの方法でもあります。
マークアップの難しいところは「HTMLタグの選択・タグの記述ミス」などがあってもブラウザ表示には影響がなく、HTMLソースコードのチェックをしないとミスに気付かないことです。(テキスト表示に限る)
「HTMLの記述ルール(仕様書)」を確認し、少しでも誤用を防ごうとするのですが、これがまた厄介なのです。
抽象的なのです。人によって解釈が変わるのです。当然、技術情報サイトもそれぞれバラバラな解釈。
また、ページデザインから構成・見出しなどを判断しなければならないのですが、この判断も人それぞれ。
なので自分なりの判断方法が必要になってきます。
ここに「最適なHTMLタグの選択によるマークアップ」を行うための私なりの判断方法を下記に記載しておきます。
- ページデザインから構成・見出しなどを判断し、大まかにマークアップする
- チェックツールを使用しエラーの有無・文書構造・見出しの適切さ等をチェック、修正する(私は Markup Validation Serviceを使用しています)
- 「HTMLの記述ルール・アクセシビリティ」を考慮、デザイン通りではなく読み上げも考慮してページのマークアップを仕上げる。
- チェックツールを使用しエラーの有無・リンク、ボタンの文言などチェック、修正する(Chrome拡張機能 「WAVE」も使用してチェックしています)
ご覧の通り私の判断方法はチェックツール頼りです。
常識、普通、やりすぎなど異論はあるでしょうが誰かの参考になれれば”おじさん”は嬉しいです。
昨今、ノーコードツール・ワードプレスなどの進歩がすごいので「HTMLまでこだわれるか」と言われそうですが、私は時間の許す限りは「HTMLマークアップ」にこだわっていきたいと思います。
- HTMLマークアップ
- HTMLタグには役割や機能などが設定されている。
そのHTMLタグを使用し、文書を構造化、意味づけし、コンピューターやスクリーンリ-ダ-などに適切に伝えるようにする事。 - HTMLの記述ルール(仕様書)
- すでにHTML5は廃止され、現在は「HTML Living Standard」が標準仕様です。