Why does CSS work with fake elements ?

Last Updated : 01 Jun, 2022

CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.

In this article, we are going to learn about CSS work with fake elements.

Fake elements: Fake elements are elements in HTML that are not specified in the HTML document. It is possible to create fake elements. Just create an element with any name you want to but it is not recommended to use. let us see why it is not recommended to use.

Example 1: In the below example, we have created some fake elements. We have created one element named "GeeksforGeeks" and it is working fine with the browser.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks</title>
    <style>
        body {
            text-align: center;
        }

        GeeksforGeeks {
            color: green;
            font-size: 60px;
        }
    </style>
</head>

<body>
    <GeeksforGeeks>GeeksforGeeks</GeeksforGeeks>
</body>

</html>

Output:

Why CSS is working with this element?

This is because some browsers are designed to be compatible with future additions to HTML and unrecognized elements are parsed into the DOM but have no functions. Let us see the default functionality of the fake element.

Example 2: In the below example, we will see the default functionality of fake elements.

HTML

<!DOCTYPE html>
<html>

<head>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            font-size: 60px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <GeeksforGeeks>GeeksforGeeks</GeeksforGeeks><br>
    <is>GeeksforGeeks</is><br>
    <a>GeeksforGeeks</a><br>
    <computer>GeeksforGeeks</computer><br>
    <science>GeeksforGeeks</science><br>
    <portal>GeeksforGeeks</portal><br>
    <for>GeeksforGeeks</for><br>
    <geeks>GeeksforGeeks</geeks><br>

</body>

</html>

Output:

We recommended not to use fake elements for developing any web page because of the following reason: