ウェブページを作るときにやってはいけない9つの間違い

以下のようなhtmlコーディングの間違いは簡単に起こせますが、早めに回避すれば、ページの見栄えがよくなり、メンテナンスも楽になり、思い通りに動作するようになります...。

HTMLとCSSを使ったWebページの作成はとても簡単です。でも、間違えやすいし、おそらく考えないこともたくさんあるはずです。たいていの場合、こうした小さなミスは、それほど大きな差にはなりません。

しかし、長い目で見れば、あなたの人生をより困難なものにしてしまうでしょう。この9つの間違いは簡単にできることですが、早めに修正すれば、見栄えがよくなり、メンテナンスも楽になり、思い通りのページができるようになります。

1 インラインスタイル

HTMLとCSSの優れた点のひとつは、好きなときに好きな行、つまりどんな言葉でも書式設定できることです。しかし、だからといって、この能力を利用することはできません。

以下は、インラインスタイルの例で、段落を周囲の段落より大きくし、別の色で強調するために使用します。

これで段落の末尾にCSSスタイルが付与されます。効率的に見えますよね？

インラインスタイルには大きな問題があり、サイト内の多くの箇所を変更したい場合、インラインスタイルのインスタンスをすべて見つけて変更する必要があります。もし、文字サイズ120%で青色の段落が100個あったら、100個全部を探し出し、より良いと思われる形式に変更しなければなりません。

代わりに、CSSスタイルシートを使用します。上の段落で使用したスタイルは以下の通りです。

p.important { size: 120%; color:blue;}

さて、インラインスタイルを使う代わりに、単純に次の行を使う。

段落は青色で表示され、CSSの「important」クラスに変更を加えると変更されます。

2 レイアウト用テーブル

かつては、ページレイアウトの書式設定にテーブルを使用していました。テーブルを使用することで、ページ上の要素を列や行で整理し、さまざまな配置やスタイルを適用することができます。1つの要素のテーブルでも、コンテンツを正しく配置することができます。しかし、このテーブルの使い方は、通常、不評です。

インラインスタイルと非常によく似ており、HTMLのテーブルではなくCSSを使うことでレイアウトを維持しやすくなっています。繰り返しになりますが、何十、何百ものページに対して変更を加える場合、各ページを巡回してテーブルを調整するよりも、スタイルシートを編集する方がはるかに簡単です。

CSSのレイアウトは、メンテナンスが容易であることに加え、HTMLのテーブルを読むよりもはるかに簡単であることが多いのです。特に、テーブルの中に何階層も入れ子になっている場合は、なおさらです。HTML文書とスタイルシートを切り替えて、何が起こっているかを正確に確認するのは容易ではないかもしれませんが、ページの内容はより明確になり、編集も容易になります。

ページを分割するために、あちこちにテーブルを使うことは大罪ではありません。CSSをいじるよりも簡単で手っ取り早い場合もあります。しかし、**巨大な**多層テーブルであれば、CSSで再フォーマットすることを検討する必要があります。

iii. 非推奨 html

他の言語と同様、HTMLは定期的に変更されます。公式に認められているタグは変更され、一部は非推奨となっています。これらのタグがまだ有効であったとしても、使用は避けた方がよいでしょう。

例えば、太字や斜体のタグを使うのが当たり前になっているとしたら、それは時代に取り残されていることになります。と（「強調」のための）タグが標準になりました。他と同じように使用することは推奨されません。

推奨されないタグのほとんどはCSSで置き換えられるので、同じ効果を得るにはスタイル（できればインラインスタイルではない）を使用する必要があります。推奨されていないタグをどのように置き換えるのか、あるいは特定のタグがまだ使われているのかどうかがわからない場合は、HTMLの公式文書を確認するか、簡単な検索を実行してください。

4 インライン javascript

ウェブページには、機能を追加するためにJavaScriptを使用しているものがあります。ページをインタラクティブにしたり、入力されたテキストを検証したり、アニメーションを追加したり、ユーザーのアクションに対するレスポンスを提供したり、さまざまなことが可能です。要するに、追加の動作を提供することで、ページをより便利にすることができるのです。

CSSとよく似ていますが、HTMLにインラインでJavaScriptを追加することができます。これもCSSと同様、通常は推奨されません。メンテナンスが難しくなる可能性があること以外にも、いくつか理由があります。

インラインJavaScriptは、別のファイルからリンクされたスクリプトよりも多くの帯域幅を使用する可能性があります。シュリンク」と呼ばれる処理により、ユーザーに送信する前にHTMLとCSSを圧縮し、ブロードバンドやモバイル接続で必要な帯域幅を少なくすることができます。ただし、インラインJavaScriptは縮小できない。また、キャッシュされません。一方、単一のJavaScriptファイルはキャッシュされることがあります。

これらのことから、インラインJavaScriptはさらに帯域幅を消費することになります。

また、JavaScriptファイルに対してJavaScript Validatorを使用することができるため、デバッグがより困難になります。しかし、インラインスクリプトには効かない。そして、やはりHTMLがきれいになり、メンテナンスが楽になります。

5 複数のh1タグ

