スッキリと読みやすいコードを目指す!HTML、XML、XHTMLにおける「Space Before Closing Slash ?」

2024-04-02

HTML、XML、XHTMLにおける「Space Before Closing Slash ?」

Space Before Closing Slash ? は、終了タグにおけるスラッシュ(/)の直前にスペースを入れるかどうかという問題です。

HTML

HTMLでは、終了タグにおけるスラッシュの直前にスペースを入れることは必須ではありません。以下、2つの書き方はどちらも正しいです。

<p>This is a paragraph.</p>
<p>This is a paragraph</p>

しかし、多くのスタイルガイドでは、一貫性と可読性を向上させるために、スペースを入れることを推奨しています。

XML

<p>This is a paragraph.</p>
<p>This is a paragraph</p>  ```

### 3. XHTML

XHTMLはHTMLの厳格なサブセットであり、XMLの規則に従います。そのため、終了タグにおけるスラッシュの直前にスペースを入れることは**必須です**。

### 4. まとめ

| 言語 | スペース | 例 |
|---|---|---|
| HTML | 必須ではない | `<p>This is a paragraph.</p>` |
| | | `<p>This is a paragraph</p>` |
| XML | 必須 | `<p>This is a paragraph.</p>` |
| XHTML | 必須 | `<p>This is a paragraph.</p>` |

スペースを入れるかどうかは、個人の好みやスタイルガイドによって異なります。しかし、多くの場合、スペースを入れる方が可読性が高くなります。


**参考資料**

* HTML 5.2 Specification: [無効な URL を削除しました]
* XML 1.0 Specification: [無効な URL を削除しました]
* XHTML 1.0 Specification: [https://www.w3.org/TR/xhtml1/](https://www.w3.org/TR/xhtml1/)



HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルページ</title>
</head>
<body>
  <h1>見出し1</h1>
  <p>これは段落です。スペースを入れるかどうかは、個人の好みやスタイルガイドによって異なります。しかし、多くの場合、スペースを入れる方が可読性が高くなります。</p>
  <h2>見出し2</h2>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ul>
</body>
</html>

XML

<?xml version="1.0" encoding="UTF-8"?>
<document>
  <title>サンプル文書</title>
  <author>Bard</author>
  <date>2024-04-02</date>
  <content>
    <p>これは段落です。XMLでは、終了タグにおけるスラッシュの直前にスペースを入れることは必須です。</p>
  </content>
</document>

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルページ</title>
</head>
<body>
  <h1>見出し1</h1>
  <p>これは段落です。XHTMLでは、終了タグにおけるスラッシュの直前にスペースを入れることは必須です。</p>
  <h2>見出し2</h2>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ul>
</body>
</html>



他の方法

自動整形ツール

オンラインツール

いくつかのオンラインツールでは、コードを入力すると、自動的にスペース Before Closing Slash を修正してくれます。

手動修正

コード量が少ない場合は、手動で修正することも可能です。

注意点

  • スペース Before Closing Slash の問題は、コードの動作に影響を与えるものではありません。
  • 一部の古いブラウザでは、スペース Before Closing Slash がないとエラーが発生する可能性があります。
  • コードの可読性を向上させるためには、一貫性のある方法でスペース Before Closing Slash を適用することが重要です。

スペース Before Closing Slash は、HTML、XML、XHTMLにおけるコーディングスタイルに関する問題です。必須ではないものの、多くの場合、スペースを入れる方が可読性が高くなります。

上記の方法を参考に、自分に合った方法でスペース Before Closing Slash を解決してください。


html xml xhtml


JavaScript/HTML/CSSで「Wait cursor over entire html page」を実現する方法

CSSのみを使用する方法は、最もシンプルで簡単です。以下のコードをHTMLファイルの <head> 要素内に追加します。このコードは、body 要素のカーソルを wait に設定します。wait カーソルは、ブラウザによって異なりますが、一般的には砂時計のようなアニメーションが表示されます。...


HTMLとCSSでテキストとは異なる色の取り消し線を設定する方法

CSS3では、text-decoration-color プロパティを使用して、テキスト装飾の色を個別に設定することができます。この方法は、最も簡単で直感的な方法です。上記の例では、strikethrough クラスを持つ要素のテキストには、赤い取り消し線が設定されます。...


もう迷わない!HTML属性の引用符エスケープ:3つの方法と注意点

この問題を解決するには、エスケープと呼ばれる手法を使用します。エスケープとは、特殊文字を無害な文字に変換するプロセスです。HTML 属性値の場合、引用符 (") とアポストロフィ (') をエスケープする必要があります。エスケープ方法引用符をエスケープするには、バックスラッシュ (\) を使用します。バックスラッシュは、次の引用符が特殊文字ではなく、リテラルとして解釈されることをブラウザに指示します。...


【初心者向け】HTML textarea要素の初期値を簡単設定!デフォルト値を設定する方法

textarea要素にデフォルト値を設定するには、以下の2つの方法があります。value属性を使用するvalue属性は、textarea要素の初期値を指定するために使用されます。この属性の値は、textarea要素内に表示されるテキストになります。...


Angular2でキー入力を監視!keyupイベントを使いこなして、自由自在なアプリケーション開発

この解説では、Angular2 テンプレートで (keyup) イベントを使用する際のオプションについて、分かりやすく日本語で解説します。(keyup) イベントとはkeyup イベントは、ユーザーがキーボードのキーを押してから離したときに発生するイベントです。これは、入力フォームやテキストエリアなどの要素でよく使用されます。...


SQL SQL SQL SQL Amazon で見る



【徹底解説】HTML5における改行:、、 の違いと使い分け

<br>:最も簡潔な表記で、HTML4. 01から使用されています。<br/>:XMLの構文に則った表記で、XHTMLでは必須でした。<br />:<br/>とほぼ同じですが、最後のスペースは省略可能です。一般的には、以下の点を考慮して選ぶと良いでしょう。