ソースコード・タグは、内包しているコンテンツ部分を支える、プラットフォームとしての役割を担っている。シンプルかつ明確な記述を念頭にコードを構築していくべきであり、コードは理解しやすいものにしていく。
~body内を整理整頓しよう~
WEBページの要素には表示方法を指定するタグやプロパティとコンテンツの内容であるテキストでありメインは後者のコンテンツの内容であるテキストである。それを阻害するようなタグやプロパティは削除して構築していく。
ソースコードの順番を変える
重要なことから先に記述していく。
- 例
- ヘッダー・メニュー・メインコンテンツ・フッターエリアがあれば(メニューとコンテンツはフローとにて横並び)記述順序は・・・
- ヘッダー・メインコンテンツ・メニュー・フッターエリアの順序にて記載する。
CSS属性をインライン化しない(body内)
HTMLタグ上にスタイル(文字の大きさ・太さ・色・背景色)を記載しない。
- 例
- <h2 style=”font-size:15px;”></h2>
- ・pタグは多用するためIDやCLASS指定はしておく。
- ・不要なタグはすべて削除する。
~head内を最適化しよう~
キャッシュの機能を考慮する(HTML外部読み込みと外部ファイル読み込み)
HTML内部にCSSやJAVESCRIPTを記述するか外部ファイルかするかどちらが早いかと言えば、断然内部に記述したほうがはやくなる。しかしキャッシュという機能を組み入れると外部化したほうがよくなる。
キャッシュとは、ブラウザが表示したWEBページの情報を、パソコンやプロバイダのような中継サーバに一時的に記憶させていく機能でありこれにより高速表示されている。
キャッシュ期間を調整する
.htaccessという名前のWEBサーバーを制御するためのファイルを作成し、サーバー上に設置すれば伽主期間を調整できる。また特定のページにアクセルしたら、パスワードを要求したい。移転などの場合に新しいページにリダイレクトするなどの設定も可能。キャッシュは長く補完していたほうが読み込み速度は速くなる。
head内のソースコード記述順を入れ替える(<link>)
- ・CSSファイルを先にまとめて同時に読み込みさせ、JAVASCRIPTはあとからよみこませたほうが時間の短縮となる。
- ・可能であれば、1つのファイルにまとめる。
JavaScriptを圧縮する
JavaScriptを圧縮するツールとしてhttp://jscompress.com/があります。
~hxタグの位置と数を調整しよう~
hxタグの使用制限
前提として見出し(hx)と本文(p)は必ずセットで扱う=hxとhxを補足するための文章でセットで用いるべきである。
ポイント
・メニューを作る際は基本はli/dt/ddを使用する。
・1ページ内に多く存在するのは不自然のため注意する。目安として
h1→1個/h2→1~2個/h3→1~5個 が適切であるとされている。
~ソースコードエラーをなくそう~
検索エンジンにも文字情報をきちんとみてもらうためにコードエラーは回避するべきである。エラーの判断基準として国際規格のW3Cというものがあります。
コードエラーチェック機能として
①ドリームウィバー
②https://validator.w3.org でチェックも可能。
~リンク切れをなくそう~
リンクした先のページが存在しないことを、「リンク切れ」という(エラー種類としてはサーバー側から404と表示される)。ゆえにリンク先のページが正しく表示されるかどうかのチェックが欠かせません。
リンク切れをチェックする確認ツール
①W3Cの「Link Checker」(https://validator.w3.org/checklink)