What is an HTML Wrapper? (The Complete Guide)

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.

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.

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.

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.

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.

Next, add your class or id.

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.

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.

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!