バリデータエラー： ないタグ

説明: 要素は開いたときと逆の順序で閉じる必要があります。

右：
< li >...

DOCTYPEの大文字と小文字の区別

例：

バリデータエラー: DOCTYPEがありません

説明: DOCTYPE では大文字と小文字が区別されます

右:

終わりの「/」が抜けています

例：
… style.css" type="text/css" media="screen" >

説明: 「空の要素」として 画像または br、「/」で終わる必要があり、その前にスペースが必要です

右:
…style.css" type="text/css" media="screen" />

タグは大文字で書かれています

例：

バリデータエラー:そんな要素ないよ…

説明: XHTML ドキュメントでは、すべての要素と属性を小文字にする必要があります。 この言語では大文字と小文字が区別されます。

右:

属性値は引用符なしで記述されます

例：

バリデータエラー:ない " "

説明: 属性値は引用符で囲まれて記述されます

右:

画像に alt 属性がありません

例：

バリデータエラー:必須属性「alt」が指定されていません

説明: タグで 画像属性 代替常に存在する必要があります。画像が装飾に使用される場合、値は空のままにすることができます

右:

その結果、サイトのエラーを修正し、サイトを有効にすることができます。

今日の記事はサイトの検証 (つまり HTML) に当てたいと思います。 まず、この用語の意味を定義しましょう。 サイト検証では、構文エラーのチェック、タグのネスト、その他の基準のチェックが行われます。 原則として、バリデーター (文書構造のエラーがサイトにないかチェックするサービス) は、HTML コードが特定の標準に準拠しているかどうかをチェックします。この標準は、HTML ページの先頭の 1 行目に示されています。 それが何のためにあるのか知らなかったとしても、今なら分かるでしょう！ 🙂 しかし、正確には、なぜこの検証が必要なのでしょうか?また、それは何に影響するのでしょうか?

「サイト検証とは何ですか?」

上で述べたように、検証とは、HTML コードが特定のルールや標準に準拠していることを意味します。 XHTML は に置き換えられ、開発者の作業が大幅に楽になりました。 問題は、XHTML バージョンでは構文が非常に厳密だったということです。 HTML5の場合はラップタグを書くことができます
スラッシュなしとこの形式の両方
の場合、XHTML では最後のオプションのみが正しくなります。 HTML5 はそこまで厳密ではなく、便利なタグもたくさん登場していますが、それは今は関係ありません :)

「サイト検証は何に影響しますか?」

では、2 番目の質問に答えましょう。

サイト検証により、サイトが正しく表示されているかどうかを監視できます。 さまざまなブラウザ。 たとえば、タグを閉じなかったり、コードのどこかでタイプミスをしたりすると、同じページがブラウザごとに異なって表示される可能性があります。 また、（CSS）も期待どおりに表示されない場合があります。 したがって、これを注意深く監視する必要があります。

また、検証は検索エンジンに影響を与えると言わざるを得ませんでした。 検索エンジンは有効な HTML コードを含むサイトを優先します。 これを覚えておいてください。

Web サイトの検証が本当に必要であることをご理解いただけたでしょうか? それでは、理論は終わりましたので、実践に進みましょう。

検証チェック方法

それぞれの方法について書きました 詳細な指示テキストの形式で、また、読んで理解するのが面倒な人のためにビデオを作成しました 😉 。

1方向。 サービス validator.w3.org

最初の方法の本質は、サイトの正当性をチェックするサービスを使用することです。 サービスを利用したサイトの正当性を確認する方法 validator.w3.org:

1. アドレス validator.w3.org に移動します。 3 つのタブのあるページが目の前に開きます。 最初のタブ「URI による検証」では、インターネット上に公開されているサイトの正当性をチェックできます。2 番目の「ファイルアップロードによる検証」では、コンピューターからファイルをアップロードします。そして、3 番目の「直接入力による検証」では、ファイルの内容を入力フォームに直接貼り付けます。 最初の方法、つまりインターネット上にサイトを掲載する場合についてお話します（他の方法でも問題ないと思います）。 したがって、以下の画像のように最初のタブを選択します。

