HTML: structure
Use elements to organize content and describe what each part means.
HTML Basics: Build Your First Web Page
Learn how HTML gives web content its structure. Start with a valid document, then practice headings, links, images, lists, forms, and semantic elements with copy-ready examples.
What is HTML?
HTML (HyperText Markup Language) describes the structure and meaning of content on a web page. Browsers read elements such as headings, paragraphs, links, and forms and present them to people and assistive technology.
CSS: presentation
Use stylesheets to control colors, spacing, layout, and responsive design.
JavaScript: behavior
Use scripts to respond to actions and update a page interactively.
Good to know: HTML is a markup language, not a programming language. You can build meaningful pages with HTML alone, then add CSS and JavaScript as needed.
Your first HTML document
A standard HTML document declares its version, sets the document language, separates page information from visible content, and includes a title for the browser tab.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Page</title>
</head>
<body>
<h1>Hello, web!</h1>
<p>This is my first HTML page.</p>
</body>
</html><!doctype html>tells the browser to use modern HTML.<head>contains document information;<body>contains page content.lang="en"identifies the language for browsers and assistive technology.- The viewport setting helps the page fit mobile screens.
Elements, tags, and attributes
Most HTML elements have an opening tag, content, and a closing tag. Attributes add information to an element, such as a link destination or image description.
01 · TEXT
Headings and paragraphs
Use headings to organize sections in order. Start with one page-level <h1>, then use <h2> and nested headings for subsections.
<h1>A page title</h1>
<h2>A section</h2>
<p>A paragraph explains the topic.</p>
<strong>Important text</strong>
<em>Emphasized text</em>02 · LINKS
Links and destinations
The href attribute sets where a link goes. Use descriptive link text so people know what to expect.
<a href="https://sfmcpulse.com/html-playground.html">
Open the HTML playground
</a>For links that open a new tab, use target="_blank" together with rel="noopener noreferrer".
03 · IMAGES
Images and alternative text
Use meaningful alt text when an image conveys information. For decorative images, use an empty alt="".
<img
src="images/campaign-preview.png"
alt="Email campaign preview on a phone"
width="640"
height="400">04 · LISTS
Ordered and unordered lists
Choose an unordered list for items without a required sequence and an ordered list for steps or rankings.
<ul>
<li>Plan the content</li>
<li>Write the markup</li>
</ul>
<ol>
<li>Create a file</li>
<li>Open it in a browser</li>
</ol>05 · FORMS
Labels and form controls
Connect each label to its control with matching for and id values. This makes the field easier to use with a mouse, keyboard, or screen reader.
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>The sample action is illustrative; a real form needs a server endpoint that accepts and validates submissions.
06 · TABLES
Data tables
Use tables for tabular data, not page layout. Add a caption and header cells so the relationships are clear.
<table>
<caption>Course schedule</caption>
<thead>
<tr><th scope="col">Lesson</th><th scope="col">Minutes</th></tr>
</thead>
<tbody>
<tr><td>HTML structure</td><td>20</td></tr>
</tbody>
</table>Use semantic HTML
Semantic elements describe the role of content. They help browsers, search engines, and assistive technologies understand the page, and they make source code easier for people to maintain.
<header>
<h1>Community garden</h1>
</header>
<nav aria-label="Main navigation">
<a href="#about">About</a>
</nav>
<main>
<article id="about">
<h2>About the garden</h2>
<p>Neighbors grow food together.</p>
</article>
</main>
<footer>Contact the garden team</footer>Prefer elements such as <main>, <nav>, and <button> when they match the purpose. A generic <div> is useful for grouping, but does not add meaning by itself.
Practice: make a simple profile page
Create a page with a title, a short introduction, a list of interests, and one useful link. Then check your work with this quick checklist.
- Start with the document structure and set the document language.
- Use a clear heading hierarchy and semantic landmarks.
- Give links meaningful text and images suitable alternative text.
- Use labels for every form field and table headers for tabular data.
- Open the page at a narrow screen width and test keyboard navigation.
HTML basics FAQs
What is the difference between HTML and HTML5?
HTML is the standard markup language for web pages. “HTML5” commonly refers to the modern generation of HTML features; new web content should use the current HTML standard and the HTML doctype shown in this guide.
Do I need CSS to write HTML?
No. HTML defines content and structure on its own. CSS is optional and adds visual styling and layout.
How can I practice HTML in a browser?
Open the SFMCpulse HTML Playground, edit the HTML panel, and run the preview. The playground runs your code locally in the browser and does not connect to a server.
Ready to build?
Try your HTML in the interactive SFMCpulse playground and see the result as you learn.