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

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

HTMLは言語としての性格上、一世代前のバージョンであるHTML4.01と最新バージョンのHTML5で記述に違いが出てきます。また、コーダーによっても記述に個人差が出ることがあります。Web上で見たサイトの見た目は同じなのでユーザーにはわかりにくいのですが、サイトの裏側であるコーディングの内容までチェックしている検索エンジンから見ると、HTMLコーディングの記述は意外と重要性の高い項目のひとつです。W3Cの勧告している基準に沿ってコーディングされているサイトは、比較的検索エンジンに好意的に扱われると言われています。

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

こちらではHTMLコーディング制作現場でよく見られる、ルールを定めた方が良い事例や、Webサイトの保守性・メンテナンス性、SEO内部対策にもつながる正確なHTMLコーディング記述の基本事項をまとめました。既存のHTMLソースをある程度ご自身でメンテナンスされたり、コーディングされる場合はもちろんのこと、全て代行する場合においても知っておいて損はありません。

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

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

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

画像にalt属性を入れる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Webサイト内で、画像が占める割合を削ることでサイト表示を軽くすることができます。ハイスペックのパソコンはどんどん安くなっていますが、Webサイト制作ではどんなスペックのデバイスでも快適に閲覧できるように意識してHTMLコーディングを行うのが望ましいです。また、テキスト箇所のみ修正・変更ができるので保守性・メンテナンス性も高くなります。

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

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

セレクタの修飾は避ける

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

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

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

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

こちらもCSSコードの見やすさや、メンテナンス性向上につながります。

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

打ち込むキーは少ないほうがより効率的です。
例：0px → 0
例：0.5s → .5s

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

クラス名やIDの区切り方について、googleではハイフンを使用するよう推奨していますが、ローワーキャメル方式やアンダースコアで区切るなど、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コーディング作業を効率化するために、基準を統一していく事が重要となります。