I'm a little confused what a wrapper does compared a tag? Do they do the same thing? Why is it important to have both?

Sorry if I don't answer this correctly, but I think you've got it a bit confused. Tags, at least in html, is like the code you use to designate particular items. For example, a <p> tag would denote a paragraph.

<p>paragraph</p>

Now, wrapper tags, are tags do not necessarily have a function. What they do is help you differentiate between lines of code when you're reading the code. For example, you might have an <h1> tag and a <p> tag that's going to be about one section, while you have another <h1> tag and <p> tag that's about another section. You would use the <div> tag to differentiate between the two. Essentially, all they do is organize the code into sections. For example, here:

<div>
   <h1>Section 1</h1>
   <p>blah bah blah</p>
</div>
<div> 
   <h1>Section 2</h1>
   <p>blah blah blah</p>
</div>

It is basically simply for your use to understand and organize your code better. <main> tags works the same way, except it is for denoting the main body of your code, and is recommended to be used only once, for reduced confusion.