HTMLでコーディングしているときに、改行を表すタグとして
<br> と <br /> のどちらを使えばよいか迷ったことはありませんか？
結論から言えば、<br> は HTML、<br /> は XHTML の書き方 という違いがあります。
それぞれの特徴や使い分けについて整理してみましょう。
1. <br> と <br /> の基本的な違い
-
<br>
-
HTMLの標準的な改行タグ
-
開始タグだけで完結する「空要素」として扱われる
-
<br />
2. XHTMLでの記述例
XHTMLでは以下のように書きます。
<br /> のスラッシュ前には スペースを入れる ことが推奨されていました。
3. HTML5における扱い
現在主流の HTML5 では、<br> も <br /> もどちらも有効です。
ただし、HTML5はXML準拠を必須としていないため、よりシンプルな <br> が一般的に使われています。
4. 実務での使い分け
プロジェクトのコーディング規約に合わせることが最優先です。
まとめ
初心者は「基本は <br>、XHTMLの場合は <br />」と覚えておくと安心です。
🔧 補足：HTML仕様と実運用のポイント
現在のブラウザでは、<br> と <br /> のどちらも同じように改行を行います。
ただし、HTML5では「どちらの記法も許可」されていますが、XHTML互換性を意識する場合は <br /> のようにスラッシュを付けた自己終了タグを用いるのが安全です。
特に以下のようなケースでは注意しましょう：
実務上は「HTMLの書き方ポリシー」に合わせて統一することが大切です。
チーム開発では、コーディング規約に沿って記法を統一しておくと、可読性や保守性が向上します。
例えば、あなたが訪問したホームページでこの用語でサイト内検索したいけどサイト内検索ボックスが設置されてなくて検索出来ない！と思うことがあると思います。こういう場合はGoogleの検索オプションを使用すると簡単にサイト内検索が実施出来ます。検索オプションは他にも色々と用意されているので覚えておくと便利かも。
| No | 検索オプション | 用途（概要） | 使用例 |
| 1 | allintitle: | ページのタイトルのみを検索対象とします。 | allintitle:資格 |
| 2 | allinurl: | 指定したURLを検索対象とします。 | allinurl:write-remember.com |
| 3 | cache: | キャッシュされた文書内で検索語を強調表示します。 | cache:write-remember.com |
| 4 | define: | クエリの先頭に 「define:」 と付けると、
その後に書かれた単語群の定義を検索します。 | define:資格 |
| 5 | filetype: | 指定した種類のファイルのみ表示します。 | filetype:pdf |
| 6 | info: | 指定したウェブページについてのバックグラウンド情報を
表示します。 | info:write-remember.com |
| 7 | intitle: | ウェブページのタイトルでのみ検索します。 | intitle:資格 |
| 8 | inurl: | URLに含まれるべき単語に一致するページを表示します。 | inurl:write |
| 9 | site: | 指定したドメイン内でのみ検索する。（サイト内検索用） | site:write-remember.com \資格\" |
| 資格 site:write-remember.com" | | | |
| １0 | stocks: | 株式市場での銘柄略称として検索します。 | site:google |
| 11 | related: | 指定したウェブページに「似ている」ウェブページを
一覧表示します。 | related:write-remember.com |
Webページを作成していると、ブラウザバック（ブラウザの戻るボタン押下）時に有効期限切れのメッセージが表示される事があります。今回はこの事象についてまとめてみようと思います。
何故「ページの有効期限切れ」対策が必要なのか？
そもそも何故、ページの有効期限切れ対策が必要となるのでしょうか？
正直、個人的にはブラウザによるセキュリティ対策で個人情報をキャッシュさせない為の制御なので、ブラウザ仕様になるのでAP側では対処不要と考えています。
それでも業務用APなどではクライアント側が納得してくれないケースも多いと思われます。それは何故でしょうか？
- まず、格好と見栄えが悪い。
- 戻るボタンを押したのだから、当然直前の入力画面へ戻るだろうと勝手に思い込んでいる。
- ユーザから見れば意味不明の画面が表示されているので、何か異常があったのかと思う。
大体、こんなところでしょうか。
「ページの有効期限切れ」が発生する原因
- POSTでパラメータ送信している
- SESSIONを使用している
- 上記を使用しているページへ戻ろうとしてブラウザの「戻る」ボタンを押下した
ブラウザ側では「ページの有効期限切れ」を表示する際、どこをチェックするのか
多くのブラウザではページ有効期限を確認する際、以下の「HTTPヘッダー」の設定値を確認します。
- Last-Modified：最終更新日
- Expires：有効期限
- pragma ：HTTP1.0仕様に基づくデータのキャシュ制御オプション
- Cache-Control：HTTP1.1仕様に基づくデータのキャシュ制御オプション
ページの有効期限切れが発生した場合、まずHTTPヘッダーの設定値が現在どうなっているか確認して下さい。
対策
クライアント側
サーバ（AP）側
- ブラウザの戻るボタンを無効又は非表示にしてしまう。
仮に有効期限切れの事象を回避出来てたとしても、DB更新後にブラウザバックされた場合など、ブラウザバックによって他にも問題が出てくる可能性が高いと思われます。AP側で一番良い対処法と思われるのはブラウザの戻るボタンがユーザの目立つ位置に見えているからつい押下してしまうので、戻るボタンを無効化又は非表示にしてしまうことが一番確実な対処方法と思われます。但しクライアントが納得すればの話ですが。
- POSTではなくGETを使用する。
ブラウザではPOSTは警告を出力しますが、GETではそのまま画面遷移します。但し、POST時にパスワードなどの個人情報や大量のデータを送信している場合はオススメしません。
- HTTPヘッダーの設定値を見直す。
HTTPヘッダーの設定値を変更する事で、ブラウザ側の有効期限チェックを回避する事が出来ます。
「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。
