Menu
I noticed when looking at a webpage in Chrome that the <head> tag had the CSS {display: none;} assigned.
This got me thinking, is the <head> tag just a regular tag that browsers decide not to display
Even though this would have no obvious use, could I instead use a <cheese> tag in the place of the <head> tag and use the css "cheese {display: none;}", to achieve the same function as a <head> tag?
246
<head> and display:none
Yes, the <head> tag is a regular tag just like any others with the default user agent stylesheet having display:none; applied to it. I cool trick you can do to prove this is to show your styles:
jsFiddle
head,
style {
display:block;
}
For extra fun you can add contenteditable to your head tag so you can edit the page's styles from within the page.
jsFiddle
<cheese>As for creating some random tag like <cheese>, this does not work (well may not) as expected because the browser is not expecting it. When you do things in HTML that aren't in the specification it may not be handled in a standard way.
An example of this is when you attempt to use the new HTML5 semantic tags (<section>, <nav>, ...) in older versions of IE, they don't recognise them and garble the page up. Bringing in Modernizr applies some polyfills to fix this and emulate a regular <div>.
97
In terms of pure display - yes {display:none;} will hide your element.
However HTML <head> has a distinct meaning in HTML as a container for the head elements, whereas <cheese> does not share this.
Browsers know it's not to be displayed and search engine crawlers understand the special meaning of the <head> tag.
32
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
