Salesforce LWC Master Class (Ep.3) – What is HTML (Hypertext Markup Language)?
If you are starting your journey into Salesforce development, particularly with Lightning Web Components (LWC), the syntax can sometimes feel like a foreign language. In this third episode of the Lightning Web Component Master Class, we go back to the absolute building blocks of the web: HTML.
Whether you are a complete beginner or an admin looking to code, understanding how HTML functions within the Salesforce ecosystem is the first step to building custom user interfaces. Here is a breakdown of the key concepts and a practical guide to writing your first component.
What is HTML?
HTML stands for Hypertext Markup Language.
- Hypertext: The “HT” refers to the links that connect web pages to one another (the web).
- Markup: The “M” stands for the code used to denote elements on a page.
- Language: The syntax used to communicate with the browser.
At its core, HTML is how we provide structure to a web browser. Without it, the browser is a blank canvas with no idea what to render. It tells the browser, “This is a paragraph,” “This is a link,” or “This is an input field.”
HTML in LWC vs. Standard Web Development
If you have dabbled in web development before, you might be looking for the standard <html>, <head>, and <body> tags. In Lightning Web Components, you won’t find them.
Because your component lives inside the larger Salesforce application (which already has its own structure), everything you write in an LWC HTML file is wrapped in a <template> tag.
HTML
<template>
</template>
This tag effectively tells the Salesforce framework, “Here is a chunk of interface structure I want to inject into the page.”
Tutorial: Building Your First Structure
The video provides a hands-on walkthrough of creating a component using Visual Studio Code (VS Code). Here is the process:
1. Create the Component
Open your command palette in VS Code (Ctrl+Shift+P on Windows, Cmd+Shift+P on Mac) and run SFDX: Create Lightning Web Component.
- Naming Tip: LWC names must start with a lowercase letter and cannot contain spaces. Use underscores if needed (e.g.,
demo_lwc).
2. Write Basic HTML
Inside the <template> tags of your new .html file, you can write standard HTML elements.
- The Paragraph Tag (
<p>): Used for blocks of text.HTML<p>Hello World</p> - The Anchor Tag (
<a>): Used for hyperlinks. It requires anhrefattribute to know where to point.HTML<a href="https://youtube.com">Watch Videos Here</a>
3. Exposing the Component (Crucial Step!)
Creating the HTML isn’t enough; you have to tell Salesforce where this component is allowed to live. This happens in the meta.xml file.
- Change
<isExposed>to true. - Add Targets to define where it can be dropped (e.g., a Record Page).
XML
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
4. Drag, Drop, and View
Once deployed, you can go to any record in Salesforce (like an Account), click the Gear Icon > Edit Page, and drag your component onto the canvas. When you save and refresh, your “Hello World” text and link will appear live in the browser.
The Secret Weapon: The Component Library
While standard HTML tags are great, Salesforce offers a superpower: the Lightning Component Library.
Instead of building complex UI elements from scratch using raw HTML <div> tags, you can use pre-built Salesforce components. For example, to create a text input box, you simply write:
HTML
<lightning-input label="Enter something cool"></lightning-input>
When the browser renders this, Salesforce automatically generates the complex structure (labels, input fields, styling containers) required to make it look and function perfectly. This saves developers an immense amount of time and ensures your app looks like native Salesforce.
Summary
HTML is the skeleton of your component. It doesn’t handle the “look” (that’s CSS) or the “logic” (that’s JavaScript), but it defines what is on the page. By mastering standard tags and leveraging the LWC Component Library, you can build powerful structures with very little code.
Up Next: Now that we have the structure, how do we stop it from looking like a plain white page? The next episode covers CSS to bring style to your components.
Resources Mentioned:
- W3Schools HTML Tutorial (For standard tags)
- Salesforce Component Library (For LWC-specific components)
Check out the full video here: Salesforce LWC Master Class (Ep.3) – What is HTML?
Need help with your Salesforce Org?
If you need help with your Salesforce org, schedule an hour of consulting time with me! I’m one of only ~500 Salesforce Certified Technical Architect’s (CTA) worldwide and I’ve spent over 30,000 hours building Salesforce implementations over the last decade!
Schedule and hour of consulting with me here!
Do you want to be the next Salesforce Certified Technical Architect (CTA)?
If you need training to help you on your journey to complete your Salesforce CTA Board then why not sign up for the cheapest Salesforce CTA course out there, with someone who has training over a million Salesforce professionals worldwide! You can check out and enroll in the course below!
Sign up for the CTA course here!
Or if a course isn’t your thing, you can always sign up for an hour long CTA study session with me here:
Schedule 1-on-1 CTA Coaching Here!
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
AI DISCLAIMER: Gemini assisted me in writing this blog post by analyzing and summarizing the contents on the YouTube video I created that is linked at the top of this post.
