A wrapper is an HTML element that contains other elements. It is used to group together related elements for the purpose of styling or semantic purposes.

The <body> and <html> elements are actually wrappers as well, because they wrap other HTML elements that you might use within an HTML document.

The most common wrapper element is the <div>. Other wrapper elements include the span and section. Let’s take a closer look at each of these three wrapper elements.

<div class="wrapper">
  <h1>Welcome to our website!</h1>
  <p>Here you can find information about our products and services.</p>
</div>

<div> wrappers

The <div> element is the most common wrapper element. It has no semantic meaning and is used purely for styling purposes. The div element is a block level element, which means it takes up the entire width of its container.

<span> wrappers

The <span> element is another common wrapper element. It also has no semantic meaning and is used purely for styling purposes. The <span> element is an inline element, which means it only takes up as much width as its contents.

<section> wrappers

The <section> element is another common wrapper element. It has semantic meaning and can be used for both styling and semantic purposes. The <section> element is a block level element, which means it takes up the entire width of its container.