Dúvida HTML do Header

Para a aula, o cabeçalho foi utilizado todo o menu com logo, notificação dentro do Header.

<header class="cabecalho">
    <button class="cabecalho_menu" aria-label="menu"><i></i></button>
    <img src="assets/img/logo.svg" alt="logotipo da HZC" class ="cabecalho_logo"> 
    <button class="cabecalho_notificacao" aria-label="notificação"><i></i></button>
</header>

Porém, no curso de HTML e CSS foi desenvolvido utilizando o header e dentro dente uma div menu que é composto pela logo e uma tag nav para os menus de navegação.

<header>
    <div class="menu">
        <h1><img src="logo.png"></h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contatos.html">Contatos</a></li>
            </ul>
        </nav>
    </div>
</header>

Qual o método mais usual e/ou indicado? Irá interferir no CSS utilizando uma forma ou outra? Se sim, quais modificações devo fazer?Tem algum material, site que eu possa ler para entender melhor essas estruturas do header?