• 文字エンコーディング- サイトのエンコーディング。 しかし！ すでにタグの間にある場合 (ブラウザの Web サイトでキーボード ショートカットを押します CTRL+Uドキュメントの先頭に次のような行があることを確認してください。

  ）。 最初の行に同様のものがある場合は、ここにも値を残します (自動検出).

上記で説明した値が何もない場合は、これらの値を自分で設定する必要があります。 ここでは何も変更せず、すべてそのままにしておきました。

3. 次に、「アドレス」フィールドにサイトのアドレスを入力します。

次に、灰色のブロックの中央にある「チェック」ボタンをクリックします。

4. 次にサイトの検証が行われ、しばらくすると検証結果が表示されます。 同様のページに「このドキュメントは HTML5 として正常にチェックされました!」というメッセージが表示されます。 (これは、サイトが特定のドキュメント タイプ (つまり、私の場合は HTML5) の有効性チェックに正常に合格したことを意味します):

赤い背景に碑文がある場合は、HTML ドキュメントにエラーがあることを意味します。 修正する必要があります。 これを行うには、エラーの名前を強調表示し (ビデオですべての方法を示しています)、それをたとえば Google に貼り付けます。 次に、他のウェブマスターがこのエラーにどのように対処したかを読み、次のヒントに従って修正してください。 別のオプションもあります。コードを理解している知識のある人にこのタスクを任せて、その人にやってもらうということです。

方法2。 ブラウザプラグイン

1.ブラウザプラグイン モジラ Firefox- 行く

上のリンクをクリックしてバージョンを選択してください Firefoxブラウザそして「ダウンロード」ボタンをクリックしてください。 次に、必要な項目を選択します オペレーティング·システム通常のアドオンと同様にインストールします。 (分からない人はビデオを見てください:)

2.ブラウザプラグイン Google Chrome- 行く

ここでは、「無料」ボタンをクリックし、ポップアップウィンドウで「追加」をクリックする必要があります。

3. のプラグイン Opera ブラウザ- 行く

インターネット上のすべての Web サイトのページは、標準化された HTML ルールに従って記述された特別なコードを使用して設計されています。

有効性とは何ですか?

検証とは、確立された標準への準拠のチェックであり、Web マスターが使用するコンテキストでは、ページ コードの正確さ (構文エラー、タグのネストなど) をチェックします。すべてが「正しく」行われていれば、ページ コードには誤った属性や構造が含まれていてはなりません。そしてエラー。 Web サイトを検証すると、修正する必要がある欠点を特定できます。

サイトの有効性とは、コードが既存の HTML 標準に準拠していることです。

Web ページのコードにコメントやエラーがあるかどうかは、オンラインでも、インターネットにアクセスせずにオフライン プログラムを使用しても確認できます。

コードバリデータとは何ですか

コード検証ツールは、ページの HTML コードと CSS コードが最新の標準に準拠しているかどうかをチェックするために使用できるプログラムです。

彼女は間違った要素を見つけて記録し、その位置を示し、正確に何が間違って書式設定されているかを定式化します。

有効なレイアウトの基本的な「兆候」

有効なレイアウトには、インターネット全体の技術標準を開発する W3C (World Wide Web Consortium) の要件に完全に準拠したコードが含まれています。

サイト ページのコードが正しければ、サイトはすべてのブラウザで正しく表示されます (曲がっていません)。

検索結果に不当な「格下げ」の疑いはなく、インデックスから削除されたページもありません。

..

, 例。 タグが間違っていると仮定すると、

(特に、終了要素が欠落している) 場合、検索エンジンは何も修正せず、コード内に白黒で書かれたとおりに解釈します。 その結果、サイトの宣伝に関連した結果が生じる可能性があります。

ウェブサイトのプロモーションでは有効なレイアウトが重要ですか?

理論的にはその通りですが、実際には検証エラーのあるサイトが上位に多数存在し、エラーのあるサイトは通常、正常に動作することがわかります。 プロモーションに関する問題は、サイトが特定の種類のデバイスまたはブラウザで正しく表示されない場合にのみ発生します。 見た目は素晴らしくても、検証でエラーがあった場合、プロモーションには影響しません。

別の専門家であるマイク・デイビッドソン氏も同様の実験を実施し、Googleは文章の質に基づいてページを分類しているという結論に達した。 たとえば、閉じられていないタグにより、コンテンツの一部がそのタグの値として認識される可能性があります。

このウェブマスターは非常に重要な点を指摘しました。

コードの有効性によって順位付けがどの程度左右されるかを確実に言うことはできませんが、既存の欠点により、ページまたはサイト全体が検索エンジンのインデックスから削除される可能性があることは確実です。

なぜ有効なコードが必要なのでしょうか?

有効なコードにより、ページはブラウザーで正しく表示されます (サイトの CSS スタイルは正しく表示されない可能性があります)。

さらに、あるブラウザでは設定どおりにサイトが表示され、別のブラウザではまったく異なる表示になる可能性があります。 画像が傾いて内容がまったく読めなくなる場合があります。

その結果、このブラウザからのトラフィックが失われます。 さらに、SEO の 3 つの最も重要な要素の 1 つである行動要素は、検索結果に大きな影響を与えます。

訪問者がサイトを訪れたものの、コードのエラーにより情報を認識できずにすぐにサイトを閉じたと想像してください。 あるいは、解決策が見つからないために、検索エンジンに戻るのが一般的です。 最終的には行動要因がサイトの立場を悪化させることになるため、これらすべては悪影響を及ぼします。

サイトの有効性を確認する方法

コードの整合性をチェックするために、ほとんどの場合、W3C によって作成された非常に便利な検証サイト「Markup Validation Service」(http://validator.w3.org) が使用されます。

HTML

ここには 3 つの検証オプションがあります。

• ページの URL を入力します。
• コンピュータからコード ファイルをアップロードします。
• 完成したコードをフォームに貼り付けます。

このサービスは、HTML コードのエラーとその場所を指摘するだけでなく、それらを修正する方法についてのアドバイスも提供します。コードがすでに Web 上で入手可能な場合は、その URL を「URL による検証」フォームに入力し、「チェック」ボタンをクリックすることで検証できます。 HTML バリデーターはコードの読み取りを有効にし、結果をレポートします。

チェックしている URL ページの正確な URL を入力する必要があります。 サイト全体はチェックされません。 Web サイトのアドレスを入力してください - プログラムによってのみ考慮されます ホームページ。 コメントが見つかった場合は、プログラムコードが無効であることが通知され、エラーのある行が表示されます。

このビデオでは、バリデーターを使用した検証プロセスを明確に説明しています。

ローカルファイルの確認

同じアドレス http://validator.w3.org で、「ファイルアップロードによる検証」タブを選択し、コードが書かれたドキュメントをアップロードすることでコードを確認できます。

必要なファイルへのパスを選択し、「確認」をクリックします。 その後、すべてが同じように起こります。

フォームを使用してコードを入力する

場合によっては、ページ コードをすぐに挿入してオンラインで確認する方が便利な場合があります。[直接入力による検証] タブを選択し、すべてのコードをサーバーに送信します。

CSS

CSS コードの有効性は、オンライン バリデーターを使用してチェックすることもできます。 https://jigsaw.w3.org/css-validator/

ここではすべてロシア語で書かれており、多くの人にとってこれは本当に嬉しい驚きです。

ここでも、URL を入力するか、ファイルをアップロードするか、コードを貼り付けるかを選択できます。

HTML の場合と同様に、サイトにエラーがないかチェックされ、サーバーから応答を受け取ります。 検証設定はありませんが、コードの欠陥のリストの後にある、生成された有効なコードが提案されているので調べることができます。

結果として得られたコードを検討し、元のコードを目的の形式にします。

ブラウザ拡張機能

ブラウザーにはあらゆる種類の検証拡張機能があります。 Google Chrome の場合は、コードの有効性をチェックする HTML Tidy Browser Extension プラグインがあり、Opera の場合は Validator 拡張機能、Safari の場合は Zappatic、Firefor の場合は HTML Validator です。

後者についてさらに詳しく見てみましょう。 バリデーターと同じ検証をオフラインでのみ実行します。 ここで入手できます http://users.skynet.be/mgueury/mozilla/

拡張機能をインストールし、ブラウザを再起動すると、すぐに作業を開始できます。 インストールに問題がある場合は、Mozilla Firefox サポートに問い合わせるか、フォーラムを参照してください。 http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

HTML Validator のインストールとその使用方法に関する詳細なビデオ:

URL をロードすると、拡張機能が自動的に有効になり、コードが読み取られます。 結果は右上隅に表示されます。

結果は、検証結果を含む小さな画像のようになります。

結果をクリックすると、以下を開くことができます。
— ソースコード;
— エラー - 左下のブロック（または有効性に関するメッセージ）。
— エラーを修正するためのヒントは右下にあります。

最も一般的なエラーを修正する方法

コードをどのようにチェックしても、エラーはリストに表示されます。 欠陥のある線も示す必要があります。

コードを編集する前に、念のため次のことを行ってください。 バックアップコピーウェブサイトのテンプレート。

Firefox 拡張機能では、開いている拡張機能ウィンドウでエラーの名前をクリックすると、無効なコードを含む行に自動的にリダイレクトされます。

これらの同じエラーには、修正方法に関するヒントが含まれています。
いくつか例を挙げてみましょう。

1. 属性間にスペースは入れません。
…rel=”ショートカットアイコン” href=”http://arbero.ru/favicon.ico” type=”image/x-icon”

ここでの修正は「セミコロン」を削除することです。

2. 開いていない要素「div」の終了タグ

終了 div タグは冗長です。 取り除きましょう。

あなたはよく知りません 英語（そしてすべてが常にそこに説明されています）？ エラー コードをコピーし、検索エンジンに貼り付けます。 同様のトピックはおそらくウェブマスターやレイアウトデザイナーによってすでに説明されているため、専門のリソースで問題を解決する方法が必ず見つかります。

ただし、正直に言うと、私はコードのバグにはあまり労力を費やしません。 サイトがすべてのデバイスとブラウザーで正しく表示されることを確認することをお勧めします。

ブログ購読者、IT スペシャリスト、私のサイトのゲストの皆様、こんにちは。 前回の記事では、プリミティブ作成の基礎知識とプリミティブが必要な理由について説明しました。 今日は、コードの有効性やプログラムの検証などの概念について説明します。

さらに詳しく、HTML コードのエラーをチェックする方法とプログラム、頭字語 W3C でよく知られている World Wide Web コンソーシアムとは何かについて詳しく説明し、重要な用語を定義します。 この記事で提供される情報は、Web サイトのページが正しいかどうかを確認するだけでなく、検証一般の概念をより具体的に理解するのにも役立ちます。 始めましょう!

すべてのプログラムには二重の B: 検証と検証が必要です。

書かれたすべての プログラムコードオブジェクト接続のセマンティクスとロジックが正しいかどうかがチェックされます。 用語を使用する場合、これは検証と検証と呼ばれます。 これらは、プログラミング、Web サイト構築、テストなど、IT のさまざまな分野で使用されます。

工場で生産される製品の品質を維持するために必要です。 ハイレベル。 これらのテクノロジーを研究するときによくある間違いは、その特定の目的を理解していないことであることに注意してください。 その結果、用語は混乱を招き、実行されるアクションを不正確に説明します。 そこで、それぞれの意味を定義していきます。

それで、 検証– これは、作成されたコードを含む文書に要素のスペルの誤りがないか、W3C によって確立された世界統一標準への準拠、および言語自体の規定の仕様をチェックすることです。

コードの有効性をチェックすることで、開発者は、いわば書かれたテキストの中で見つかった「間違い」を修正することができます。 より明確にするために、それらのいくつかをリストします。

• タグ、属性、またはプロパティが正しく書かれていない。
• 余分な括弧が追加されました。
• 閉じられていない要素が検出されました。
• タイプが指定されていないか、正しく指定されていません;
• タグが正しく挿入されませんでした。
• 必須の属性が指定されていません。

それでは検証を見てみましょう。

検証– これは、すべての品質基準への準拠、必要なツールとテクニックの実装、およびそれらの相互作用が正しく行われていることをチェックします。 一般に、検証は、指定された実行基準に対してコードをチェックするために使用されます。 プロセス自体は、最終製品の適切な品質管理の維持に関連しています。

World Wide Web コンソーシアムの目的は何ですか?

W3 コンソーシアムは、インターネット リソースおよび一般に関する統一標準の開発と実装を専門とする組織全体です。 受け入れられたすべての標準は W3 推奨と呼ばれ、すべての技術ソリューションと Web サービスの両方に実装されます。

これは、グローバル ネットワーク、その柔軟性、多用途性の向上、さらには作成された機器とソフトウェア製品間の完全な互換性の達成に貢献します。

W3C は、validator.w3.org などの独自のソフトウェア パッケージも作成しています。 これは、コードの有効性をチェックするための最も有名なサービスの 1 つです。

Web サイト validator.w3.org は、ダイアログ ボックスに入力されたコードをチェックするオンライン モード、リソースへのリンクを使用した検証、アップロードされたファイルの検証の 3 つのモードでプログラム検証をサポートしています。

では、このサービスがどのように機能するかを詳しく見てみましょう。

• オンライン ストア、ブログ、またはその他の種類の Web リソースがすでにインターネット上で公開されている場合は、表示されるダイアログ ボックスにアドレスを貼り付けて、[チェック] ボタンをクリックするだけで済みます。
• サイト作成の初期段階では、ファイル自体をダウンロードすることでサイトの有効性を確認できます。 ファイルへのパスを指定して「チェック」ボタンをクリックする価値があります。
• 場合によっては、コードの特定の部分をチェックする必要があることがあります。 この目的のために、3 番目の検証モードがあります。 目的のプログラム テキストをダイアログ ボックスに貼り付けるか入力し、レビューのために送信します。

3 つのケースすべてにおいて、リソースが正常にチェックされ、エラーが検出されなかった場合、結果を示すウィンドウが強調表示されます。 緑それ以外の場合は、赤色で表示され、見つかった警告とエラーの数も書き込まれます。

もっと拡張機能を追加してください!

現在、おそらく既存のすべての拡張機能に対して、オンライン リソースを検証するための拡張機能が作成されています。 この前は W3C についての話になったので、最初にこの組織が作成した製品について説明します。

そこで、Firefox 用 HTML バリデーターと . これらのブラウザはリーダーの間で高い地位を占めているため、世界的な組織はそれらのブラウザ用に組み込みの HTML バリデータを作成しました。 これは、validator.w3.org Web サイトの原則に基づいて設計されていますが、ネットワーク接続なしで機能するという明らかな利点があります。

提示された拡張機能は 3 つの方法でインストールできます。

1. 使い慣れた拡張パネルを使用します。
2. 拡張子を付けてドキュメントのパスを指定します。
3. 正面から積み込みます。 で システムファイル Firefox ディレクトリ (C:\Program Files\Chrome または C:\Program Files\Mozilla Firefox としましょう) と、その中に拡張機能がコピーされている拡張機能のサブディレクトリを見つける必要があります。

ブラウザを再起動すると、拡張機能が有効になります。

HTML バリデーターは非常に使いやすいです。 ロシア語では動作しませんが、直感的なインターフェイスを備えています。

Web ページを開くと、ステータス バーにアイコンを使用してリソースのステータスが表示されます。 チェックマークの付いた緑の丸は文書が有効であることを意味し、黄色の三角形はチェックマークが付いていることを意味します。 感嘆符– コメントに関する警告と×印の付いた赤い丸 – エラーが検出されました。

「表示」機能を使用すると、ブラウザでコードを直接表示できます。 ソースコードページ」または ホットキー F12。

検証用のさらにいくつかのプログラム

一般的に、人気のある検証プログラムについては一日中話し続けることができると言えます。 ただし、仕事の場合は、いくつかの品質だけを知っておくことをお勧めします ソフトウェア製品。 それらのいくつかについてはすでに説明しました。

ここで、すべての人気のある Web 言語のコードをチェックし、コンバーターやその他多くの便利なものを備えた、あるオンライン サービスの説明という形で小さなボーナスを追加したいと思います。 このサイトは http://www.freeformatter.com です。 HTML テキストと XPath クエリの両方をチェックします。

というようなことがある 検証または 有効コード。 検証はコードをテストしてエラーがないことを確認するプロセスです。 エラーを含まないコードが呼び出されます 有効。 「バグがない」と言うのも正確ではありません。「現在の W3C 標準と矛盾しないコード」と言った方が正確です。 このサービスを使用して、HTML のエラーをチェックできます。

サービスを使用して CSS のエラーをチェックできます。

レイアウトを実装するとき、すべての Web マスターは自分のサイトのコードの正確さと有効性をチェックすることになります。 しかし、ほとんどのサイト (最も人気のあるサイトであっても) コードの有効性をチェックすると、エラーが含まれます。 これが何と関係があるのか​​考えてみましょう。

多くの場合、「有効なサイト」と「正しいサイト」の概念は異なります。 ほとんどの場合、サイトがすべてのブラウザーで正しく表示されるようにするコードを使用できますが、それでも有効ではありません。

有効性とSEO

コードの有効性は、サイトの検索エンジンでのプロモーションに大きな影響を与えます。 検索エンジンは無効なサイトを完全に有効なサイトよりも低くランク付けするという情報があります。 さらに、無効とは、サイトが正しく表示されていないことを意味します。 さまざまなブラウザ、訪問者を怖がらせるため、直帰率や直帰率に影響を与えます。 行動要因その結果、検索におけるサイトの順位が失われる可能性があります。 サイトの有効性は、その品質を示す指標の 1 つです。

有効/無効コード

しかし、上で述べたように、それは起こります 正しい無効コード。 この顕著な例は、 CSS ハック(つまり、さまざまなブラウザで目的の要素の表示を変更するプロパティ)。 それらは無効であることが非常に多いです。 もちろん、そのようなハックの使用を拒否することもできますが、原則として、有効なコードははるかに長く、より複雑になるため、そのような場合は、正当性を追求するのではなく、ハックの使用を選択することをお勧めします。 原則として、このようなコードは害を及ぼさず、バリデーターを使用してチェックされた場合にのみ検出されます。

この記事を共有します:

関連記事

2015 年 4 月 17 日
rar ファイルを開く方法 – 考えられるすべての方法

2015 年 4 月 17 日
キーボードを使用してブラウザのタブを切り替えるにはどうすればよいですか?

2015 年 4 月 17 日
DMG ファイル拡張子は何ですか?

2015 年 4 月 17 日
iPhone の「ポッドキャスト」とは何ですか? iPhone 5 の「ポッドキャスト」とは何ですか?