避ける必要のある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開発関連のアドバイスがある場合は、以下のコメントでご意見をお聞かせください。コーディングの努力に頑張ってください！