HTML Integration

Learn how HTML works with CSS, JavaScript, Frameworks, and specialized platforms.

`The Three Pillars`

Websites are built on three fundamental technologies that work together to create the modern web experience.

HTML + CSS : HTML provides the structure, while CSS (Cascading Style Sheets) provides the visual design and layout.
HTML + JavaScript : JavaScript adds interactivity and logic, allowing you to change HTML content without reloading the page.
DOM (Document Object Model) : The programming interface that allows JavaScript to 'talk' to and modify HTML elements.

`Frameworks & CMS`

In professional environments, you rarely write plain HTML files. You use tools that generate HTML for you.

HTML + Frameworks (React / Next.js) : These use components and JSX to manage HTML more efficiently for complex apps.
HTML in CMS : Platforms like WordPress or Shopify provide 'What You See Is What You Get' (WYSIWYG) editors to generate HTML for non-coders.
Templating Engines : Tools like EJS or Handlebars that inject data into HTML on the server before sending it to the user.

React Component (JSX)

Frameworks like React use JSX, HTML-like syntax inside JavaScript. Babel compiles it into plain JS the browser understands.

<div id="root"></div>

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
  function App() {
    return (
      <div>
        <h1>Hello from React!</h1>
        <p>JSX looks like HTML but runs inside JavaScript.</p>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>

`Mobile & Email HTML`

HTML is used in environments outside of standard browsers, often requiring specific rules and limitations.

HTML in emails : A 'time-capsule' style of coding that uses inline styles and tables to ensure it looks right in all inboxes.
HTML for mobile apps : Frameworks like Ionic or Capacitor allow you to wrap HTML/JS into a native app container for iOS and Android.
WebView : A browser component inside a mobile app used to display web content natively.

Inline Styles for Email HTML

Email clients ignore external CSS, so all styles must be written inline on each element.

<div style="font-family:Arial; padding:16px; border:1px solid #ddd;">
  <h2 style="color:#333; margin:0 0 8px;">Hello, User!</h2>
  <p style="color:#666; margin:0;">
    Email HTML uses inline styles for inbox compatibility.
  </p>
</div>

Knowledge Check

1. In the 'Three Pillars of Web Development', what role does HTML play?

2. Why do HTML emails often use <table> tags instead of modern Flexbox/Grid?

3. What is JSX in the context of React?

4. How does JavaScript typically interact with HTML?

5. In a Content Management System (CMS) like WordPress, what is a 'slug'?

6. Which technology is often used to build mobile apps using HTML, CSS, and JS?

Previous Next