避ける必要のあるHTMLコードの10の間違い

公開: 2020-12-15

今日、オンライントラフィックは史上最高です。特にグローバルな封鎖のために、人々は自分のコンピューターにより多くの時間を費やしています。当然、これはそれに応じてWeb開発のニーズが高まることにつながります。

需要に対応し、作業を容易にするために、HTMLコードで作業するときに回避するのが最善の10の間違いの概要を説明します。

すべてのWeb開発者が知っているように、仕事を楽にするように調整された多種多様なコンテンツ管理システムがあります。これらのプログラムの助けを借りて、ウェブサイトの作成プロセスとメンテナンスを可能な限り簡単にすることができます。ただし、Webサイトがこれまで以上に微妙で複雑になり、あらゆる種類のカスタマイズ機能を備えていることも事実です。通常、コンテンツシステムは単純な課題に対処するのに最適ですが、高度なWeb開発のニーズに対応するプログラムを見つけるのは難しい場合があります。一方、HTMLコードがどのように機能するかについて十分な知識がある場合は、すべてのドアが開いています。 HTMLはプログラミング言語ですが、マークアップ言語であることに注意してください。それはあなたが複雑なウェブサイトを作り、それらを維持し、そしてMr.BetSlotsのような本格的なゲームを作成することさえ可能にします。 HTMLコードの基本があれば、チャンスは無限に広がります。ただし、このタイプのコーディングは非常に複雑であり、習得への道のりで間違いを犯すことになります。専門家でさえそうするので、恥ずかしいことは何もありません。確かに、コーディングの旅の最初から間違いを最小限に抑えるのが最善です。ある程度の基礎を築くには、HTMLコーディングを実践するときにどのような実践を避けるのが最善かを理解する必要があります。何に注意すべきかを知っているときに簡単に回避できる10の最も一般的なエラーのリストを提供したいと思います。リストに飛び込んで、それぞれの間違いを1つずつ見ていきましょう。

HTMLコードガイド–避けるべき10の間違い

HTML Code Mistakes

タグを閉じない

HTMLコードのメモ帳で作業しているときは、<html />ではなく<html>を書くだけの簡単なことのように思えるかもしれません。結局のところ、スラッシュが含まれているかどうかに関係なく、どちらも同じことを行うように見えます。これは、初心者がよくある落とし穴です。コードが非常に長くなると、タグを閉じないことが大きな問題になる可能性があります。特にエラーを探す必要がある場合。 <head>タグを<body>タグに対して開いたままにすると、コード全体が役に立たなくなります。ブラウザは、これをコード全体をまとめる方向として受け取ります。開閉が必要なタグとそれに対応するタグを常に確認する必要があります。すべてのタグ間をすばやく移動できるように、言語全体を構造化することをお勧めします。これを実現するための優れた方法は、インデントを使用することです。

IDEを使用すると最良の結果が得られると考える

IDEは統合開発環境の略です。これらは、統合されたHTMLコードエディタ、デバッグツール、および自動化ツールにより、Web開発を容易にすることを目的としたソフトウェアソリューションです。彼らは確かにやや誇大宣伝されています。 IDEは、コードを特別なものにするのではなく、単にプロセスを簡単にすることを目的としています。あなたが初心者の場合、彼らはあなたに反対するかもしれません。 IDEをワークフローに統合することは、後の段階で基本を理解したときに行われます。そうしないと、多数の追加機能によってワークフローが不必要に複雑になります。 HTMLコードはメモ帳またはメモ帳++で記述でき、初心者なら誰でもそこから始める必要があります。世論に反して、あなたのウェブサイトが機能するかどうかをチェックするためにIDEHTMLコードプレビュー機能は必要ありません。ウェブサイトホスティングサービスまたはサーバーを介してコードを実行できます。これは、HTMLコードのテスト目的でも同様に機能します。初心者は、最初の段階で物事をできるだけシンプルに保つ必要があります。

テキストエディタの選択に時間を費やす

どのテキストエディタが他のエディタより優れているかについては、多くの議論があることに気付くかもしれません。これはそれほど心配する必要はありません。基本的なHTML構文を処理する場合、適切なオプションであればどれでも正しく機能します。唯一重要なことは、HTMLコードを正しい形式で保存することです。これは常にfile.htmlである必要があります。 Notepad ++のように、構文を強調表示することで作業を楽にするテキストエディタがあります。これは、エラーがないかコードをふるいにかける必要がある場合に役立ちます。

同じファイルでJavaScriptとCSSを使用する

もう1つのよくある新人の間違いは、JavaScript、HTMLコード、およびCSSをすべて同じ最終ファイルで使用することです。ほとんどの場合、エラーを修正するためにコーディングを行う必要があります。コーディング言語の集合体により、必要以上に困難になります。主な問題は、すべてのコードが同じシングルエンドファイルに統合されているため、障害エラーが見つからないことです。別の方法は、各コードを異なるファイルに保存することです。必要に応じて、常に<head>要素にある<link>タグを介してファイルをインポートします。これは、外部CSSを介して実行する必要があります。エラーを見つけやすくなります。ただし、初心者としては、CSSを使用しないHTMLコードを同じ最終ファイルに保存することをお勧めします。

