HTML5 + responsive layout A couple of questions?

Question

HTML

Hello
During the study, a couple of questions have accumulated. If you can help me figure them out, I'll be very grateful.
1. I read different articles, watched different videos and didn't understand - with the release of the new HMTL5 standard, is there for the old one: div class="wrapper"/"container" tag in html5? I saw different people write and speak differently - some write section, others write main, and some continue to write as before. So is there a standard in html5? I would like to close this question for myself.
2. Now I am studying the technology of responsive design, I have many questions, but perhaps I will ask the most important ones
:as I understand it (I hope it's true) for responsive - it is necessary (not counting flexible media and media queries) to translate the static layout into a relative one (% and em) Here is a one-page all static markup - px. In order to translate static into rubber, you need to take the context / on the target * 100 = the% we need. The question emerges from this:
We have a container with a width of 960 px, how to correctly transfer the container from static to rubber? goal (960) divide by what exactly? On the parent - body? That is, the entire width of the screen? or how?
I did it at random - I opened the developer tools in the browser and adjusted the% in Computed until it shows 960 px. Is this considered the right decision? Or maybe there are some hidden nuances in this?
Towhat about indents? padding, margin etc - are they set in px - or do they also need to be converted to a relative value? If yes then how?
Thanks in advance.

Answer 1

1. <main> can most likely be a replacement for what you mean by div class="wrapper"/"container" if you're willing to follow its limitations:
2. Read Responsive Web Design by Ethan Marcotte , most of the questions should be gone.
You need to understand that with fluid layout, this 960px will shrink / stretch depending on the size of the browser window. You have to decide at what window size the container will be exactly 960px. For example, you decide that at 1280px, this is the context. Here I simplify a little, because you need to understand that the context is not always the size of the browser's body (body).
Then we consider, we divide the goal by the context, and not vice versa, as you wrote:960 px / 1280px * 100% = 75%

Answer 2

section != div
main != div.wrapper
aside != div.sidebar
MAIN - one for the entire page. The main element
of ASIDE is the side part. Not to be confused with the sidebar! Usually in the sidebar, there is, for example, a submenu of the current section, but in ASIDE this should not be so. ASIDE can contain only content relevant to MAIN, for example - Wikipedia
SECTION - as much as you like, each section can have its own headings, starting with H1, header and footer
.wrapper - live as you used to live

<section>
  <div class="wrapper"></div>
</section>

You can get out of the way with nesting a section within a section, which seems to be not prohibited, but what for?