As I’m working on a displayed on a page (still in Draft) on WordPress, something weird happened :
Nothing about this is weird or unexpected, but it would be if you were unaware of the DOM.
While I’ve written this very simple code on my editor :
This is raw HTML text sent from your server.
…some extra code appeared while I’m inspecting it (actually the element) :
Incorrect, this is not your HTML that you wrote on the server, this is the DOM, converted back into HTML text for your benefit in the user interface. The browser does not hold a HTML text chunk in memory, it parses and processes it first.
What’s going on?
What you see in the browser dev tools is not the raw HTML the server sent, or even the HTML that’s being rendered, it’s a representation of the DOM, the document object model.
Your browser has taken that raw HTML and turned it into a tree of nodes, filling in gaps along the way. E.g. all webpages have a html and body node, and if you don’t use a <body> or <html> tag in the raw source code the browser inserts one automatically.
Likewise all tables have a table body, wether you write the tag or not, the browser will assume everything inside <table> is the table body if you don’t explicitly include it to try and be helpful, and because it’s rare that a HTML document passes validation and is perfectly written.
Browsers are forgiving, and what you see on the page is the visual representation of a processed and parsed HTML document, turned into objects/nodes. The HTML you see in the browser dev tools is new HTML generated from that DOM tree it held in memory.
Take a look directly at the raw HTML source code sent by your server and you’ll see there is no <tbody> tag, but even if there was it’s still standard HTML that’s been there in the spec for decades. Also take a look at table headers ( aka <thead> )