学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / HTML5(目的別) / <p>

HTML5  <p>

<p>タグは、ひとつの段落(パラグラフ)であることを表す際に使用します。
<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。 例えば、以下の使用例は誤りではありませんが…
<section>
<p>最終更新日: 2025-04-23</p>
<p>作者: [email protected]</p>
</section>
以下のようにした方が、より適切なマークアップとなるでしょう。
<section>
<footer>最終更新日: 2010-04-23</footer>
<address>作者: [email protected]</address>
</section>
あるいは、以下のようにマークアップしても良いでしょう。
<section>
<footer>
<p>最終更新日: 2010-04-23</p>
<address>作者: [email protected]</address>
</footer>
</section>

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、p要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。 HTML5では、p要素のalign属性は廃止されています。 揃え位置の指定にはCSSを使用してください。
また、HTML5では <article>・ <aside>・ <nav>・ <section> などの新しい要素が追加されているので、 これらの新しい要素のほうが段落よりも適切なケースがあるかもしれません。

■使用例

HTMLソース
<p>ユーザー登録をすると、あなた専用にカスタマイズされた操作メニューが表示されます。使い込むほどにコンテンツが最適化され、充実したサービスが得られるようになります。</p>

<fieldset>
<legend>ユーザー情報</legend>
<p>
<label>名前: <input name="n"></label>
<label><input name="anon" type="checkbox">非公開にする</label>
</p>
<p>
<label>住所: <textarea name="a"></textarea></label>
</p>
</fieldset>

<p>
あなた専用の操作メニューで、<br>
使い込むほどにコンテンツを最適化、<br>
充実したサービスのご提供をお約束、<br>
いますぐユーザー登録を!
</p>
↓↓↓
ブラウザ上の表示
リンク先のページで表示を見ることができます
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