Your landing page matters. Get it right, and yous tin can capture visitor information, deliver slap-up content, and get them on the path to conversion. Get information technology wrong, and your site may still get seen — but information technology won't drive sales.

As a upshot, information technology's worth knowing what makes a slap-up landing page, what you lot should avert every bit you develop your website, and what options are available if yous take on this task yourself.

Download Now: Free Intro Guide to HTML & CSS

Nosotros've got you covered: Here's a quick look at how to create a landing page in HTML and CSS that visitors really desire to country on.

Why Build an HTML Landing Folio?

The goal of whatever landing page is to drive visitor activeness. Visitors enter your website and see this page first to go more than information about the product or service you're offering. Your landing folio then asks visitors to provide details such every bit proper name, email address, or phone number in substitution for some type of offer.

What you offer is upward to you — whitepapers, ebooks, and newsletters are common. Only, whatever it is, you need to make it valuable plenty that visitors are willing to share their contact information for it and motility to the adjacent phase of your sales process.

The offer itself is the most of import aspect of your landing page, but it's not the only of import part: The pattern of your landing page should be based on driving conversions too. To achieve a landing folio that looks exactly how you lot want, it may be worth learning a scrap of code.

If y'all're a tech-savvy marketer, you've heard of HTML, short for Hypertext Markup Language. It's the coding language that makes upwards web pages. With HTML and its sibling way linguistic communication, CSS, you can build a landing folio completely from scratch. Or, if using a website builder or CMS, you tin extend your designs beyond what's possible with elevate-and-drop editing.

The thought of learning to code in order to build a elementary landing page may seem intimidating, simply don't be discouraged. HTML is relatively simple to learn and, with some practise, you'll be able to craft an effective landing page yourself.

HTML Landing Page All-time 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 lot've created a full-featured mobile fettle awarding that includes a monthly fee, your landing page might offer a free trial flow 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 lawmaking when they share their contact information.

While your specific landing folio layout will vary, hither are a few high-level "do this, not that" recommendations to meliorate your impact:

  • Brand information technology articulate, non complicated: Your unique selling position (USP) and phone call-to-action (CTA) should exist front-and-eye. Don't go into depth or detail. Make it clear what you're offering and what visitors need to provide in return.
  • Make it make clean, not chaotic: White space is your friend. Continue your landing page simple and clean with limited text and curated images for maximum impact.
  • Test, don't guess: As noted past Forbes, testing is critical to ensure your landing page captures leads. Design it, make information technology alive, and and then record the results. If it's not working, brand changes.

Also, sentry this video for some additional tips on effective landing folio design:

HTML Nuts

Yous've got a solid USP, a pattern vision, and a great CTA. Now, it's time to build your landing page. Nosotros'll be leveraging HTML to make the page brandish the exact text, images, and links you lot desire, how y'all want them.

Offset, it's important to notation that HTML isn't technically a programming language. It's really a markup language that gives you command over the text, images, and links that appear on your webpage. Every HTML element is represented past tags, which are identified by angle brackets (<>). Some elements only demand 1 tag, while others consist of two tags, an opening and a closing tag. The closing tag contains a forward slash (/).

Allow's run across an instance. Say you desire to create a line of text that stands by itself as a paragraph on your landing page. Here'south the line:

"This is my landing folio"

Here's what it looks similar in HTML:

                                          
<p>This is my landing folio</p>

Nosotros'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 chemical element. Sizes range from h1 to h6.
  • <a> — Creates a new link within your text.
  • <stiff> — Makes text bold.
  • <em> — Applies italics to text.
  • <ul> — Creates an unordered (i.eastward., bulleted) list.
  • <ol> — Creates an ordered (i.e., numbered) list.
  • <br /> — Inserts a line suspension. One of the few tags that don't need both an opening and a endmost tag.

HTML works in conjunction with CSS (Cascading Style Sheets) to change the style of the elements on your landing folio. With CSS, y'all can alter specific things like background color, text color, and font type. These changes then "cascade" beyond all elements, assuasive yous to make changes that apply to your entire landing page at once.

How to Create a Landing Page in HTML

  1. Create the basic structure.
  2. Create a navigation bar.
  3. Stick the navbar to the top of the screen.
  4. Create a great background.
  5. Add together some style.

The first affair you demand to create a landing page in HTML is a text editor, as both HTML and CSS are written in plain text. If y'all don't have ane yet, cheque out our HTML and CSS editor recommendations earlier moving on.

If y'all're using WordPress, you lot can likewise click on a specific block in the editor, click on the iii dots and and then select Edit equally HTML. If you desire complete control over your HTML elements, start by editing a page or mail service, and so click on the three dots in the summit-right corner of the editor and select Lawmaking Editor.

one. Create the basic structure.

To build an HTML landing folio from the ground upward, your best bet is using a simple HTML framework like Material Pattern for Bootstrap (MDB), available in both complimentary and professional person 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'south built-in elements to whip up landing pages more apace.

One time you lot've downloaded and unzipped the MBD package, yous're fix to become started on your start landing page, which needs five primal things: Basic structure, a navigation bar, a navbar form, a full-page background, and CSS styling. You'll want to include some basic page elements:

  • a heading using the <h1> tag at the peak of your folio
  • some text using the <p> to ascertain paragraphs and CSS styles for color and font
  • the <input> tag to create form fields where visitors can enter their name and contact data
  • links using the <a> tag that permit visitors download or access content one time they've provided their contact details.

Start past opening the index.html file (the HTML file for your homepage) in your project binder — this is typically where you've unzipped the MDB or other HTML editor parcel — and paste this code underneath the opening <body> and closing </torso> tags:

                                          
<!--Main Navigation-->
<header>
                      
</header>
                      
<!--Main Navigation-->
                      
