3

I am no expert in coding, so I decided to ask about two things I can't find answers to.

Do the empty spaces and comments in HTML code affect page rendering? I use a template as my personal website. In order to understand everything I've done so far in HTML files, I comment a lot. I also use ENTER SPACES between sections, so I can see everything clearly.

I've read about removing comments from CSS and HTML files, but didn't find a reason to do so.

PEAE
  • 43
  • 4
  • 1
    No, they do not affect how the page is rendered—after all, they're whitespace and comments – Andrew Li Apr 02 '17 at 04:39
  • 2
    You can't test this yourself by creating two HTML fies (one with whitespace and comments and one without) to see if they render the same? How ever did people learn anything before SO existed and you could run to ask a question that takes five minutes or less to figure out yourself with almost no effort? Here's how simple it would be: Create a file without any extra whitespace or comments. Make a copy. Add whitespace and comments to the copy. Open each one in side by side browser windows and see if they're the same. Ten minutes max. – Ken White Apr 02 '17 at 04:39
  • A small demo showing commented and un commented page https://jsfiddle.net/vm82p0f7/ Note: Comment removes the space b/w the divs and hence this change takes place – Akshay Apr 02 '17 at 04:50
  • 1
    I uderstand that whitepsaces and comments don't affect downloading of my wbesite to other people devices, right? I didn't want to upset anybody with my question. I wasn't sure if file size matters. I understand that You (pro) may think that I've done nothing to find an answer, but trust me - I could say the same about You regarding things I am good at. Thank You all for Your answers. – PEAE Apr 02 '17 at 04:57

1 Answers1

4

Inter-element whitespace can affect inline layout in CSS, most (in?)famously demonstrated in questions like How to remove the space between inline-block elements? that seem to treat it as some sort of virulent plague that must be eradicated. As long as you're not abusing inline layout for things it wasn't meant for, though, you'll find whitespace to be an asset rather than a hurdle in inline layout. See also the white-space property.

Inter-element whitespace has no effect on any other kind of layout in CSS. Not block layout, table layout, float layout, flex layout, nada. If it does, it's a browser bug.

Provided there is no inter-element whitespace outside of a comment (between it and any elements), comments should have no effect on any layout. The following fragments are equivalent:

<div></div><!--

Here be dragons

--><div></div>

<div></div><div></div>

Some versions of Internet Explorer (particularly the older ones) may build DOM trees incorrectly in the presence of comments, but such issues are few and far between and not worth worrying about until you encounter one yourself.

The main reason for stripping comments and insignificant whitespace from HTML is to cut down on file size. Even if you're using tabs and not spaces for indentation, they do add up. However since minifiers don't have knowledge of layout in CSS, they won't be able to tell you if removing a certain space will have adverse effects on layout.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356