Your landing page matters. Get it right, and you can capture visitor information, deliver great content, and get them on the path to conversion. Get it wrong, and your site may still get seen — but it won’t drive sales.
As a result, it’s worth knowing what makes a great landing page, what you should avoid as you develop your website, and what options are available if you take on this task yourself.
![Download Now: 50 Code Templates [Free Snippets]](https://no-cache.hubspot.com/cta/default/53/34adf7eb-7945-49c4-acb8-f7e177b323e5.png)
We’ve got you covered: Here’s a quick look at how to create a landing page in HTML and CSS that visitors actually want to land on.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Why Build an HTML Landing Page?
The goal of any landing page is to drive visitor action. Visitors enter your website and see this page first to get more information about the product or service you’re offering. Your landing page then asks visitors to provide details such as name, email address, or phone number in exchange for some type of offer.
What you offer is up to you — whitepapers, ebooks, and newsletters are common. But, whatever it is, you need to make it valuable enough that visitors are willing to share their contact information for it and move to the next phase of your sales process.
The offer itself is the most important aspect of your landing page, but it’s not the only important part: The design of your landing page should be based on driving conversions too. To achieve a landing page that looks exactly how you want, it may be worth learning a bit of code.
If you’re a tech-savvy marketer, you’ve heard of HTML, short for Hypertext Markup Language. It’s the coding language that makes up web pages. With HTML and its sibling style language, CSS, you can build a landing page completely from scratch. Or, if using a website builder or CMS, you can extend your designs beyond what’s possible with drag-and-drop editing.
The idea of learning to code in order to build a simple landing page may seem intimidating, but don’t be discouraged. HTML is relatively simple to learn and, with some practice, you’ll be able to craft an effective landing page yourself.
HTML Landing Page Best Practices
Landing pages are designed to capture specific streams of traffic — a subset of your website visitors targeted by your marketing campaign. For example, if you’ve created a full-featured mobile fitness application that includes a monthly fee, your landing page might offer a free trial period for interested users.
With the right search engine optimization (SEO), your website brings in fitness-focused visitors. Then, your landing page captures potential customers by offering a free trial code when they share their contact information.
While your specific landing page layout will vary, here are a few high-level “do this, not that” recommendations to improve your impact:
- Make it clear, not complicated: Your unique selling position (USP) and call-to-action (CTA) should be front-and-center. Don’t go into depth or detail. Make it clear what you’re offering and what visitors need to provide in return.
- Make it clean, not cluttered: White space is your friend. Keep your landing page simple and clean with limited text and curated images for maximum impact.
- Test, don’t guess: As noted by Forbes, testing is critical to ensure your landing page captures leads. Design it, make it live, and then record the results. If it’s not working, make changes.
Also, watch this video for some additional tips on effective landing page design:
HTML Basics
You’ve got a solid USP, a design vision, and a great CTA. Now, it’s time to build your landing page. We’ll be leveraging HTML to make the page display the exact text, images, and links you want, how you want them.
First, it’s important to note that HTML isn’t technically a programming language. It’s really a markup language that gives you control over the text, images, and links that appear on your webpage. Every HTML element is represented by tags, which are identified by angle brackets (<>). Some elements only need one tag, while others consist of two tags, an opening and a closing tag. The closing tag contains a forward slash (/).
Let’s see an example. Say you want to create a line of text that stands by itself as a paragraph on your landing page. Here’s the line:
“This is my landing page”
Here’s what it looks like in HTML:
We’ve used the “<p>” (paragraph) tag to create a paragraph element — the text between the opening and closing tag is paragraph text.
Other popular HTML tags include:
- <h1> — Makes the text a heading element. Sizes range from h1 to h6.
- <a> — Creates a new link within your text.
- <strong> — Makes text bold.
- <em> — Applies italics to text.
- <ul> — Creates an unordered (i.e., bulleted) list.
- <ol> — Creates an ordered (i.e., numbered) list.
- <br /> — Inserts a line break. One of the few tags that don’t need both an opening and a closing tag.
HTML works in conjunction with CSS (Cascading Style Sheets) to change the style of the elements on your landing page. With CSS, you can change specific things like background color, text color, and font type. These changes then “cascade” across all elements, allowing you to make changes that apply to your entire landing page at once.
How to Create a Landing Page in HTML
- Create the basic structure.
- Create a navigation bar.
- Stick the navbar to the top of the screen.
- Create a great background.
- Add some style.
The first thing you need to create a landing page in HTML is a text editor, as both HTML and CSS are written in plain text. If you don’t have one yet, check out our HTML and CSS editor recommendations before moving on.
If you’re using WordPress, you can also click on a specific block in the editor, click on the three dots and then select Edit as HTML. If you want complete control over your HTML elements, start by editing a page or post, then click on the three dots in the top-right corner of the editor and select Code Editor.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
1. Create the basic structure.
To build an HTML landing page from the ground up, your best bet is using a simple HTML framework like Material Design for Bootstrap (MDB), available in both free and professional versions. A framework is essentially a collection of pre-written code that makes it easier to create in HTML. Rather than creating all elements from scratch, you can leverage a framework’s built-in elements to whip up landing pages more quickly.
Once you’ve downloaded and unzipped the MBD package, you’re ready to get started on your first landing page, which needs five key things: Basic structure, a navigation bar, a navbar class, a full-page background, and CSS styling. You’ll want to include some basic page elements:
- a heading using the <h1> tag at the top of your page
- some text using the <p> to define paragraphs and CSS styles for color and font
- the <input> tag to create form fields where visitors can enter their name and contact information
- links using the <a> tag that let visitors download or access content once they’ve provided their contact details.
Start by opening the index.html file (the HTML file for your homepage) in your project folder — this is typically where you’ve unzipped the MDB or other HTML editor package — and paste this code underneath the opening <body> and closing </body> tags:
This HTML provides the structure for your landing page. In it, we have:
- a <header> element for your page header and primary navigation
- a <main> element to indicate the most important part of the page that contains its unique content (i.e., things that aren’t repeated across pages, like the header and footer).
- A <footer> element for your page footer
These are all placed inside the <body> tags. <body> contains all things in your page that are directly visible to visitors.
2. Create a navigation bar.
Next, paste the following code between the opening <header> tags:
There’s a lot more code here, so let’s break down what this all means. Everything is contained by the <nav> (navigation) element, indicating that the contents inside these tags serve to guide the user through the website.
First in the navbar, we have a place for the brand text, followed by a button to collapse the navbar from view. Inside this collapsible section of the navbar, we have a list of navigation links to Home, Features, and Pricing pages, then a template for a dropdown menu.
Lastly, this code places a search bar in your navigation allowing users to enter queries and quickly find their desired page.
3. Stick the navbar to the top of the screen.
A sticky navbar stays visible to the user even when they scroll down the page. To make your navbar sticky, replace the first <nav> tag (directly under “<!--Navbar-->”) with the following code:
4. Create a great background.
After your content above is set, a great background will help your landing page stand out. Put this code underneath the navbar, just before the closing </header> tag:
This code adds a mask over your background, which partially obscures the background image so content in the forefront is more visible.
5. Add some style.
Finally, it’s time to spruce up your page with styling. To do that, we’ll make use of the language CSS. Like HTML, CSS isn’t a programming language, and it’s also not too difficult to wrap your head around.
How exactly you style your landing pages is, of course, up to you. In the next section, we’ll provide some basic CSS code to get you started.
CSS Landing Page
CSS can either be written in the HTML file it applies to, or in a separate file called an external stylesheet. For this tutorial, we’ll use the latter method. Create an empty text file called “style.css” in the same folder as index.html, and then paste the following HTML code in between the <head> tags inside index.html:
This HTML instructs the document to reference your style.css file for styling instructions.
Next, open style.css, paste in this CSS code, and save the file:
This will provide a placeholder background image for your landing page. Setting height at 100% ensures that background elements cover the entire screen.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Even after this CSS, your landing page will still look pretty generic. At this point, it’s up to you to decide how to populate the page with your content and style it to match your business’s branding. To get started with CSS, check out our Ultimate CSS Tutorial for Beginners, then you can leverage CSS to change the look of your page. Here are the key styles you’ll want to focus on when adding CSS:
- Colors: With CSS, you can change the colors of your text, as well as the background colors of block elements and your entire page. See our guide to CSS colors to learn how it works.
- Fonts: Fonts are another crucial detail of your landing page. A font can make your text both professional-looking and more readable. You can choose a font family according to your branding guidelines and adjust the font size to establish hierarchy.
- Margins and padding: CSS provides ways to space out your elements with margins and padding. As mentioned, white space is your friend — it makes your pages appear clean and digestible, both essential when optimizing any landing page.
You might be surprised at how far you can get with just these alone. But, if you need some help with your design vision, we have some landing page examples you can use for inspiration.
HTML Landing Page Tools
Need some help with your landing page? You’ve got options, such as:
- HubSpot — HubSpot offers a free landing page builder that can help you create and test beautiful landing pages that generate leads and look great on any device.
- Elementor — If you’re building a landing page in WordPress and would rather choose from 300+ professional-grade page options rather than create one from scratch, Elementor has you covered. Pricing starts at $49 for one site for one year.
- Ucraft — Ucraft offers a host of free landing page options to help drive lead generation on your site and streamline visitor data collection.
- Leadpages — You can leverage Leadpages as a WordPress plugin to manage site landing pages or upload an HTML page directly to your server, letting you decide exactly how much HTML work you’re comfortable with and how much you want to offload.
- Startup —You can create a website without code with pre-designed blocks. This Bootstrap-based tool includes a visual editor (no coding required) that will help you build a responsive website design quickly.
Build Your Perfect HTML Landing Page
Converting visitors into valued customers starts with clear, clean, content-rich landing pages. Leverage HTML and CSS basics to design and deploy the best-fit page for your business, and take full control over its functionality and visuals.
Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.
![HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]](https://blog.hubspot.com/hubfs/personal_portfolio.png)
