General question about separate meta elements

I’m currently on Step 17 of “Learn Basic CSS by Building a Cafe Menu” portion of the Responsive Web Design course. However, this step calls for adding another meta element below the first one.

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>

While I was able to pass the code check for this step, I’m confused about why I would need two meta separate elements here, instead of just one (with the charset="utf-8" listed as an additionally embedded attribute).

Example of what I was initially thinking below (which did not pass the code check):

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />

Is there a specific reason why this code wouldn’t work outside of the exercise?

each meta element gives different information, so you would have a meta element with charset and a different meta for each different value of name you need/want to use

Detailed documentation: