: The Paragraph Element - HTML: HyperText Markup Language

Trang chủ » Html P Tag Alternative »

: The Paragraph Element - HTML: HyperText Markup Language

Có thể bạn quan tâm

  1. References
  2. HTML
  3. Elements
  4. <p>
Article Actions
  • English (US)
    • Remember language
    • Deutsch
    • Español
    • Français
    • 日本語
    • 한국어
    • Português (do Brasil)
    • Русский
    • 中文 (简体)
    • 正體中文 (繁體)
  • Try it
  • Attributes
  • Accessibility
  • Examples
  • Styling paragraphs
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also
  1. HTML
  2. Beginner's tutorials
    1. Your first website: Creating the content
    2. Structuring content with HTML
      1. Basic HTML syntax
      2. What's in the head? Webpage metadata
      3. Headings and paragraphs in HTML
      4. Emphasis and importance
      5. Lists
      6. Structuring documents
      7. Advanced text features
      8. Creating links
      9. Challenge: Marking up a letter
      10. Challenge: Structuring a page of content
      11. HTML images
      12. HTML video and audio
      13. Challenge: Mozilla splash page
      14. HTML table basics
      15. HTML table accessibility
      16. Challenge: Structuring a planet data table
      17. Forms and buttons in HTML
      18. Debugging HTML
  3. Guides
    1. Content categories
    2. Block-level elements
    3. Inline elements
    4. Quirks Mode and Standards Mode
    5. Date and time formats used in HTML
    6. Constraint validation
    7. Microdata
    8. Microformats
    9. Viewport meta tag
    10. Allowing cross-origin use of images and canvas
  4. References
  5. HTML elements
    1. <a>
    2. <abbr>
    3. <acronym> Deprecated
    4. <address>
    5. <area>
    6. <article>
    7. <aside>
    8. <audio>
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big> Deprecated
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. <canvas>
    19. <caption>
    20. <center> Deprecated
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. <datalist>
    27. <dd>
    28. <del>
    29. <details>
    30. <dfn>
    31. <dialog>
    32. <dir> Deprecated
    33. <div>
    34. <dl>
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe> Experimental
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font> Deprecated
    43. <footer>
    44. <form>
    45. <frame> Deprecated
    46. <frameset> Deprecated
    47. <h1>
    48. <head>
    49. <header>
    50. <hgroup>
    51. <hr>
    52. <html>
    53. <i>
    54. <iframe>
    55. <img>
    56. <input>
    57. <ins>
    58. <kbd>
    59. <label>
    60. <legend>
    61. <li>
    62. <link>
    63. <main>
    64. <map>
    65. <mark>
    66. <marquee> Deprecated
    67. <menu>
    68. <meta>
    69. <meter>
    70. <nav>
    71. <nobr> Deprecated
    72. <noembed> Deprecated
    73. <noframes> Deprecated
    74. <noscript>
    75. <object>
    76. <ol>
    77. <optgroup>
    78. <option>
    79. <output>
    80. <p>
    81. <param> Deprecated
    82. <picture>
    83. <plaintext> Deprecated
    84. <portal> Experimental
    85. <pre>
    86. <progress>
    87. <q>
    88. <rb> Deprecated
    89. <rp>
    90. <rt>
    91. <rtc> Deprecated
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <slot>
    100. <small>
    101. <source>
    102. <span>
    103. <strike> Deprecated
    104. <strong>
    105. <style>
    106. <sub>
    107. <summary>
    108. <sup>
    109. <table>
    110. <tbody>
    111. <td>
    112. <template>
    113. <textarea>
    114. <tfoot>
    115. <th>
    116. <thead>
    117. <time>
    118. <title>
    119. <tr>
    120. <track>
    121. <tt> Deprecated
    122. <u>
    123. <ul>
    124. <var>
    125. <video>
    126. <wbr>
    127. <xmp> Deprecated
  6. Global attributes
    1. accesskey
    2. anchor Experimental Non-standard
    3. autocapitalize
    4. autocorrect Experimental
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. hidden
    14. id
    15. inert
    16. inputmode
    17. is
    18. itemid
    19. itemprop
    20. itemref
    21. itemscope
    22. itemtype
    23. lang
    24. nonce
    25. part
    26. popover
    27. slot
    28. spellcheck
    29. style
    30. tabindex
    31. title
    32. translate
    33. virtualkeyboardpolicy Experimental
    34. writingsuggestions
  7. Attributes
    1. accept
    2. autocomplete
    3. capture
    4. crossorigin
    5. dirname
    6. disabled
    7. elementtiming
    8. for
    9. max
    10. maxlength
    11. min
    12. minlength
    13. multiple
    14. pattern
    15. placeholder
    16. readonly
    17. rel
    18. required
    19. size
    20. step
  8. <input> types
    1. <input type="button">
    2. <input type="checkbox">
    3. <input type="color">
    4. <input type="date">
    5. <input type="datetime-local">
    6. <input type="email">
    7. <input type="file">
    8. <input type="hidden">
    9. <input type="image">
    10. <input type="month">
    11. <input type="number">
    12. <input type="password">
    13. <input type="radio">
    14. <input type="range">
    15. <input type="reset">
    16. <input type="search">
    17. <input type="submit">
    18. <input type="tel">
    19. <input type="text">
    20. <input type="time">
    21. <input type="url">
    22. <input type="week">
  • Try it
  • Attributes
  • Accessibility
  • Examples
  • Styling paragraphs
  • Technical summary
  • Specifications
  • Browser compatibility
  • See also

