HTMLコーディングのポイント

HTMLコーディングのポイント

HTMLは言語としての性格上、一世代前のバージョンであるHTML4.01と最新バージョンのHTML5で記述の仕方に違いが出てきます。また、コーダーによっても同じソースコードを記述する上で個人差が出ることがあります。

Web上で見たサイトの見た目は同じなのでユーザーにはわかりにくいのですが、サイトの裏側でコーディングされたHTMLソースの内容までチェックしている検索エンジンから見ると、HTMLコーディングの記述は意外と重要性の高い項目のひとつです。 W3Cの勧告している基準に沿ってコーディングされているWebサイトは、比較的検索エンジンに好意的に扱われると言われています。

また、複数人で構成されるチーム体制でWebサイト制作に取り組んだ場合、きちんとしたHTMLコーディングの記述におけるルールがなければ混乱が生じてしまう可能性があります。自分以外の担当者のHTMLコーディングの記述であっても自分の記述と同じように読めなければ、 作業効率も落ち、保守性・メンテナンス性が下がってしまうことでしょう。

こちらではHTMLコーディング制作現場でよく見られる、HTMLコーディングの記述ルールを定めた方が良い事例や、Webサイトの保守性・メンテナンス性、SEO内部対策にもつながる正確なHTMLコーディングの記述の基本事項をまとめました。

基本的なHTMLコーディングのポイント

HTMLとCSSの役割をしっかりと分ける

HTMLが文章の構造や構成・各文章の意味付け等を記述する役割を果たすのに対し、CSSはデザイン・レイアウト等、見た目を特に調整する役割を担っています。以前まではHTMLのタグ内にインラインでCSSの記述を行っていましたが、HTML4.01やHTML5になった現在では、CSSファイルを別で用意して記述分けをするのが一般的です。行間をとるために<br>を重ねて記述するのも、保守性・メンテナンス性の低下につながるため望ましくありません。HTMLコーディングでは、基本的にHTMLでレイアウトを作るような記述はせず、極力CSSで記述するようにします。ただし、HTMLで作成するメールマガジンは特別です。受信するメーラーや表示するブラウザごとでスタイル崩れが出るのを極力避けるため、HTMLファイルにインラインでスタイル要素まで打ち込んでいくのが一般的です。

画像にalt属性を入れる

alt属性は画像の代替テキストであり、なんらかの影響で画像が表示されない時はalt属性に記述した内容が表示されます。また、検索エンジンのクローラーがWebサイトを巡回しに来た際には、画像を認識する事が出来ないので、altにどのような画像かわかるよう認識させる意味も含んでいます。画像の説明となる内容などを記述しておくと、画像検索からの流入も向上する可能性があります。こちらは必須ということでもないので、必要がない場合は属性の中には無記入でも問題ありません。ただし、変に欲張ってWebサイトの内容を概要文として全部貼り付けてみたり、無駄に長いテキストを記述したり、画像やサイト内容に関係ない記述をすると検索エンジンにスパムと判断され、ペナルティをうける可能性もあります。HTMLコーディングにおいて、alt属性は簡潔かつ的確な内容を入れるようにしましょう。

bodyタグにページ名となるclassを付ける

Webサイトの規模が大きい場合、CSSスタイルの記述が競合する可能性があります。classを付けることでそういった競合を防ぐ事ができますので、保守性・メンテナンス性も大きく向上するでしょう。こちらもalt属性と同じで必須ではありませんが、制作会社によってはHTMLコーディング規約として統一しているところも多く見られます。

class名・ID名はわかりやすくシンプルに命名する

classやIDはわかりにくい名前をつけてしまうとトラブルの元です。チーム作業ではもちろんのこと、個人で管理していても、どのclassにどのスタイルを反映させているのかわからなくなると無駄な記述が増えてしまい、メンテナンス性が下がります。そのためclassやID名は内容を表現するような名前にしておくのが一般的です。

