• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / Archives for W3C

W3C

HTMLのエラー原因がわからない!W3Cの構文チェックツールを使用してみよう

2020-08-10 By プログラミング入門ナビ編集部

パソコンの前で困っている生徒

はじめに

パソコンの前で困っている生徒

HTML初心者だけど、なんとかエラーが起きても自分で対処できるようになってきた。

でもこのエラーだけはどうしても対処方法がわからない!

そんなお悩みはありませんか?そもそもどこにエラーがあるのかもわからなかったり、とっても厄介ですよね。

四六時中考えていたらピン!と分かったりして、それはそれで気持ちのいいものですが、エラー対処ばかりに時間を書けてもいられません。

この記事では、HTMLでエラーが起きた時におすすめの奥の手として、構文チェックツールを紹介します。

基本的なエラーの対処方法

パソコンとコーヒー

HTML文書は、何かエラーがあってもブラウザがなんとか表示しようと頑張るので、ブラウザによってはエラーがあったとしても想定通りの表示になることがあります。

また、HTMLは階層構造になっているので、上記のように目に見えない不具合があってもそのままにしていると、それ以降のコードにも悪影響が出やすいです。

そのため、エラーがひとたび起きてしまうとそもそもの原因となっている箇所がわかりにくいことが多々あります。

このように、エラーが起きてからではややこしくなるので、書いた瞬間から違和感に気付けるように、エディターの拡張機能でエラーチェックをしながらコーディングするのが基本的な対処方法です。

本サイトではエディターはVisual Studio Codeをおすすめしていますが、この標準機能や拡張機能を用いてなるべくエラーを発生させないようにするための方法は下記でも説明しています。

Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう

それでもダメなら構文チェックツール

先ほどの対策をしたうでコーディングすればほとんどの初歩的なミスは防げますが、複雑なコードになればなるほどそれだけでは防げないエラーが出てきます。

ここからはそれに対処するための方法を見ていきましょう。

例えば、簡単ですが下記のようなコードを書いていたとします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめてのHTML</title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>はじめての見出し アップデート</h1>
  <p>はじめての段落</p>
</body>
</html>

このコードにエラーがあるかどうかチェックするには、下記のサイトにある構文チェックツールを使用します。

Markup Validation Service

W3Cの構文チェックツール

W3CはHTMLの規格を管理している団体で、こちらによる公式ツールとなっていますので信頼性は十分ですね。

英語のみ対応となっていますが、不安な方はGoogle翻訳を活用すれば概ね理解可能なはずです。

こちらの「Validate by Diret Input」というタブをクリックして先ほどのコードをコピー&ペーストし、Checkボタンを押します。

チェックツール使用例

結果は下記のようになります。

下の方に緑の帯と共に「Document checking completed. No errors or warnings to show.」と出ます。

これは「チェックが完了し、エラーは見つからなかった」という意味なので、このコードでは特に問題がないということがわかりました。

構文チェック結果

では、エラーがある時はどうなるのでしょうか。

試しにコードを下記のようにしてh1要素の終了タグのスラッシュを取り除いてもう一度チェックツールに渡してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめてのHTML</title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>はじめての見出し アップデート<h1>
  <p>はじめての段落</p>
</body>
</html>

今度は緑色の帯が出ず、いくつかのエラー候補が出ています。

怪しい箇所が黄色でマークされるので、そこを中心に見ていけばすぐにエラーに気づくことができますね。

構文チェックツール(エラーあり)

このように、構文チェックを使用すれば文法的な誤りがあるかどうか、ある場合はその箇所をすぐに見つけることができます。

まとめ

言語を学ぶ人

HTMLのエラー原因を探るための構文チェックツールとその使い方を紹介しました。

ブラウザでの表示が想定通りではない時、書いたコードに文法的な問題があるかどうかを切り分けられるだけでも便利ですね。

ぜひ活用してコーディングの効率化にお役立てください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門(Proglus)

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: HTML, W3C, 構文チェックツール

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • Apacheインストール時にエラー Cannot find a valid baseurl repo: base/7/x86_64
  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • 初心者のプログラミング学習には13インチのMacBook Proがおすすめ!その理由も解説!
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • WindowsからSSHでサーバに接続する方法(RLogin利用)
  • MySQL 5.7 for Windowsのアンインストール方法

最近の投稿

  • ウェブアプリケーションエンジニアになりたい!何を学習するべきか?
  • VSCodeで画像が表示されない場合の対処法
  • プログラミング学習での「質問のお作法」を理解しよう!最小限のやりとりで効率的に解決!
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • TypeScriptとは?JavaScriptとの違いは?人気の理由を徹底解説!

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー