Paragraphs & Line Breaks (<p>, <br>)

When To Use

  • Use the <p> element to create a block of text that semantaically belongs together. Correctly used <p> elements can help assistive technology users navigate text. 1
  • Use the <br> element to introduce a line break in text that requires a particular format, such as a poem or an address, as a means of ensuring the desired layout. 3

Rules

  • Don‘t use the <p> element if a more suiting, more semantic elements exists. 2
  • Don‘t use <p> elements solely for styling purposes. The use should always be semantically meaningful. For example don‘t implement an empty <p> element just to create whitespace.
  • Don‘t use the <br> element to create space between independent text (text that does not belong together like an address or poem) or for other styling reasons. Use the <p> element or CSS styling instead. 4
  • For some notes about text layout, like text alignment, margins, line length see this sentence source. 5

Sources 

  1. MDN: <p>: The Paragraph element by Mozilla contributors is licensed under CC-BY-SA 2.5
  2. HTML Spec: 4.4.1 The p element is licensed under Creative Commons Attribution 4.0 International License
  3. MDN: <br>: The Line Break element by Mozilla contributors is licensed under CC-BY-SA 2.5
  4. HTML Spec: Living Standard, 4.5 Text-level semantics, br is licensed under Creative Commons Attribution 4.0 International License
  5. WebAIM: Text/Typographical Layout © WebAIM
Created at: 24.06.2023, Last updated at: 24.06.2023