What is HTML?
HTML (Hypertext Markup Language) is used to design the structure of a web page and its content. HTML is actually not technically programming languages like C++, JAVA, or python. It is a markup language, and it ultimately gives declarative instructions to the browser. When a web page is loaded, the browser first reads the HTML and constructs DOM (Document Object Model) tree from it. HTML consists of a series of elements.
What is a Template Engine?
What is EJS?
Relation between HTML and EJS:
We actually define HTML in the EJS syntax and specify how and where various data will go on the page. Then the template engine combines these data and runs programming logic to generate the final HTML page. So, the task of EJS is to take your data and inserts it into the web page according to how you’ve defined the template and generate the final HTML.
For example, you could have a table of dynamic data from a database, and you want EJS to generate the table of data according to your display rules.
When to use HTML/ EJS?
It varies according to your application. If you want to render a static page then go for an HTML file and if you want to render a dynamic page where your data coming from various sources then you must choose an EJS file.
Difference between index.ejs and index.html:
|HTML file||EJS file|
|Good for the static web page.||Good for the dynamic web page.|
|It could not bind dynamic data before sending it to the browser.||Dynamic data will bind with the template then the final output will send to the browser.|
|Extension of HTML file is .html||Extension of EJS file is .ejs|
Example: Assume you have a web page to show employee’s salaries. If you create a static HTML file then you need to rewrite it every time when new employee added or salary changes. But, with EJS it becomes too easy to insert dynamic data into it.
HTML Version Code:
EJS Version Code:
Step 1: First, create a NodeJS application and install the required modules like express.js and ejs modules.
Step 2: Create an index.js file which is our basic server with the following code.
Step 3: Create an index.ejs file and put it in the views folder with the following code.
Step 4: Run the server using the following command:
Output: Now open your browser and go to http://localhost:3000/employee/salary, you will see the following output: