Different ways of writing HTML-like syntax

Different ways of writing HTML-like syntax


0






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

Subscribe to our newsletter.

Join the "News Later" community by entering your email. It's quick, it's easy, and it's your key to unlocking future tech revelations.

Weekly Updates

Every week, we curate and deliver a collection of articles, blogs and chapters directly to your inbox. Stay informed, stay inspired, and stay ahead in the fast-paced world of technology.

No spam

Rest assured, we won't clutter your inbox with unnecessary emails. No spam, only meaningful insights, and valuable content designed to elevate your tech experience.

© 2024 @dsabyte. All rights reserved