HTML中Class与ID的正确使用场景及区别咨询

我刚接触HTML，正在摸索相关知识，若有理解错误请指正。

Class #

我了解到，同一元素可分配多个Class，同一Class可在页面中多次使用，能将不同元素归为一组，无论它们是否相关或父元素是谁。

ID #

而ID在每个页面中每个元素只能（或应该）分配一次。

示例 #

例如，据我所知以下写法是错误的：

<div id="Bob">
    <div class="Profile-Card">
        <div id="Profile-Picture"></div>
        <div id="Profile-Text"></div>
    </div>
</div>
<div id="Jack">
    <div class="Profile-Card">
        <div id="Profile-Picture"></div>
        <div id="Profile-Text"></div>
    </div>
</div>

这是因为同一个ID被多次使用，即使在没有JS的情况下能正常显示，也应避免多个div使用相同ID，对吗？

而以下是正确使用ID和Class的方式：

<div id="Bob">
    <div class="Profile-Card">
        <div class="Profile-Picture"></div>
        <div class="Profile-Text"></div>
    </div>
</div>
<div id="Jack">
    <div class="Profile-Card">
        <div class="Profile-Picture"></div>
        <div class="Profile-Text"></div>
    </div>
</div>

这里父元素使用唯一ID，而Profile-Picture和Profile-Text的Class在两个容器中共享。

请问我是否应该这样使用Class和ID？我从未使用过JS，若多次使用同一ID会有什么影响？

内容的提问来源于stack exchange，提问作者Reclusive Eagle