Para utilização apenas no HTML - "name " ou "id"?

Olá! Tudo bem? Cada um desses atributos tem uma função e uso diferente:

• id = Uma identificação única, o uso principal é quando pretendemos buscar algum elemento no HTML usando JavaScript, o que fica muito mais fácil quando há um id único, além de ser usado para fazer o vínculo entre uma label e um input quando estamos fazendo um formulário, também podemos usar quando queremos aplicar algum estilo especial no elemento e quando não temos intenção de reutilizar esse estilo especial.
• class = Uma forma mais genérica de classificar um elemento e tem o uso principal aplicar estilos CSS a elementos. Também pode ser usado para fazer buscas com JavaScript, no caso onde estamos buscando vários elementos de uma vez e não um só.
• name = O uso principal é quando temos um formulário e vamos dar nome aos campos que vão ser preenchidos, porque é através do nome que conseguimos acessar os valores preenchidos depois no JavaScript.

Veja alguns exemplos, uso no HTML:

<form id="formulario-adicionar-cliente">

    <!-- As labels se vinculam ao input pelo id -->
    <!-- O id do input deve ser igual ao for da label -->

    <label class="rotulo" for="nome">Nome</label>
    <input class="campo" type="text" name="nome" id="nome">

    <label class="rotulo" for="cpf">CPF</label>
    <input class="campo" type="number" name="cpf" id="cpf">

    <label class="rotulo" for="email">Email</label>
    <input class="campo" type="email" name="email" id="email">

    <button type="submit" id="botao-submit">Salvar</button>
    <span id="mensagem-de-sucesso"></span>
</form>

Adicionando alguma lógica com JavaScript:

<script>
    // Fazendo alguma operação com JavaScript
    // Buscas por id
    const botaoSubmit = document.querySelector("#botao-submit");
    const formulario = document.querySelector("#formulario-adicionar-cliente");
    botaoSubmit.addEventListener("click", (event) => {
        event.preventDefault();

        // Pegando os valores do formulário pelo atributo name

        const cliente = {
            nome: formulario.nome.value,
            cpf: formulario.cpf.value,
            email: formulario.email.value
        };

        // Espaço para alguma lógica com o cliente, como adicionar no banco de dados ou fazer alguma validação

        // Adicionando um conteúdo de texto no elemento
        // Busca por id
        const spanMensagem = document.querySelector("#mensagem-de-sucesso");
        spanMensagem.textContent = "Sucesso!";
    });
</script>

Estilos no CSS:

<style>
    /* Adicionando estilos */

    .rotulo {
        /* estilo genérico */
        font-size: 20px;
    }
    .campo {
        /* estilo genérico  */
        background-color: white;
        border: 2px solid black;
    }
    #botao-submit {
        /* estilo único, que não queremos reutilizar */
        background-color: blue;
    }
</style>

Estes são alguns usos na prática, espero ter ajudado!