例えば、文章部分にclassを付ける場合、textやword等、極力簡単な英単語で命名するのも一つのわかりやすく伝える方法です。その他、ヘッダーにあるロゴには、header_logo等、場所を含んだclassの命名も、一般的に多く使われている方法です。二つの単語を組み合わせる場合、単語間はハイフンにするのか、アンダーバーにするのか等の記述時のパターンを標準化する事で、統一された記述で誰でも確認する事ができます。
HTMLコーディングでは、ひとつのサイトで命名規則を統一させておくことが理想的です。

インデントがバラバラにならないようルールを統一する

Webサイトには多くの文章体が出てきます。本文、会話、引用、などなど。コーダーごとに判断しているとインデントにも個人差が出てしまい、ユーザーが読みにくくなってしまいます。例えば、本文の先頭は字下げする、引用は字下げしない、など明確なルールを決めたほうがよいでしょう。

IDは極力使わないようにする

IDの多用はコードの打消しに手間がかかる場合があり、コード全体の煩雑につながります。Webサイトの保守性・メンテナンス性を保つためには、もしIDを使用するなら極力構造上の骨組みのID使用するなどにとどめ、それ以外は使わないなど、ルールを決めて極力使用しないようにしましょう。

画像ファイル名は意味をわかりやすくする

使用する画像を一つ一つ開いて内容を確認しているとどんどん工数が増えてしまいます。命名ルールを作り、それに沿って命名していきましょう。その際、数字はあまり使わず意味に沿って命名の統一をするとより効果的です。
例：h2_head01.jpg → h2_header.jpg

画像パスは絶対パスで記述しないようにする

画像パスを絶対パスで記述してしまうと、ドメイン変更などの際に全ての箇所を修正する必要が出てきます。HTMLコーディングの記述では、なるべく相対パスやルートパスで記述するようにしましょう。

テキストで記述できるものは極力画像化しない

Webサイト内で、画像が占める割合を削ることでサイト表示を軽くすることができます。PCやスマートフォンの性能はどんどん向上しており、また通信回線の品質も向上していますが、Webサイト制作ではどんなスペックのデバイスでも快適に閲覧できるように意識してHTMLコーディングを行うのが望ましいです。また、テキスト箇所のみ修正・変更ができるので保守性・メンテナンス性も高くなり、さらに、テキスト毎に見出しタグや強調タグを付けて装飾する事が出来るので、巡回に来たクローラーがよりコンテンツの意味を理解しやすくなるので、効果的にユーザーへも伝えられるようになります。

W3Cの基準に沿って正確な文法のコードを記述するようにする

W3C基準に沿っていないHTMLコーディングで制作されたサイトは、SEO対策にも影響が出てきますし、ルールが徹底されていないため他の担当者がHTMLソースの変更・修正を行う際に、コーディング内容を把握しきれない可能性があります。保守性・メンテナンス性の低下を防ぐためにも、HTMLコーディングでは、W3Cのバリデーションでエラーが出ないかチェックしましょう。

セレクタの修飾は避ける

HTMLコーディング記述が長くなってくるとスタイルの指定も多くなってきます。セレクタを修飾してしまうと予期せぬところでスタイルが反映されない恐れもあるので、CSSのパフォーマンス向上のためにもセレクタの修飾は避けましょう。
例：div.hoge → .hoge

プロパティの記述はできる限りまとめて記述する

プロパティの記述の仕方もコーダー個人のクセがよく出てくるところですが、効率性や見やすさを考えると、できる限りまとめて一括で指定するように意識して記述しましょう。ショートハンドプロパティとも呼ばれます。

プロパティの記述順をABC順など統一させる

こちらもCSSコードの見やすさや、メンテナンス性向上につながります。記述の順番をABC順等で統一するなど順序を決めておけば、CSSコードのソースが全体的に整って見やすくなり、他のコーダーが記述しても個々のクセによる見づらさが解消されます。極力順番なども統一した方がいいでしょう。

0pxや0.5sの時は単位や数値の省略をする

