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
The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag). Note: You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
The Body tag is an important element that contains all the content displayed on a web page in a browser. It must be filled in correctly in order for the page to look and be successfully ranked in search engines.
"Tags" provide web browsers with instructions about the web page, such as where to display images, and how the document is structured. Tags are always enclosed in angle brackets: < >. Tags are comprised of elements and attributes.
It isn't HTML. This just takes advantage of the fact that, in order to facilitate future expansions to the language, browsers allow unknown elements to be targeted with CSS and JS. Show activity on this post. If you want use HTML5 you should replace <page></page> with <div> or <section> .
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"]
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With