コメントを考えることは重要ではありません

多くの場合、コメントは不要であると考えられています。コードが長くなると<div>関数を理解するのが難しくなるため、これは正しい方法ではありません。その上、他の人がファイルを操作しなければならない場合、それは彼らにとって非常に不便であることがわかります。物事をきちんと保ち、コメントを追加して、使用するすべてのタグと、それらがWeb開発プロセスで果たす役割を追跡するのが最善です。全体として、コメントは、あなたにとっても、ファイルをふるいにかける必要がある人にとっても、長期的にはエラーを見つけるのをはるかに簡単にします。コメントが長くなると不便になる可能性があるため、コメントは短く、適切なものにしてください。

ネーミングと矛盾している

HTMLコードを全体的にタイトにするのに役立つ最も重要なことの1つは、命名プロセスの一貫性を保つことです。クラス、ID、および変数名は意味があり、コード全体で同じに保たれている必要があります。これは、HTMLコードの出力を明確で理解しやすいものに保つために、特にプログラマーに送信する場合に非常に重要です。命名規則は、将来のエラーを見つけるのに大きな役割を果たすため、創造性を持たないことが最善です。正確で簡潔な命名プロセスは、コードを拡張するときにHTMLの基礎をよりよく理解するのにも役立ちます。

ページ構造に注意を払っていない

HTMLコーディングは、最初から正確に単純ではありません。コードを完成させるために多くの時間を費やす必要があります。構造化プロセスが不十分なためにうまくいかない場合は残念です。ルーキーがこの単純な間違いを犯しているのを目にしますが、それは簡単に回避できます。タグがどこに属するかを必ず確認し、標準の構造を維持してください。 <span>や<div>のようなものは、非常によく似た方法で機能するように見えますが、構造化プロセスのどこに属しているか、およびそれらが異なる微妙な方法を知っていることが最も重要です。タグと構造を学ぶことは、スペルを知ることに似ています。コーディングの旅の最初からそれらを理解していることを確認するのが最善です。

デザインプロセスでHTMLを排他的に使用する

HTMLコードを設計プロセスのメインツールとして表示することはお勧めしません。基本的なデザインに最適ですが、複雑で芸術的なデザインになる場合は、常にCSSを選択してください。テキストを太字や斜体にするなどの簡単なことはHTMLで簡単に実現できますが、定型化されたフォントに関しては、CSSが正しい方法です。 CSSを適用すると、HTMLコードを使用して、ほぼすべてのスタイルを実現できます。これを実現するのに役立つテンプレートはWebで見つけることができるため、設計プロセスがかなり簡単になります。外部CSSシートは、特定の要件を追跡、維持、および構成するのが常に簡単です。前述のように、コーディング拡張機能用に異なるファイルを使用すると、エラーの検索がはるかに簡単になります。

HTML in Design Process

改行を使用したリストの定義

リストを実装する必要がある場合は、HTMLコードに入れるすべての項目の後に改行タグを付ける必要がないことに注意してください（例：<br/>）。リストを作成する従来の方法は、<ul>または<ol>タグを使用することです。これらを使用する場合、自動的に行われるため、連続する各行を分割する必要はありません。すべての行の後に休憩を入れることは、タグの間違った使用法です。 <ul>または<ol>バリアントを使用する場合は、すべてのアイテムを<li>タグを使用してリストで定義する必要があることに注意してください。 <li>と</ li>の間にあるリスト内の各アイテムは、他に何もしなくても新しい行に収まります。

複数の改行を使用する

改行の使用を明確にするために、<br/>タグは、テキストの長い段落があり、次の行に単語を入れる必要がある場合にのみ使用する必要があります。改行を使用してHTMLコードの一連の要素間にギャップを作成することはよくある間違いです。ギャップを挿入する正しい方法は、テキストを複数の段落に分割し、CSSを使用して適切なマージンを管理することです。これを正しい方法で実現したい場合は、<p>タグを使用するのが最適です。これにより、段落の間隔がきれいで正しいことが保証されます。

結論

HTMLコードを扱う場合、何らかのエラーが発生する可能性があります。あなたが本格的なプロでない限り、間違いは起こりがちです。 HTMLコードのエラーを最小限に抑えるには、コードを適切に並べ替え、簡単にナビゲートできるようにすることが重要です。特に、Web開発を始めたばかりの場合は、コーディングを整理する方法を学ぶのに時間をかけるようにしてください。 HTMLはほんの始まりに過ぎませんが、JavaScript、CSS、PHP、およびXMLの統合を開始すると、コードはより長く、より複雑になります。このブログのヒントに従うと、最も一般的な初心者の間違いを回避できます。時間が経つにつれて、すべてのコーディング規則が標準的な手順になります。すべての場合と同様に、練習はあなたを完璧にします。 HTMLコード、XLM、CSS、またはその他のWeb開発関連のアドバイスがある場合は、以下のコメントで意見を共有していただければ幸いです。コーディングの努力に頑張ってください！