DEV Community

swetha palani
swetha palani

Posted on

DAY 2: REACT IN JS (HTML& XHTML,JS & JSX)

#webdev #programming #javascript #beginners

1. HTML vs XHTML

Full Forms

  • HTML → HyperText Markup Language
  • XHTML → Extensible HyperText Markup Language

Key Differences

Aspect HTML XHTML
Case Sensitivity Tags and attributes are not case-sensitive. Tags and attributes must be lowercase.
Tag Closing Some tags can be left unclosed (e.g., <br>). All tags must be closed (e.g., <br />).
Overlapping Tags Allowed (e.g., <b><i>text</b></i>). Not allowed — tags must be properly nested.
Syntax More lenient and forgiving of errors. Strict syntax rules like XML.
Parsing Parsed by browsers even if not well-formed. Must be well-formed to be parsed.

Example – HTML 

<html>
  <body>
    <h1>Welcome</h1>
    <br>
    <p><b><i>Overlapping</b></i> tags are allowed in HTML.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Example – XHTML 

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <h1>Welcome</h1>
    <br />
    <p><b><i>Properly nested</i></b> tags in XHTML.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. JS vs JSX

Aspect JS (JavaScript) JSX (JavaScript XML)
Definition A programming language used for web development. A syntax extension for JavaScript used in React.
Usage Adds interactivity, logic, and DOM manipulation. Lets you write HTML-like code inside JavaScript.
Syntax Pure JavaScript (e.g., document.createElement). Combines HTML and JavaScript (e.g., <h1>{title}</h1>).
Compilation Runs directly in browsers. Needs tools like Babel to compile into JavaScript. 
| ```

jsx  
const title = "Hello";  
return <h1>{title}</h1>;


``` |


```

`
Enter fullscreen mode Exit fullscreen mode

Top comments (0)