The charset declaration tells the browser how to interpret the bytes of the document into characters. The HTML5 short form is <meta charset="utf-8">; the legacy form is <meta http-equiv="Content-Type" content="text/html; charset=utf-8">. Either works -- HTTP Content-Type: text/html; charset=utf-8 also counts.
Why placement matters: per HTML5 spec §4.2.5.5, the encoding declaration MUST appear in the first 1024 bytes of the document. Browsers start parsing in a default encoding (UTF-8 in modern browsers, but historically Windows-1252 or ISO-8859-1) and switch to the declared encoding when they see the meta tag. If the declaration is past the 1024-byte window, browsers DISCARD parsed state and re-parse from the top -- a measurable hit to FCP.
Why UTF-8: the Unicode standard covers every script, every emoji, every modern language. Anything else (Windows-1252, ISO-8859-1, GB2312, Shift_JIS) is a legacy choice that breaks for someone -- a French user sees mojibake on a Japanese page, an emoji renders as a question mark, copy-paste between systems mangles characters. UTF-8 is the right answer for all new content.
Best practice: make <meta charset="utf-8"> the very first child of <head>. It costs nothing, can never go wrong, and pre-empts the late-discovery FCP penalty.