The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag. See "Tag omission" below.

Try it

Attributes

This element only includes the global attributes.

Note: The align attribute on <p> tags is obsolete and shouldn't be used.

Accessibility

Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.

Using empty <p> elements to add space between paragraphs is problematic for people who navigate with screen-reading technology. Screen readers may announce the paragraph's presence, but not any content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.

If extra space is desired, use CSS properties like margin to create the effect:

cssp { margin-bottom: 2em; /* increase white space after a paragraph */ }

Examples

HTML

html<p> This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. </p> <p> This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. </p>

Result

Styling paragraphs

By default, browsers separate paragraphs with a single blank line. Alternate separation methods, such as first-line indentation, can be achieved with CSS:

HTML

html<p> Separating paragraphs with blank lines is easiest for readers to scan, but they can also be separated by indenting their first lines. This is often used to take up less space, such as to save paper in print. </p> <p> Writing that is intended to be edited, such as school papers and rough drafts, uses both blank lines and indentation for separation. In finished works, combining both is considered redundant and amateurish. </p> <p> In very old writing, paragraphs were separated with a special character: ¶, the <i>pilcrow</i>. Nowadays, this is considered claustrophobic and hard to read. </p> <p> How hard to read? See for yourself: <button data-toggle-text="Oh no! Switch back!"> Use pilcrow for paragraphs </button> </p>

CSS

cssp { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; }

JavaScript

jsdocument.querySelector("button").addEventListener("click", (event) => { document.querySelectorAll("p").forEach((paragraph) => { paragraph.classList.toggle("pilcrow"); }); [event.target.innerText, event.target.dataset.toggleText] = [ event.target.dataset.toggleText, event.target.innerText, ]; });

Result

Technical summary

Content categories Flow content, palpable content.
Permitted content Phrasing content.
Tag omission The start tag is required. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, h1, h2, h3, h4, h5, h6, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <pre>, <search>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a>, <audio>, <del>, <ins>, <map>, <noscript> or <video> element, or an autonomous custom element.
Permitted parents Any element that accepts flow content.
Implicit ARIA role paragraph
Permitted ARIA roles Any
DOM interface HTMLParagraphElement

Specifications

Specification
HTML Standard # the-p-element

Browser compatibility

BCD tables only load in the browser

See also

  • <hr>
  • <br>

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Jul 26, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html P Tag Alternative