タイトルタグは、ページを見やすくし、SEOの効果を高め、特定のポイントを強調するために使用できる、素晴らしいものです。

しかし、タイトルタグが6段階に分かれているのには理由があります。H1タグは、ページに1つだけ記述する必要があります。これは通常、ページのタイトルです（特にブログと同様のサイト）。H1タグにキーワードをたくさん入れれば、Googleに見つかりやすくなり、検索結果で上位に表示されると思うかもしれません。

しかし、その結果、ページがより分かりにくく、読みづらくなってしまい、せっかくの検索エンジン最適化の効果も半減してしまいます。

H2、H3などのヘッダタグを使用して、ページのアウトラインをより良くします。見出しの階層構造によって、次のセクションがいかに重要であるかを読者に知らせる必要があります。誤解させたら、バレてしまうし、喜ばれない。

6 画像の高さをスキップする

画像を表示できない場合は、各画像に特定の行を表示する「alt」属性を割り当てることができます。これは、特に最近のブラウザ（デスクトップとモバイル）が何でも表示できるのであれば、大した問題ではないように思われるかもしれません。

しかし、alt属性を付けないのは、特に**頻繁に**閲覧する時代においては、大きな間違いです。モバイル接続が必ずしも良好でない場合、ブラウザが画像を読み込むことができなければ、読者はそこで何を見ることになるのかがわかりません。

スクリーン・リーダーやその他の支援機能を使用している人がいる場合、その人が画像から得られるものは、おそらくalt属性だけでしょう。

もちろん、検索エンジン最適化の効果も期待できる。検索エンジンは、短い説明的なalt属性をインデックス化することができます。しかし、ここでの最大のメリットは、読者の役に立てることです。

7 クロージングマークなし

HTMLタグの中には、andのように開いたままにしておけるものもあります。ブラウザは、別の段落やリスト項目を開始すると、前の段落やリスト項目が終了することを認識しています。しかし、これは終了タグをスキップしてよいという意味ではありません。

まず何よりも、ブラウザの技術が進歩しても、タブを閉じなければ、ブラウザがコンテンツを正しく表示できない可能性があることは間違いありません。スタイルを適用すると、stackexchangeのユーザーであるrobertcが示したように、予測不可能な結果が生じることがあります。

結局のところ、ブラウザはエンドマークを期待しているのです。絶対に必要というわけではないそうですが...。しかし、彼らがあなたのページを表示しようとするとき、正しいHTMLを使うことは、確実に彼らに利益をもたらします。

幸いなことに、タグを閉じる作業は、特に優れたHTMLエディタを使用している場合には、それほど時間がかかりません。

8 doctype を除く

HTML文書の冒頭には、通常、次のようなDOCTYPE宣言があります。

<!DOCTYPE html>

DOCTYPE宣言は、ブラウザにどのような種類のHTMLを使用しているかを伝えるものです。

DOCTYPE文を省略すると、ページは "quirk mode "でレンダリングされます。これは、古いページに対するモダンブラウザの防御策です。ページの表示方法を変更します。Firefox の quirks モードをざっと見たところ、大文字と小文字が区別される、フォント属性がテーブルに継承されない、フォントサイズの計算方法が異なる、alt 属性のない画像が正しく表示されないことがある、などが確認できました。

これらのほとんどは比較的些細なことですが、ページを正しく表示させたい場合は、ブラウザの標準モードを完全に有効にしておく必要があります。

そのためには、DOCTYPEが必要です（わからなければ、そのまま使ってください）。

9 アーキテクチャーマーカーを無視する

スキーママークアップは、検索エンジンがページのコンテンツをより理解するのに役立ちます。より具体的には、このマークアップは、あなたが各セクションで何を書いたかを検索エンジンに伝えます。

例えば、記事において、スキーマタグは、タイトル、著者、日付、出版社、その他記事に関する有益な情報を検索エンジンに伝えるために使用することができます。

映画、本、組織、人、レストラン、製品、場所、行動、さまざまな種類のデータ、音楽、彫刻、予約、サービス、ATM、ビール工場のモデルなど、思いつくものはほとんどすべてあります。すごいですね。

モーダルマーカーを全く使わなくても大丈夫です。これがないと、ページが正しく表示されません。読者はそれがあることに気づかないでしょう。しかし、このマークアップを追加することで得られるものは多い。検索エンジンは、リッチスニペットなど、ページに関するより詳細で有用な情報を提供することができるようになります。

Googleのパターンマーキングツールを使えば、実はとても簡単な作業です。

カスタムhtmlのベストプラクティス

これらのベストプラクティスを習慣化するには、しばらく時間がかかるかもしれません。時には、自分にとってあまり役に立たないことに余計な時間を使っているように感じることもあるでしょう。しかし、HTMLとCSSをうまくレイアウトして、使いやすく、メンテナンスしやすくすることは、長い目で見れば、多くの時間を節約することになります。

Webページを作成する際に役立つ習慣を他にご存知ですか？上記の習慣に反対ですか？あなたの考えを以下のコメントで共有してください

2021-03-14 14:13 に公開
閲覧 ( 21 )
分類：プログラミング