El id es una clave unica para un elemento en HTML. La designación de un ID nos permite definir de forma exacta a un elemento en particular, que luego puede usarse para trabajar tanto con JavaScript como con CSS. Los IDS se definen de esta forma
<h1 id="tituloPrincipal">
ATENTI
Un ID no puede repetirse, la idea es que sea un elemento unico. Si vamos a repetir nombres para crear un bloque de elementos, utilizamos el atributo class. El ID es el primer atributo que se define de un elemento, salvo de los inputs que lo primero que se recomienda definir es el type.
Las clases se utilizan para nombrar grupos de objetos en HTML. También son utilizados en CSS y JavaScript. Su sintaxis y forma de definirlo es similar a la que utilizamos en id.
<h1 class="titulos">
ATENTI
A diferencia de ID, pueden existir varios elementos que compartan clase (¡esa es la gracia de las clases!). Igualmente, es buena practica que los nombres de las clases tengan que ver con los elementos, para que si otro lee el codigo lo entienda.
Además, un elemento puede contener varias clases. Por ejemplo, en el ejemplo anterior:
<h1 class="titulos cabecera">
El orden en el que ponemos las clases importa ya que si se superponen en algo, prevalecerá la que primero escribimos, en este caso titulos.