logo

TechCodeview

XHTML の概要

XHTML または 拡張可能なハイパーテキスト マークアップ言語 HTML と XML を組み合わせたもので、次とよく似ています。 HTML しかし、より厳格です。ブラウザが理解しやすい Web ページを作成するためのルールブックのようなものです。 HTML とは異なり、注意してルールに正確に従う必要があります。ほとんどのブラウザがこれをサポートしています。これは、Web コードを記述するためのより正確な方法であると考えてください。

目次



歴史

World Wide Web Consortium (W3C) によって開発され、Web 開発者が HTML から XML に移行するのに役立ちます。 XHTML を使用すると、開発者は、コンテンツの下位互換性および将来の互換性を確保しながら、そのすべての機能を備えた XML の世界に参入できます。 XHTML ファミリには 3 つのドキュメント タイプが含まれています。 1 つ目は、2000 年 1 月 26 日に W3C によって推奨された XHTML 1.0 です。2 つ目は、2001 年 5 月 31 日に W3C によって推奨された XHTML 1.1 です。

3 つ目は XHTML5 です。これは、HTML5 仕様を XML に適合させたものを開発するために使用される標準です。 XHTML ドキュメントには XHTML 宣言が必要です。

XHTML の要素:



XHTML要素 説明
> 文書型定義 (DTD) を宣言し、マークアップ言語のルールを指定して、ブラウザーでの適切なレンダリングを保証するために使用されます。
> HTML または XHTML ドキュメント全体を囲み、ルート要素として機能します。
> タイトル、文字セット、リンクされたスタイルシート、その他の重要な要素など、ドキュメントに関するメタ情報が含まれます。
> head セクション内でネストされ、ブラウザのタイトル バーまたはタブに表示されるドキュメントのタイトルを指定します。
> テキスト、画像、リンク、その他の HTML 要素を含む Web ページのコンテンツを囲みます。ブラウザに表示されるドキュメントの表示部分を表します。

XHTML Web ページを作成する場合は、DTD (Document Type Definition) 宣言を含める必要があります。 DTD には 3 つのタイプがあり、以下で説明します。

移行 DTD:

これは、カスケード スタイル シート サポートが組み込まれていない古いブラウザーでサポートされています。厳密な DTD では許可されていないいくつかの属性が body タグで囲まれています。

構文： 

 PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'DTD/xhtml1-transitional.dtd'>>>

例： この例では、XHTML ドキュメントを作成するコードを例とともに示します。



html




