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> tags are actually a wrappers as well, because they wrap other tags 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 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.