読み込み中...

HTMLバージョン確認！初心者が簡単にできる5ステップ

HTMLバージョン確認のステップイメージ HTML
2023.04.03
この記事は約18分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

📋 対応バージョン
HTML HTML5/4.01/XHTML 1.0-1.1
JavaScript ES5+
CSS CSS3
IE 9+ ⓘ
完全対応 一部機能制限 ⓘ

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLバージョンの確認が簡単にできるようになります。

HTMLバージョン確認の重要性

HTMLはウェブページを構築するための言語ですが、そのバージョンは常に進化し続けています。バージョンによって使えるタグや属性が異なるため、ウェブページの表示や機能に大きな影響を与えることがあります。適切なHTMLバージョンを把握することで、より効果的なウェブサイト制作が可能となるでしょう。

メソッド1：ドキュメントタイプ宣言から確認

HTMLファイルの先頭にある「<!DOCTYPE>」タグを見ることで、HTMLバージョンを確認できます。

HTML5の場合は、<!DOCTYPE html>と簡潔に記述されています。一方、HTML4.01の場合は以下のように詳細な宣言となります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

このドキュメントタイプ宣言を確認するだけで、そのHTMLファイルがどのバージョンで作成されているかが分かるでしょう。

メソッド2：ウェブブラウザの開発者ツールを利用

ウェブブラウザに標準で搭載されている開発者ツールを利用すれば、HTMLバージョンを確認することができます。Google ChromeやFirefoxなどの主要なブラウザで利用可能です。

開発者ツールを開いて、Elements（またはHTML）タブをクリックしてください。先頭の「<!DOCTYPE>」タグを確認することで、そのページのHTMLバージョンが判明します。この方法は、自分のサイトだけでなく他のウェブサイトのHTMLバージョンも調べられるため、非常に便利でしょう。

メソッド3：オンラインツールを利用

HTMLの文法チェックと併せてバージョン情報を確認できるオンラインツールがあります。

「W3C Markup Validation Service」は主にHTMLの文法をチェックするバリデーターですが、検証結果でHTMLバージョンも表示されます。URLやHTMLコードを入力して解析を行うことで、文法の正確性と共にHTMLバージョンを確認できるでしょう。このツールを使用することで、コードの品質向上にも役立ちます。

メソッド4：HTMLエディターの機能を利用

一部のHTMLエディターには、HTMLバージョンを自動的に判別する機能が備わっています。

Adobe DreamweaverやMicrosoft Visual Studio Codeなどのエディターが該当します。これらのエディターでHTMLファイルを開くと、バージョン情報が表示されることがあるでしょう。エディター選択の際は、このような機能の有無も考慮に入れると良いかもしれません。

メソッド5：バージョン情報を表示するHTMLコード

HTMLコードを使って、ウェブページ上にHTMLバージョン情報を表示させることもできます。

下記のサンプルコードを参考にして、自分のウェブページに適用してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLバージョン確認</title>
</head>
<body>
    <script>
        function getHTMLVersion() {
            if (document.doctype) {
                if (document.doctype.publicId === "") {
                    return "HTML5";
                } else if (document.doctype.publicId.includes("HTML 4.01")) {
                    return "HTML 4.01";
                } else if (document.doctype.publicId.includes("XHTML 1.0")) {
                    return "XHTML 1.0";
                } else if (document.doctype.publicId.includes("XHTML 1.1")) {
                    return "XHTML 1.1";
                } else {
                    return "不明なバージョン";
                }
            } else {
                return "DOCTYPE宣言がありません";
            }
        }
        
        document.write("<p>HTMLバージョン: " + getHTMLVersion() + "</p>");
    </script>
</body>
</html>

このコードは、DOCTYPE宣言のpublicId属性を参照して、より正確なHTMLバージョンを判定しています。

注意点と対処法

バージョン間の違い

HTMLバージョンによって利用できるタグや属性が異なるため、バージョンを確認して適切なコードを記述することが重要です。古いバージョンのHTMLで書かれたウェブページを更新する際には、新しいバージョンへの移行を検討することが望ましいでしょう。

その際、廃止されたタグや属性を置き換える必要があります。例えば、HTML5では<center>タグが廃止されているため、CSSを使用した中央寄せに変更する必要があるでしょう。

ブラウザごとの対応状況

HTMLバージョンによっては、ブラウザごとに表示や動作が異なることがあります。主要なブラウザでの動作確認を行い、問題があれば対処することが重要です。

必要に応じて、CSSやJavaScriptを用いてブラウザごとの対応を行ってください。クロスブラウザ対応は、ユーザー体験の向上に直結するでしょう。

カスタマイズと応用例

HTMLバージョン情報を表示するだけでなく、デザインや表示方法をカスタマイズすることもできます。

下記のサンプルコードを参考に、ウェブページに合わせてカスタマイズしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLバージョン確認カスタマイズ</title>
    <style>
        .html-version {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="html-version">
        <script>
            function getHTMLVersion() {
                if (document.doctype) {
                    if (document.doctype.publicId === "") {
                        return "HTML5";
                    } else if (document.doctype.publicId.includes("HTML 4.01")) {
                        return "HTML 4.01";
                    } else if (document.doctype.publicId.includes("XHTML 1.0")) {
                        return "XHTML 1.0";
                    } else if (document.doctype.publicId.includes("XHTML 1.1")) {
                        return "XHTML 1.1";
                    } else {
                        return "不明なバージョン";
                    }
                } else {
                    return "DOCTYPE宣言がありません";
                }
            }
            
            document.write("HTMLバージョン: " + getHTMLVersion());
        </script>
    </div>
</body>
</html>

このカスタマイズ例では、バージョン情報を視覚的に分かりやすく表示しています。CSSスタイルを調整することで、サイトのデザインに合わせた表示が可能となるでしょう。

まとめ

HTMLバージョンを確認することは、ウェブページの品質向上や問題の解決に役立ちます。この記事では、初心者向けにHTMLバージョンの確認方法を5つのメソッドで解説しました。

また、注意点や対処法、カスタマイズの方法についても紹介しています。これらを参考にして、HTMLバージョンの確認がスムーズにできるようになりましょう。適切なバージョン管理により、より良いウェブサイト制作が実現できるはずです。