@michelle
<q> does a few things:
It localizes the marks, it will use the marks that fit the `lang` set on a parent element. Add `lang="fr"` to see how the appearance of <q> changes.
It automatically makes quotation marks "curly" instead of straight. Your article appears to have curly quotes in the text but my guess is something did that formatting for you, you didn't use an arcane key combination to type open quote, close quote characters. <q> uses pseudo-elements to add the right characters.
Because the curly quote characters aren't a part of the text, they don't get mangled by encoding mismatches (e.g. Unicode vs. Latin-1).
In languages that use them, it automatically alternates between double quote (") and single quote (') marks for nested quotations; outermost is double, next quote in is single, then inside that is double, and so on.