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.
HTML is the standard markup language for creating webpages. It can be written directly in the HTML file.
<div>
<h1>Welcome to dsabyte</h1>
<p>A place for strangers to code</p>
</div>
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.
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;
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.
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;
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.
<!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>
Different file types, like Markdown files or PHP files also support inline HTML.
<?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
?>
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.
const template = `
<div>
<h1>Welcome To dsabyte</h1>
<p>A place for strangers to code.</p>
</div>
`;
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! 🚀❤️
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.