First, they serve as anchor tags for in-page linking, exactly how you did your nav menu.
Second, they are used as unique targets for DOM manipulation in conjunction with scripting languages such as JQuery and Javascript.
If these cases you use a class instead of IDs as they can be repeated multiple times.
From the HTML documents.
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
https://github.com/Cran3/prj-rev-bwfs-dasmoto/blob/5b70105710852f0d835c52a598c25af9541a9e00/Dasmoto/index.html#L42
IDs serve a couple specific purposes in HTML.
First, they serve as anchor tags for in-page linking, exactly how you did your nav menu.
Second, they are used as unique targets for DOM manipulation in conjunction with scripting languages such as JQuery and Javascript.
If these cases you use a class instead of IDs as they can be repeated multiple times.
From the HTML documents.
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id