<!--Chief layout-->
                      
<principal>
                      
</main>
                      
<!--Principal layout-->
                      
<!--Footer-->
                      
<footer>
                      
</footer>
                      
<!--Footer-->

This HTML provides the structure for your landing page. In it, we have:

  • a <header> element for your folio header and primary navigation
  • a <main> element to indicate the virtually important office of the page that contains its unique content (i.eastward., things that aren't repeated across pages, similar the header and footer).
  • A <footer> element for your folio footer

These are all placed inside the <body> tags. <body> contains all things in your page that are direct visible to visitors.

2. Create a navigation bar.

Adjacent, paste the post-obit code between the opening <header> tags:

                                          
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
  <div class="container">
    <!-- Navbar make -->
    <a class="navbar-brand" rel="noopener" target="_blank" href="#">Navbar</a>
    <!-- Collapse button -->
    <button class="navbar-toggler" blazon="button" information-toggle="collapse" data-target="#basicExampleNav"
      aria-controls="basicExampleNav" aria-expanded="faux" aria-characterization="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="basicExampleNav">
      <!-- Links -->
      <ul class="navbar-nav mr-automobile">
        <li class="nav-item active">
          <a class="nav-link" rel="noopener" target="_blank" href="#">Home
            <span course="sr-simply">(electric current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" rel="noopener" target="_blank" href="#">Features</a>
        </li>
        <li form="nav-item">
          <a course="nav-link" rel="noopener" target="_blank" href="#">Pricing</a>
        </li>
        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" information-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
          <div class="dropdown-bill of fare dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
            <a form="dropdown-particular" rel="noopener" target="_blank" href="#">Action</a>
            <a grade="dropdown-item" rel="noopener" target="_blank" href="#">Another activeness</a>
            <a course="dropdown-item" rel="noopener" target="_blank" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <!-- Links -->
      <course class="grade-inline">
        <div class="doctor-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
    <!-- Collapsible content -->
  </div>
</nav>
<!--/.Navbar-->

At that place's a lot more code hither, so allow's break down what this all means. Everything is contained by the <nav> (navigation) chemical element, indicating that the contents inside these tags serve to guide the user through the website.

Get-go in the navbar, nosotros have a place for the brand text, followed by a push button to collapse the navbar from view. Within 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 bill of fare.

Lastly, this code places a search bar in your navigation allowing users to enter queries and quickly notice their desired page.

three. Stick the navbar to the pinnacle of the screen.

A sticky navbar stays visible to the user even when they scroll downward the page. To make your navbar sticky, supersede the first <nav> tag (direct nether "<!--Navbar-->") with the following code:

                                          
<nav class="navbar navbar-expand-lg navbar-dark primary-color stock-still-elevation">

4. Create a bully background.

After your content above is set, a great background will assistance your landing folio stand out. Put this code underneath the navbar, but before the closing </header> tag:

                                          
<!--Mask-->
<div id="intro" class="view">
  <div class="mask">
  </div>
</div>
<!--/.Mask-->

This lawmaking adds a mask over your background, which partially obscures the background image and then content in the forefront is more than visible.

v. Add some manner.

Finally, information technology's fourth dimension to spruce upwardly your page with styling. To do that, we'll brand use of the language CSS. Similar HTML, CSS isn't a programming linguistic communication, and it's also not likewise hard to wrap your head around.

How exactly y'all style your landing pages is, of course, upward to you. In the side by side section, we'll provide some bones CSS code to get you started.

CSS Landing Folio

CSS can either be written in the HTML file it applies to, or in a dissever file called an external stylesheet. For this tutorial, we'll use the latter method. Create an empty text file chosen "style.css" in the aforementioned folder as index.html, and so paste the post-obit HTML code in between the <head> tags inside index.html:

                                          
<link rel="stylesheet" rel="noopener" target="_blank" href="style.css">

This HTML instructs the document to reference your fashion.css file for styling instructions.

Adjacent, open style.css, paste in this CSS code, and save the file:

                                          
html, body, header, #intro {
    height: 100%;
}
#intro {
    groundwork: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/total%20page/img%20%283%29.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-groundwork-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This will provide a placeholder background epitome for your landing folio. Setting height at 100% ensures that background elements cover the entire screen.

Even after this CSS, your landing page volition nevertheless look pretty generic. At this betoken, information technology's up to y'all to decide how to populate the page with your content and style it to match your business'southward branding. To get started with CSS, check out our Ultimate CSS Tutorial for Beginners, then you tin 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, yous can change the colors of your text, too as the background colors of block elements and your entire page. Run into our guide to CSS colors to learn how information technology works.
  • Fonts: Fonts are another crucial particular of your landing page. A font can brand your text both professional-looking and more readable. You tin choose a font family according to your branding guidelines and adjust the font size to establish bureaucracy.
  • Margins and padding: CSS provides ways to infinite 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 folio.

You might be surprised at how far you can get with just these lonely. Merely, if you demand some assistance with your design vision, nosotros have some landing page examples you can use for inspiration.

HTML Landing Folio Tools

Need some aid with your landing page? You lot've got options, such as:

  • HubSpot — HubSpot offers a costless landing page architect that tin can help you create and test cute landing pages that generate leads and look groovy on whatever 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 aid 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 make up one's mind exactly how much HTML piece of work yous're comfy with and how much yous want to offload.

Build Your Perfect HTML Landing Page

Converting visitors into valued customers starts with clear, make clean, content-rich landing pages. Leverage HTML and CSS basics to design and deploy the best-fit page for your business concern, and take full control over its functionality and visuals.

Editor'south note: This post was originally published in February 2020 and has been updated for comprehensiveness.

New Call-to-action

css introduction

Originally published Dec ii, 2021 7:00:00 AM, updated December 02 2021