コンテンツ管理システムのおかげで、Webサイトの制作やメンテナンスはとても簡単で楽なものになっています。しかし、カスタマイズ性に富んだWebサイトを作ろうとすると、自分の要件に合ったものを見つけるのは少し難しいかもしれません。
Webサイトのデザインは、最新のWeb開発ツールの安全で十分な知識をベースにしています。これらのツールをWeb技術と呼んでいるのは、それぞれのツールがプログラミング言語ではないからです。例えば、HTMLはプログラミング言語ではありません。これはマークアップ言語として知られています。HTMLの十分な知識を持っているなら、Webサイト開発に関連する様々なことを達成するためにHTMLを使用することができます。
使用者なら誰でも恩恵を受けることができる視覚的に魅力のあるインタラクティブなWebサイトをデザインできます。ただ、注意を怠ると、たとえツールの使い方に精通していたとしても間違いを犯してしまうことがあるのです。このブログでは、HTMLを使う上で、簡単に避けることのできる、対処しやすいミスを紹介しています。一つずつ見ていきましょう。
1. HTMLのバージョンを無視するべからず
HTMLの全てのバージョンを同じと考えているなら、単なるHTMLの間違いではなく、失敗と言えます。すべてのHTMLの定義において、文書型宣言文は異なります。そして、文書型宣言文はHTMLコードを書き始めるときに最初に定義するものです。HTML5の文書型宣言では、<!doctype html>と書かなければなりません。しかし、XHTMLを使っている場合は、文書型宣言は次のようになります。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“https://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
Web開発者であれば、どの構文がどのバージョンのHTMLに関連しているかという情報はご存知でしょう。マークアップ言語のバージョンの正確な構文は知っておくべきです。HTMLタグの中には、あるバージョンでは正しく機能しても、別のバージョンだと同じタグでも機能しないものがあります。したがって、どのバージョンを使用しているのか、どのタグがそのバージョンで有用なのかを理解することが重要です。さらに、HTML5は最もシンプルなマークアップ言語であるため、より快適に作業できると考えられています。
2. タグを閉じ忘れるべからず
<html/>ではなく<html>と書いても、スラッシュの有無にかかわらずどちらも同じように動作するので簡単です。しかし、開いているタグを閉じない場合、特にコードが長い場合には、エラーの削除や修正の負担が大きくなることがあります。例えば、<head>タグから<body>タグまで開いたままにしておくと、コード全体が無駄になってしまいます。
そしてブラウザは、コード全体はまとめられるべきと考えます。他にも開閉タグをチェックする必要がある例はいくつかあります。開閉を必要とするタグは、常に開始タグとそれに対応する閉じタグをチェックしなければなりません。タグに常に目を向けることで、出てくる可能性のあるエラーを取り除くことができます。
これに対する一つの解決策は、タグを見つけやすく、ふるいにかけやすいように言語を構造化することです。例えば、インデントは、すべての開いているタグに目を光らせておくのに最適な方法であり、したがって、必要な閉じタグをチェックすることができます。HTMLタグを閉じないことは、大きなHTMLのミスになります。
3. IDEでの作業を理想化するべからず
IDEは統合開発環境ソフトウェアで、ソースコードエディタや自動化ツール、デバッガなどを備えています。IDEでは、要件に応じて記述したコードを除けば、コードに特別なことは何もありません。また、IDEを使えば、コードはポータブルで他のツールとの互換性もあります。
しかし、初心者の場合は、NotepadかNotepad++のどちらかで作業する必要があります。サーバーやWebサイトのホスティングサービスを介してWebページを実行することができ、これによりコードが正確に動作するかどうかを確認できるからです。Web開発の分野でまだ経験の浅い開発者であるならば、IDEの使用は避けるべきです。その唯一の理由は、IDEは、Web開発プロセスを複雑にすることです。良いことよりも害を引き起こす可能性の方が高いのです。
4. テキストエディタを侮るべからず
いろいろある中で、テキストエディタは重視するべき最強のものです。HTML構文のみを記述する際は、優れたテキストエディタはすべて問題なく動作します。唯一気をつけなければならないことは、正しい拡張子でファイルを保存することです。
Notepad ++などのエディタは構文を強調表示します。これは、エラーを探すときに役立ちます。さらに、HTMLマークアップ言語の構文を記述することで、開発者の記述の経験を向上させてくれます。開発に関しては、file.htmlという正しい拡張子でファイルを保存する限り、どのようなエディタを使用しても構いません。
5. CSSやJavaScriptをインラインで使いすぎるべからず
HTML、JavaScript、CSS のすべてのコードを同じファイルに入れてしまおうと考えるのはたやすいことです。しかし、コードをデバッグしてファイルのエラーを修正しなければならないとき、それはすぐに悪夢に変わります。同じファイルにすべてのコードを統合したことによって、どこに障害があるのかを見つけられない場合、本当の問題が発生します。このようなHTMLのミスをしないようにしましょう。
一方で、JavaScriptやCSSをインポートすることで、コードのメンテナンスの自由度が高くなります。すべてのコードを別のファイルに配置すると、大規模な変更を簡単に行うことができます。<head>要素の<link>タグと外部CSSを使用してファイルをインポートするという伝統には従う方が良いでしょう。このような場合、エラーが発生すると、追跡して解決しやすくなります。
6. コメントを侮るべからず
コメントは不要と思われがちですが、コードが膨大になると<div>タグが何の機能を持っているのか理解するのが難しくなります。さらに、他の人にとっては、あなたが書いた特定のタグの機能を見つけることは至難の業です。そのため、コメントをつけておくと、すべてのタグと、それがWeb開発においてどのような役割を果たしているのかを把握することができます。
コメントがあれば、エラーを取り除くのが簡単になります。コメントがない場合は、腰を据えてコードの各部分の機能を確認しなければなりません。時には、プログラマーが既存のコードを理解するために、コードの一部を削除したり、追加したりすることもありますが、それによってさらに問題が追加されてしまいます。
また、その後もエラーを見抜けないこともあります。ただし、注意しなければならないのは、コメントがコードよりも長くなってはいけないということです。正確で簡潔なコメントが重要です。
7. 名前付けに気を抜くべからず
Web開発のコーディング段階で最も重要なことは、変数名、クラス名、ID名を一貫して意味のあるものにすることです。これらの要素には、コードを理解しやすく明確に維持する責任があります。例えば、減算を行うレベルに「Addition（加算）」と名付けると、多くの混乱を招いてしまいます。
さらに、混乱を招く命名規則のせいで、そのコード内のエラーを取り除くのが難しくなる場合もあります。一方、正しい命名は、コードを拡張する際に、コードをより根本的に理解することにつながります。コードの他の部分でどの値が使用されているかを見つけるのに役立ちます。
8. ページの構造を侮るべからず
ページの構造は非常に重要です。これは、あなたが苦労して書こうとしているすべての重いコードの結果であるからです。どのタグがページのどの部分に、どのような要件で使用されるべきかをしっかりと理解しておく必要があります。
例えば、<div>タグと<span>タグは似たような働きをしますが、どちらも正しく使える場所を知っておくべきです。もう一つの例は、<link>タグと<a>タグです。すべてのタグの違いを理解してしまえば、タグの扱いが簡単になり、どのタグがページのどの部分にあるのかを判断するのが簡単になります。
9. 属性と値のペアを侮るべからず
属性とその値は、それを使用するタグにおいて最も重要です。タグの中には、属性とその値が必要なものもあります。属性とその値の意味を理解することが重要なのです。初心者の場合は、理解しようとする前に伝統に従うことをお勧めします。例えば、<img>には「alt」という属性があります。
これがないと、Webページにレンダリングされた画像を表示できない可能性があるので、重要です。さらに、画像がレンダリングされなくても、画像が何についてのものであるかを示しています。Web開発に深く踏み込んでいくにつれて、すべてのタグとその属性とその値を理解していかなければなりません。
すべてを理解してしまえば、冗長なものは省くことができます。こういったことを理解し、繰り返しているものがないか定期的にチェックすることで、コードを最適化することができます。
10. HTMLでWebページをデザインするべからず
HTMLは、基本的な形式でのみWebページをデザインするのに役立つマークアップ言語です。Webページを芸術的なデザインにしたいのであれば、CSSを使うべきです。CSS、つまりCascaded Style Sheetは、Webページをデザインしたいときには欠かせないツールです。HTMLでは、<b>タグや<i>タグを使って太字や斜体のような単純なテキストの書式設定は行うことができます。しかし、スタイル化されたフォントや書式設定が必要な場合は、CSSに制御を任せるべきです。
また、CSSを使用して、HTMLコードで任意のスタイルを適用できます。その理由は、外部のスタイルシートの方がメンテナンスしやすく、要件に応じた設定がしやすいからです。また、先に述べたように、ファイルを分けて管理しておけば、エラーの発見や排除が容易になります。そして、スタイルシートを使ってWebページの特定の部分をターゲットにすることができます。
11. リストを定義するのに改行を使うべからず
リストを使って作業をしているならば、一つ一つの項目の後に改行タグ<br/>をつける必要はありません。なぜなら、<ul>タグや<ol>タグを使用する場合、リストされた項目の後に自動的に改行タグが挿入されるので、わざわざ改行する必要がないからです。
例えば、<br/>タグを全ての項目の後に配置すると、タグの使い方が間違っていることになります。さらに、<ul>や<ol>タグを使用している場合は、リストの各項目を<li>タグで定義しなければなりません。これにより、<li>タグと</li>タグの間の各項目が別の行にリストされることになります。
12. 改行を多用するべからず
<br/>タグは、長文の段落があって、ある単語を次の行に入れる必要がある場合にのみ使用してください。このタグは、要素間に隙間を作って維持するために使用すべきではありません。その代わりに、テキストを別の段落に分割したり、CSSを使って余白を管理したりする必要があります。したがって、この目的のためには、<p>タグを使うべきです。
結論
HTMLコードにはいくつかのエラーが発生する可能性がありますが、適切な注意を払えば簡単に取り除くことができます。コードとその使用法を明確に理解していれば、HTML コードのエラーを見つけて修正する時間をかなり節約することができます。
HTMLは氷山の一角に過ぎません。PHPやJavascript、CSSなどのツールを使用している場合や、コードが長くなるほど、誤った状況や構文が発生しやすくなります。間違いを避けるためにも、言語に変更があった場合には、常に最新の情報を入手しておく必要があります。初心者やときには上級者の開発者のほとんどが、先に述べたようなミスをしていることに罪悪感を抱いています。このブログをうまくフォローすれば、コードのメンテナンスが容易になり、またエラーの修正も容易になることを実感できるでしょう。
このブログでは、潜在的なエラーを知ることができ、時間のかかるエラー修正の手順を省くことができます。開発者は、コードが長くなるにつれてコードを複雑にしがちで、その過程で特定のコードの機能を忘れてしまうことがよくあります。慎重にコードを書けば、ミスをしにくくなります。
そのためには、それぞれのWeb開発ツールへの正しい注意と鋭い理解が不可欠です。初心者か専門家であるかにかかわらず、たった一つでもコードのミスをすると、それはWebページに伝播してしまうのです。
おすすめ新着記事
おすすめタグ