Commented HTML displays anyways?

MDN Learn
#1

I have a question about a webpage I found “in the wild”. I’m looking at this page: https://www.sports-reference.com/cfb/schools/ohio-state/2021.html#all_defense_and_fumbles and in particular, the table for Defenses & Fumbles. However, when I view the page source, that entire table is actually in a big comment! So how come I can see it on the webpage anyways?

Is it something to do with the classes of the div a little above? (it has “setup_commented” and “commented” and “table_wrapper”). Or is this some fancy JavaScript feature? Or something else?

#2

Hi @abro and welcome back :wave:

The table you see on the page is right below this large comment. I compared the code of the comment and the real table code and it seems that they just made a new version with some changes. My guess is that they were scared to delete the old code, yet. :wink:

They repeated the table headers after the 35th player and added a data-row attribute on every <tr> in <tbody>. Those parts are missing from the commented out code.

By the way: If you right click somewhere on the table and select “Inspect” the browser DevTools open and show you the source of the clicked element.

Have a nice day,
Michael

#3

Thanks Michael! That solved my mystery—I was looking at the code via “View Page Source”, which I hadn’t realized was different from the “Inspect” tool (the page source doesn’t have the 2nd, uncommented table). I haven’t really gotten to learning JavaScript yet, but I’m guessing that this means that there is some script that takes the comment, inserts that repeated table header & extra data-row stuff, and inserts it into the live page.

Thanks again for the help! I was very stumped before you commented :sweat_smile:

1 Like
#4

I’m glad I could help. :smiley:

Yes, that’s true. “View Page Source” shows just the content of the .html file. The “inspector” is a live view of the HTML. There are pages where you don’t see much in “View Page Source”, because all the stuff gets loaded by JavaScript. See for example the source of https://codepen.io/.

2 Likes