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.