About workflow and stuff about hashtags and order.

In addition to what Jon and Nancy have said, I am glad that the article that Nancy referred to - https://www.w3schools.com/html/html5_semantic_elements.asp - does expand on the use of headers and footers. These are not only used in the main document, but can also be used in other elements that require a header.

Having said that, in my personal opinion, an outline of the document is the most important goal for SEO and screen readers. This is where header tags play an important role. As an example, have a look at

What this tells me is that both the body and the nav elements have no heading (hx).

I recommend that you stick with semantic HTML5 tags as selectors.  In other words, don't use unique IDs unless you absolutely need them for JavaScript.   Semantic tags give meaning and structure to content as well as acting as hooks for your CSS styles to grab onto.   See graphic and link below for commonly used semantic HTML5 tags.

Figure from W3Schools

https://www.w3schools.com/html/html5_semantic_elements.asp

I'm not sure what you're asking.

If you're asking about the relation between the <header> tag and the #header id, there really isn't one, generally speaking. They're separate things in html and css. If you are using a javascript that requires the use of an id="header" using the <header> html tag won't be enough by itself. That's probably why you have <header id="header">. 

HTML                  CSS
<header>              header 

id="header"         #header 

class="header"     .header