xml version='1.0' encoding='UTF-8'?> 移行 DTD XHTMLtitle> head> <body bgcolor='#dae1ed'> <div>フォントの太さ:太字;テキストの配置:中央; margin-bottom:-25px;'>techcodeview.comdiv><p style='text-align:center;font-size:20px;'>コンピュータ サイエンス ポータル><p style='text-align:center;font-size:20px;'>月を選択するオプション:<select name='month'> <option selected='selected'>1月オプション><option>2月オプション><option>マルショプション><option>4月オプション><option>5オプション><option>6月オプション><option>7月オプション><option>8月オプション><option>9月オプション＞<option>10月オプション><option>11月オプション><option>12 月オプション>選択>p>本文>html>>></code></td> </tr> </tbody> </table> <p></p> <i id='output-icon' title='Output'></i> <p></p> <pre class='hljs'>></pre> <p></p> <i id='copy-url-button' title='Copy Generated Ide URL'></i> <p></p> <pre class='hljs'>></pre> <p></p> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt="暫定的な dtd xhtml"><span> </span></p> <h2 id='strict-dtd'> <b> <strong>厳密な DTD:</strong> </b> <span> </span></h2> <p dir='ltr'><span>XHTML ページにマークアップ言語のみが含まれる場合は、厳密な DTD が使用されます。この属性では body タグ内の CSS プロパティが許可されないため、厳密な DTD はカスケード スタイル シートと一緒に使用されます。</span></p> <h3> <b> <strong>構文：</strong> </b> </h3> <pre class='hljs'> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'>>></pre> <p dir='ltr'> <b> <strong>例 2:</strong> </b> <span>この例では、厳密な DTD の例を使用して XHTML ドキュメントを作成するコードを示します。</span></p> <h2>html</h2> <i id='copy-code-button' title='Copy Code'></i> <p></p> <p> <i id='run-and-edit-button' title='Edit Code' lang='xml'></i> <br> </p> <p> <i id='run-code-button' lang='xml' title='Run Code and See Output'></i> </p> <p> <i id='generate-url-and-run-button' title='Run Code and Generate IDE URL' lang='xml'></i> <br> <i title='Dark Mode'></i> <br> <i id='edit-on-ide-button' title='Edit on IDE' lang='xml'></i> </p> <p></p> <table class="table"> <tbody> <tr> <td> <code class='hljs'>xml version='1.0' encoding='UTF-8'?> <html xmlns=' http://www.w3.org/1999/xhtml ' xml:lang='en' lang='en'> <head> <title>厳密な DTD XHTMLtitle> head> <body> <div>フォントの太さ:太字;テキストの配置:中央; margin-bottom:-25px;'>techcodeview.comdiv><p style='text-align:center;font-size:20px;'>コンピュータ サイエンス ポータル><p style='text-align:center;font-size:20px;'>月を選択するオプション:<select name='month'> <option selected='selected'>1月オプション><option>2月オプション><option>マルショプション><option>4月オプション><option>5オプション><option>6月オプション><option>7月オプション><option>8月オプション><option>9月オプション＞<option>10月オプション><option>11月オプション><option>12 月オプション>選択>p>本文>html>>></code></td> </tr> </tbody> </table> <p></p> <i id='output-icon' title='Output'></i> <p></p> <pre class='hljs'>></pre> <p></p> <i id='copy-url-button' title='Copy Generated Ide URL'></i> <p></p> <pre class='hljs'>></pre> <p></p> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <p><span> </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt="厳密な dtd xhtml"><span> </span></p> <h2 id='frameset-dtd'> <b> <strong>フレームセット DTD:</strong> </b> <span> </span></h2> <p dir='ltr'><span>フレームセット DTD は、XHTML ページにフレームが含まれる場合に使用されます。この DTD は、HTML 要素のコンテンツ モデルを除き、HTML 4.01 Transitional DTD と同じです。</span></p> <h3> <b> <strong>構文：</strong> </b> </h3> <pre class='hljs'> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'>>></pre> <p dir='ltr'> <b> <strong>例 2:</strong> </b> <span>この例では、フレームセット DTD の例を使用して XHTML ドキュメントを記述するコードを示します。</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-many-zeros-1-million">100万にはゼロが何個</a> </blockquote> <h2>html</h2> <i id='copy-code-button' title='Copy Code'></i> <p></p> <p> <i id='run-and-edit-button' title='Edit Code' lang='xml'></i> <br> </p> <p> <i id='run-code-button' lang='xml' title='Run Code and See Output'></i> </p> <p> <i id='generate-url-and-run-button' title='Run Code and Generate IDE URL' lang='xml'></i> <br> <i title='Dark Mode'></i> <br> <i id='edit-on-ide-button' title='Edit on IDE' lang='xml'></i> </p> <p></p> <table class="table"> <tbody> <tr> <td> <code class='hljs'>xml version='1.0' encoding='UTF-8'?>http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd '><html xmlns=' http://www.w3.org/1999/xhtml ' xml:lang='en' lang='en'> <head> <title>フレームセット DTD XHTMLtitle> head><frameset cols='30%, 20%, *'> <frameset rows='40%, 30%, *'> <frame src='gfg.html' /> <frame src='gfg1.html' /> <frame src='geeks.html' />フレームセット><frameset rows='40%, 60%'> <frame src='g4g.html' /> <frame src='g4g1.html' />フレームセット><frameset rows='20%, 20%, 30%, *'> <frame src='geeksforgeeks.html' /> <frame src='geeksforgeeks1.html' /> <frame src='geeksforgeeks2.html' /> <frame src='geeksforgeeks3.html' />フレームセット> フレームセット> html>>></code></td> </tr> </tbody> </table> <p></p> <i id='output-icon' title='Output'></i> <p></p> <pre class='hljs'>></pre> <p></p> <i id='copy-url-button' title='Copy Generated Ide URL'></i> <p></p> <pre class='hljs'>></pre> <p></p> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <h2 id='why-use-xhtml'> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-3.webp' alt="フレームセット dtd xhtml"> <b> <strong>XHTML を使用する理由</strong> </b> </h2> <ul> <li value='1'><span>XHTML ドキュメントは、標準の XML ツールを使用して検証されます。</span></li> <li value='2'><span>長期的にはドキュメントの保守、変換、編集が簡単です。</span></li> <li value='3'><span>Web ページの品質基準を定義するために使用されます。</span></li> <li value='4'><span>XHTML は W3C の公式標準であり、Web サイトは多くのブラウザーとの互換性が高まり、正確になります。</span></li> </ul> <h2 id='benefits-of-xhtml'> <b> <strong>XHTML の利点:</strong> </b> </h2> <ul> <li value='1'><span>すべての XHTML タグには終了タグがあり、正しくネストされている必要があります。これにより、よりクリーンなコードが生成されます。</span></li> <li value='2'><span>XHTML ドキュメントは無駄が少ないため、使用する帯域幅が少なくなります。これにより、特に Web サイトに数千ページがある場合にコストが削減されます。</span></li> <li value='3'><span>XHTML ドキュメントは適切にフォーマットされており、ワイヤレス デバイス、点字リーダー、その他の特殊な Web 環境に簡単に転送できます。</span></li> <li value='4'><span>新しい開発はすべて XML で行われます (XHTML はそのアプリケーションです)。</span></li> <li value='5'><span>XHTML は CSS と連携して動作し、簡単に更新できる Web ページを作成します。</span></li> </ul> <h2 id='difference-between-html-and-xhtml'> <b> <strong>HTML と XHTML の違い:</strong> </b> </h2> <table class="table"> <tbody><tr> <th><span>HTML</span></th> <th><span>XHTML</span></th> </tr> </tbody><tbody> <tr> <td><span>HTML またはハイパーテキスト マークアップ言語は、Web ページを作成するための主要なマークアップ言語です</span></td> <td><span>XHTML (Extensible HyperText Markup Language) は、広く使用されている Hypertext Markup Language (HTML) のバージョンを反映または拡張した XML マークアップ言語のファミリーです。</span></td> </tr> <tr> <td><span>柔軟な HTML 固有のパーサーを必要とする柔軟なフレームワーク</span></td> <td><span>標準の XML パーサーで解析する必要がある XML の制限されたサブセット</span></td> </tr> <tr> <td><span>1987 年にティム・バーナーズ・リーによって提案</span></td> <td><span>2000 年に World Wide Web コンソーシアムが推奨。</span></td> </tr> <tr> <td><span>標準汎用マークアップ言語 (SGML) の適用。</span></td> <td><span>XMLの応用</span></td> </tr> <tr> <td><span>SGML から拡張されました。</span></td> <td><span>XML、HTMLから拡張</span></td> </tr> </tbody> </table> <br> <br></article> </div><!--//content--> </div><!--//section-inner--> </section><!--//section--> </div><!--//primary--> <div class="secondary col-md-4 col-sm-12 col-xs-12"> <aside class="info aside section"> <div class="section-inner"> <h2 class="">カテゴリ</h2> <div class="content"> <ul class="list-unstyled"> <li> <a href="/css-misc/">Css-その他</a> </li><li> <a href="/java-generics/">Java ジェネリックス</a> </li><li> <a href="/amazon-prime-video/">Amazonプライム・ビデオ</a> </li><li> <a href="/china-gk/">中国合同会社</a> </li><li> <a href="/array-range-queries/">配列範囲クエリ</a> </li><li> <a href="/c-set-function/">C++ セット関数</a> </li><li> <a href="/java-new-features/">Javaの新機能</a> </li><li> <a href="/algebra/">代数</a> </li><li> <a href="/gblog/">gblog</a> </li><li> <a href="/dart-tutorial/">ダーツのチュートリアル</a> </li> </ul> </div><!--//content--> </div><!--//section-inner--> </aside><!--//aside--> <aside class="testimonials aside section"> <div class="section-inner"> <h2 class="heading">混合物</h2> <div class="content"> <div class="item"> <blockquote class="quote"> <span> <i class="fa fa-quote-left"></i> 混合物とは、2 つ以上の異なる種類の物質から構成される物質です。混合物には、「均一混合物」と「不均一混合物」の 2 種類があります。 「混合物とは何ですか?」などの概念をさらに学びましょう。性質、例、種類、混合物と化合物の違い、よくある質問！</span> </blockquote> </div><!--//item--> <p> <a class="more-link" href="/mixtures"> <i class="fa fa-external-link"></i> 続きを読みます</a> </p> </div><!--//content--> </div><!--//section-inner--> </aside><!--//section--> <aside class="languages aside section"> <div class="section-inner"> <h2 class="heading">興味深い記事</h2> <div class="content"> <ul class="list-unstyled"> <li class="item"> <span class="title"> <strong> <a href="/negation-discrete-mathematics">離散数学における否定</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/heap-sort-data-structures">ヒープ ソート – データ構造とアルゴリズムのチュートリアル</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/drake-net-worth-2023">ドレイク純資産2023年：シャンパン・パピはどれくらいリッチ？</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/linear-time-sorting">線形時間ソート</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/sudo-command-linux-with-examples">Linux の sudo コマンドと例</a> </strong> </span> </li><!--//item--> </ul> </div><!--//content--> </div><!--//section-inner--> </aside><!--//section--> <aside class="list music aside section"> <div class="section-inner"> <h2 class="heading">人気の投稿</h2> <div class="content"> <ul class="list"> <li><a href="/java-tostring-method">Javaのtostring</a> </li><li><a href="/selenium-tutorial">セレンのチュートリアル</a> </li><li><a href="/linux-task-manager">Linuxタスクマネージャー</a> </li><li><a href="/merge-sort-algorithm">マージソートアルゴリズム</a> </li><li><a href="/java-jlist">Javaリストボックス</a> </li> </ul> </div><!--//content--> </div><!--//section-inner--> </aside><!--//section--> </div><!--//secondary--> </div><!--//row--> </div><!--//masonry--> <footer class="footer"> <div class="container text-center"> <span> Copyright ©2025 全著作権所有 | <a href="//es.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">免責事項</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">私たちについて</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">プライバシーポリシー</a> </span> </div> </footer> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> </body> </html>