When does whitespace matter in HTML?

by

The reality is somewhat complicated. There are two parts

  1. What the parsing does.
  2. What the rendering does.

The parsing actually removes very little white space whilst parsing text (as opposed to markup). It will remove an initial line feed character at the start of <textarea> and <pre> elements and also on the invalid <listing> element, but that’s about it.

Jukka refers to the HTML 4.01 section B.3.1 Line breaks saying that “a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag” but that is in a non-normative appendix and browsers do not follow it except for the three elements mentioned above.

That can be demonstrated using Jukka’s example here on line breaks with no spaces . Note the #text: nodes around the button elmeents in the tree display, and that if the line breaks are removed, the ‘#text:` nodes no longer appear.

We can also see that the rule is not applied by using that first example from the specification here. By adding display:pre it’s clear that the line breaks are not exactly ignored but that the rendering the two examples the same is merely a property of the default white-space handling being white-space:normal

Which brings us to the relevant spec, which is 16.6.1 The ‘white-space’ processing model in the CSS spec. This covers the systematic rules to be applied to the text characters for each of the white-space setting values.

More Related Contents:

  1. Ignore whitespace in HTML [duplicate]
  2. Render a string in HTML and preserve spaces and linebreaks
  3. Why does HTML require that multiple spaces show up as a single space in the browser?
  4. HTML/CSS – Best practice for preserving white space on certain elements?
  5. Specifying Tab-Width?
  6. Extra space under textarea, differs along browsers
  7. Is whitespace allowed within XML/HTML tags?
  8. How to preserve whitespace indentation of text enclosed in HTML tags excluding the current indentation level of the tag in the document?
  9. Two column width 50% css [closed]
  10. CSS Pseudo-classes with inline styles
  11. Are the decimal places in a CSS width respected?
  12. Can I set subject/content of email using mailto:?
  13. Can HTML checkboxes be set to readonly?
  14. How to apply a style to an embedded SVG?
  15. How to allow http content within an iframe on a https site [duplicate]
  16. Detect click outside Angular component
  17. Browser Caching of CSS files
  18. How to change scroll bar position with CSS?
  19. How to remove focus around buttons on click
  20. How do I set the HTML options for collection_select in Rails?
  21. How to prevent text from overflowing in CSS?
  22. Why are Bootstrap’s form elements rendered terribly with Struts2-Boostrap-Plugin?
  23. Format HTML table cell so that Excel formats as text?
  24. How to keep :active css style after click a button
  25. Make a perfect circle around a div of variable height
  26. Can I use an HTML input type “date” to collect only a year?
  27. align images side by side in html
  28. Removing the Bevel Effect on the Corner of Borders
  29. CSS class starting with number is not getting applied
  30. Are void elements and empty elements the same?

Leave a Comment