¿Por qué debo establecer un id diferente (id='vr-article') para la sección de artículos en article.html con la sección de artículos en index.html?

Los id son únicos en una página y solo se pueden usar una vez. Por lo tanto, no puedes tener más de un elemento con el mismo nombre de id.

En el ejemplo del maestro, usó el Id "articles" en su elemento de sección de artículos, no "article" sin la "s" como describiste que usaste en tu pregunta.

<a href=#articles>Artículos</a>

<section id=articles>
    El contenido de la sección...
</section>

Con este id, el maestro reemplazó el valor de href en su elemento de ancla de artículo en la navegación con "#articles". Con un valor de href como este, una vez que se hace clic, el navegador recibe la instrucción de encontrar el elemento en la página que tiene este id de "articles" y llevar al usuario a él.

El segundo ejemplo que dio el maestro es que te mostró cómo puedes vincular a una sección específica de otra página usando el atributo id con sus elementos de ancla "leer más".

Reemplazó el valor de esos dos elementos de ancla "leer más" con el ruta de su article.html seguido del símbolo de almohadilla y el nombre del Id vr-article. Que definió ese nombre de id "vr-article" dentro de su página article.html.

Index.html

<a href=pathtoarticle.html#vr-article>Leer más</a>

Si usas mi ejemplo anterior, recuerda reemplazar el pathtoarticle.html Con la ubicación de tu archivo article.html.

Article.html

<article id=vr-article>
    El contenido del artículo...
</article>

Con este segundo ejemplo, el navegador recibe la instrucción de llevar al usuario a la nueva página y llevarlo directamente a la parte superior del elemento que tiene el valor del atributo Id "vr-article".

Recuerda, los ids solo se pueden usar una vez por página.

Espero que esto ayude a aclarar las cosas.

Sí, está bien, como dije, solo puedes tener uno id con el igual nombre por página.