What is an HTML Wrapper? (The Complete Guide)

Download Now: Free HTML & CSS Coding Templates
Rachael Hurley

Updated:

Published:

There are many ways to control the placement of HTML elements on your web pages. One of the most popular methods is by using an HTML wrapper.

computer with a lighbulb on it to represent an html wrapper

There is no native HTML element for this. So if this is a new term, you’re in the right place. This post will help you become familiar with HTML wrappers.

Download Now: 50 Code Templates [Free Snippets]

HTML Wrappers in Action

Most web pages are going to have a wrapper of some kind. Sometimes it will be easy to spot, like in the image below. You can see the wide margins, and the content is centered.

Screenshot of a website utilizing HTML wrappers to help structure and style their web page as a single column layout.

Image Source

Other times, it’s a bit more difficult.

In the next image, you’ll notice that the margins are much smaller, and nothing appears centered. However, you know there is a wrapper because of how the different elements on the page are grouped and aligned.

For example, the menu options in the navigation bar at the top are all together on the left of the page, while the links to the social media accounts are grouped and pushed to the right of the page.

A screenshot of a website that uses wrappers to create a multicolumn layout for their page.

Image Source

Even though they’re different, both pages are formatted to allow for easy site navigation. These images also showcase the variety of ways you can use wrappers to control the appearance and behavior of your website pages.

How to Create a Wrapper with HTML

You can create a basic HTML wrapper in three simple steps. First, create your div element.

<div></div>

Next, add your class or id.

<div class="wrapper"></div>
Then, add your content.
<div class="wrapper">Content goes here</div>

This video shows the process from start to finish and even includes a little styling as well.

Once you’ve done those, your wrapper is complete. If you’d like, you can style the wrapper by adjusting the margins, changing the alignment, or even adding color. Styling the wrapper is unnecessary, but it can help you achieve the look you want on your site.

You’ll need to work in your CSS style sheet to style your wrapper. Let’s work through an example below.

Example: Building an HTML Wrapper

When building a wrapper, you’ll start with HTML. Let’s say we want a menu to appear within the wrapper. We’ll start with the code below.

<div class="wrapper"> <h2>See This Week’s Flavors of Donuts</h2> <p> Every week, our team rotates our donut options. This week, we have the following.</p> <ul> <li>Chocolate</li> <li>Strawberry</li> <li>Maple Bacon</li> <li>Captain Crunch</li> <li>Keylime</li> </ul> </div>

The code includes a heading, some text, and an unordered list of donut flavors. This information contains all of this information in one wrapper. When we run the code, the following menu appears.

See the Pen html wrapper 1 by HubSpot (@hubspot) on CodePen.

Next, we’ll style the code using CSS. To do so, we will apply the styling rules to the HTML id “wrapper.” The code below will create a box around the text and add a pink background.

.wrapper { margin-right: auto; margin-left: auto; max-width:1160px; padding-top: 10px; padding-right: 20px; padding-left: 20px; padding-bottom: 10px; background-color: pink; }

When we run the code with the CSS, the following menu appears.

See the Pen html wrapper 1 by HubSpot (@hubspot) on CodePen.

Now, we have a colorful, easy-to-read menu to share with our customers.

Moving Forward With HTML Wrappers

Now that you know what an HTML wrapper is, how to create one, and how having one will help to improve your site, you can have some fun with them. Practice using wrappers to format your webpage and play with different styling options.

You can even use wrappers to create different visual effects or interactive behaviors. The possibilities are endless!

New Call-to-action

Topics: HTML

Related Articles

Dozens of free coding templates you can start using right now

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO