Different ways of writing HTML-like syntax

Rahul Jha (@rahuljha2401)

HTML-like syntax is used to refer to syntax that resemble HTML but they are not necessarily HTML itself. When elements are enclosed in tags, attributes within those tags and a hierarchical structure define the relationship within those elements, it is known as HTML-like syntax.

Examples of HTML-like syntax

Standard HTML
JSX (JavaScript Xml) : Used in React application.
TSX (TypeScript Xml) : Used in application with TypeScript.
HTML templating language : Used in Handlebars, Mustache, EJS.
Inline HTML in other file types : Can be used in PHP.
As template literals in JavaScript : Used in Angular Js and Vue Js

Standard HTML

HTML is the standard markup language for creating webpages. It can be written directly in the HTML file.

Example

      <div>
<h1>Welcome to dsabyte</h1>
<p>A place for strangers to code</p>
</div>

JSX

It stands for JavaScript Xml. It is an extension syntax for JavaScript and helps developers to write HTML-like code within JavaScript. React application uses JSX syntax.

Example

      import React from 'react'; 
function App() { 
return ( 
<div>
 <h1>Welcome to dsabyte</h1>
 <p>A place for strangers to code</p> 
</div> ); 
} 
export default App;

TSX

It stands for TypeScript Xml. It is an extension syntax for JavaScript and helps developers to write HTML-like code within TypeScript. React application, when built on TypeScript uses TSX syntax.

Example

      import React from 'react';

const App: React.FC = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is an example of TSX.</p>
    </div>
  );
}

export default App;

HTML templating language

Handlebars, Mustache, and EJS allow embedding variables and logic within HTML-like syntax. It is used to render dynamic HTML content on client-side application.

Example

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handlebars Example</title>
</head>
<body>
    <h1>Welcome to dsabyte {{name}}!</h1>
    <p>A byte wise academy.</p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
    <script>
        const source = document.querySelector('body').innerHTML;
        const template = Handlebars.compile(source);
        const context = { name: "Rahul Jha" };
        const html = template(context);
        document.body.innerHTML = html;
    </script>
</body>
</html>

Inline HTML in PHP

Different file types, like Markdown files or PHP files also support inline HTML.

Example

      <?php
echo "<h1>Hello, World!</h1>";
print "<p>This is a paragraph.</p>";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline HTML in PHP</title>
</head>
<body>
    <h1><?php echo "Welcome to dsabyte"; ?></h1>
    <p><?php echo "A byte wise academy."; ?></p>
</body>
</html>
<?php
?>

As template literals in JavaScript

HTML can be written inline within JavaScript code using backticks (`) with the support of ES6 template literals. This approach is often used in frameworks like Vue.js and AngularJS.

Example

      const template = `
    <div>
        <h1>Welcome To dsabyte</h1>
        <p>A place for strangers to code.</p>
    </div>
`;

Advantages of using HTML-like syntax

Interoperability: HTML-like syntax is compatible with a wide range of web development technologies and frameworks.
Separation of Concerns: HTML-like syntax promotes the separation of content (HTML structure) from presentation (CSS styling) and behavior (JavaScript functionality), facilitating the development of maintainable and scalable web applications.
Integration with Backend: Many server-side programming languages and frameworks support HTML-like syntax for generating dynamic content, allowing developers to seamlessly combine frontend and backend logic within the same codebase.

Summary

We learnt about what is HTML-like syntax, its various examples, usage and syntax. We also looked at its advantage.

Add a thoughtful comment...

✨ Explore more tech insights and coding wonders with @dsabyte! Your journey in innovation has just begun. Keep learning, keep sharing, and let's continue to code a brighter future together. Happy exploring! 🚀❤️

#html
#javascript
#php
#jsx
#tsx

Different ways of writing HTML-like syntax

Subscribe to our newsletter.