打ち込むキーは少ないほうがより効率的です。こちらも記述の仕方の統一の基準としておけば、コーダー毎のムラがよりなくなるようになります。
例：0px → 0
例：0.5s → .5s

クラス名やIDの区切り方を統一する

クラス名やIDの区切り方について、googleではハイフンを使用するよう推奨していますが、ローワーキャメル方式やアンダースコアで区切るなど、HTMLコーディングでは、いずれかの形で統一しておきましょう。
こちらは特にコーダー毎のクセが表れやすい箇所となります。普段からハイフンで慣れている方もいれば、アンダースコアで記述しているコーダーもいるので、いずれかに統一となればコーディングしづらくなる方は出て来ますが、今後様々な制作のご依頼にも柔軟に対応するためにも、どの記述でも抵抗なくコーディング出来る事はHTMLコーディングにおいて大切な事です。
例：hoge-box、hogeBox、hoge_box

プロパティ名の右となりにダブルコロンと値の間にスペースを入れる

指示内容にあたるプロパティはできるだけ見やすく記述するのに越したことはありません。ダブルコロンの前にスペースを加えることで視認性が高くなります。

別のセレクタをカンマで区切る時は、改行して記述する

こちらも必須ではありませんが、コーディング記述の視認性を高める効果が期待できます。

JavaScriptの記述は必要最小限にする

JavaScript は様々な動きを表現できるため便利ですが、サイト表示が重くなってしまいます。なので、CSSで表現できるものは極力CSSで表現します。同様にシンプルな動きにjQuery等のプラグインを使うと表示が重くなる原因になることがあります。なるべく使わずにすむHTMLコーディングを意識しましょう。

JavaScriptの読み込み場所を統一する

JavaScriptの設置方法として、外部ファイルとして読み込ませる方法や、HTMLの＜/body＞の直上に設置する方法があります。ルールとして統一しておきましょう。

単独プロパティで汎用するclassは極力使用しない

HTMLソースコード内の記述が増え、視認性・メンテナンス性の低下につながりますが、必須ではなく、案件内容によって利用する場合もあります。コーダー毎に違う使い方をするのではなく、チーム全体で同じ方法で記述するように統一しましょう。

classは可能な限り親要素に付け、子要素には付けないようにする

こちらを徹底するとHTMLがスッキリと見やすくなり、保守性・メンテナンス性向上につながります。

今後のサイト運用を意識してHTMLコーディングする

Web制作においてのゴールはサイトの完成ですが、納品されたお客様はそれ以降サイトを運用していきます。例えば新着情報など、更新によってコンテンツ数が増える箇所は、<div>ではなく<ul>で記述するなど、心配りのあるHTMLコーディングを心がけたいものです。

コメントアウトの書き方・囲み線の使い方を統一する

コメントアウトはまさにコーディングを行う人間しか目にすることがありません。好き勝手に書いて相手に伝われなければ意味がありませんので、ルールを統一しておきましょう。

ディレクトリの階層・基本的なフォルダ名・ファイル名はルールを決めておく

画像を入れるフォルダを作成する時に、フォルダ名をimage、img、images等いくつかのフォルダ名の候補があがります。どういうルールを元に命名するかなど、フォルダ名や階層構造も予め統一しておくと、作業の効率化につながります。

<head>内のmeta要素で、最低限必要なものを統一する

こちらもあらかじめ決めてテンプレート化しておくと、作業がスムーズになります。案件や制作の内容によって必ずしも上記の形にしなければならないわけではなく、あくまでもHTMLコーディング作業を効率化するために、基準を統一していく事が重要となります。

Webサイト（ホームページ）の性格や案件の内容によって必ずしも上記の形にしなければならないわけではありませんが、少なくともHTMLコーディングを外部に代行する場合は納品時に気にして頂いた方がよいかもしれません。また、ご自身でコーディングを実施される場合は、HTMLコーディング作業を効率化するために、基準を統一していく事が重要となります。