css - HTML - What is the <page> tag doing?

Question

I've been playing with getting a HTML document to display in A4 size and using the code in this codepen works perfectly:

https://codepen.io/rafaelcastrocouto/pen/LFAes

CSS

body {
  background: rgb(204,204,204); 
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  }

page[size="A4"] {  
  width: 21cm;
  height: 29.7cm;
} 

HTML

<page size="A4"></page>

However, I'm not sure how or why declaring page and page [size information] in CSS allows you to use the tag in HTML. In fact, I can find any reference to a HTML page tag anywhere.

Can someone please explain how the code is working in the codepen? Thanks in advance

Answer 1

I do not believe that <page> is an actual HTML element.

When the browser sees this, it probably thinks it is getting old and missing out on new inventions that didn't exist when the browser was released.

In that case it is treated like a <div>, and CSS rules still apply.

But really it's best to stick to elements that really exist, instead of pretending they will some day, because in the future the implementations of newly created tags could be different than you expect.

It would have been better to be written as <div class="page" data-size="A4"> with the CSS looking for div.page and div.page[data-size="A4"].