Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why does CSS work with fake elements?
As a frontend developer, you should be familiar with CSS pseudo-elements, including their functions and various presentational and structural applications. The fundamental CSS selectors and their numerous attributes are enjoyable to use, but understanding pseudoclasses and pseudo-elements is the next step toward being a CSS expert.
Except CSS pseudo elements, there are some HTML elements which are commonly known as fake elements. It is sometimes used by CSS for easy handling and allowing the developers to create customized elements in your web page. However, they are not standardized so, they cannot be used globally.
In this article, we will discuss why does CSS work with fake elements? Starting the article with the explanation of what are fake elements, why we use them, how they work and many other basic aspects of fake elements.
What are fake elements?
HTML elements that aren't defined in the HTML document are referred to as fake elements. It is feasible to make false components. You can give your element any name you choose, however it is not recommended. HTML enables the developers to use self-defined elements in the web page. The element will run smoothly in your page.
Example
Have a look at the following example to understand how we use Fake elements in a HTML document.
<!DOCTYPE html>
<html>
<head>
<title> Fake Elements </title>
<style>
*{
background-color: grey;
margin: 5px;
letter-spacing: 1px;
}
.para{
font-family: cursive;
}
</style>
</head>
<body>
<section>
<heading> Programming Languages </heading>
<p class= "para"> To communicate with computers, programmers (developers) use a programming language, which is a computer language. It is a set of instructions written in a specific language (such as C, C++, Java, or Python), built to do a certain task. </p>
<example> Some of the most popular programming languages are: </example> <br>
<p>
<ol>
<li> <h1> C/C++ </h1> </li>
<li> <h1> Java </h1> </li>
<li id= "demo"> <h1> Python </h1> </li>
<li> <h1> JavaScript </h1> </li>
<li> <h1> PHP </h1> </li>
</ol>
</p>
</section>
</body>
</html>
As we can see in the above example, we have used our own elements like <heading> and <example>. The code is executed smoothly and the text is displayed. However, we have to style them according. For instance, if we used the HTML recognised element (h1) instead of <heading>, the text would automatically have bigger font size. To do so for a fake element, we have to specify the font size using the CSS.
Example
In this example, we have declared certain CSS properties to the fake elements <heading> and <example>.
<!DOCTYPE html>
<html>
<head>
<title> Fake Elements </title>
<style>
*{
background-color: yellow;
margin: 5px;
letter-spacing: 1px;
}
heading{
color: black;
text-decoration: underline;
text-shadow: 4px 4px 4px grey;
font-size: 28px;
}
.para{
font-family: cursive;
}
example{
color: red;
font-weight: 900;
}
</style>
</head>
<body>
<section>
<heading> <h1 class= "head"> Programming Languages </h1> </heading>
<p class= "para"> Programmers (developers) utilise a programming language, which is a computer language, to communicate with computers. It is a set of guidelines created in any particular language (C, C++, Java, Python), developed to carry out a certain task. </p>
<example> Some of the most popular programming languages are: </example> <br>
<p>
<ol>
<li> <h1> C/C++ </h1> </li>
<li> <h1> Java </h1> </li>
<li id= "demo"> <h1> Python </h1> </li>
<li> <h1> JavaScript </h1> </li>
<li> <h1> PHP </h1> </li>
</ol>
</p>
</section>
</body>
</html>
We have added CSS styling to the fake elements. The code is executed smoothly and there are no issues in the styling. The question arises that how can these fake elements work in the HTML document.
The answer is: With the increasing advancement in HTML features, most of the modern browsers have become compatibles to many of the changes or additions in its functionality. So, unrecognised elements are directly parsed into the DOM tree. However, they do not render any function or speciality.
Why should we not use fake elements?
Although, fake elements work properly in a webpage, it is highly recommended not to use fake elements in a HTML document. Given below are some of the reasons on why we should not use fake elements −
HTML specifications do not support and recognise these fake elements.
These elements do not have specified functions. Like text within a <header> has a predefined font size, fake elements cannot give access to such functionalities.
They might hinder the functioning of future standard elements (if developed) which have same name as that of the fake elements.
With rapidly modified versions of HTML, there is a possibility that a particular standard element exists in the DOM which is best suited for that specific function.
These tags may render compatibility issues in different browsers. Also, browsers render the standard elements faster. So, your webpage will run smoothly.
Standard HTML elements offer various advantages like SEO (Search Engine Optimization) and speed. They are preferred by popular browsers like Google.
Using fake elements shows lack in professionalism (for some developers). Standard elements are easy to maintain. Also, it allows further modifications (if needed).
Using standard HTML elements will make debugging easier. This is because standard elements can be easily accessed by debugging tools.
Conclusion
It is possible to make your own elements in a HTML document. However, they do not have any added semantics or functionalities. Also, these elements cannot be globally understood or used by all the developers. So, it is better to use standard HTML elements which facilitates various advantages over fake elements.
110 Views
