So... how did I do? ;)
---
<!DOCTYPE html> is a magic string that indicates the document should be parsed as an HTML5 document (possibly avoiding quirks mode too? I don't remember what triggers that).
"Doctype" comes from the XML concept, and XHTML documents may have a different doctype.
<html> is the document's root element. It's supposed to be there but the browser will create it if you leave it off.
ltr means the document direction is left to right. direction here refers to the direction of lines (e.g. in English lines go left to right, in Arabic lines go right to left). There's another value that influences writing mode too below the document level, but I forget what it's called.
Browser implementers and webmasters have to be careful with a non RTL direction; as it changes the scrolling element origin, the browser will have to deal with logical vs physical coordinates, and scrollX may go negative. I believe scrollX was reconciled across the different browsers fairly recently.
The meta tags tell you metadata about the document. I believe they're supposed to go in the head section, but again the browser will create that for you if you don't.
lang just tells you the language of the page. I'm not familiar with what this is used for, but you could imagine a search engine using it for one thing (e.g. Google's "display only results in English").
The two letter country code comes from some standard I don't remember the name of. Also used in TLDs. Watch out for easy to confuse countries like cn, ca. Some websites like to use the trendy .io TLD, but I heard rumors it wasn't run very well.
charset="utf-8" means the document's bytes should be treated as unicode. Note that this meta tag should occur in the first 1024 bytes of the document or browsers may not notice it. Without specifying the charset the browser will likely fall back to... I think latin1?
Anyway I read once that browsers don't get too fancy with the encoding detection on purpose, to avoid people relying on unreliable heuristics.
Another interesting point is that Chrome can load utf-8 documents as utf-8 without a metatag if it's a file:// URL. I guess conceptually this is because local files can't specify the encoding in HTTP headers or something?
Viewport specifies the responsive sizing behavior. This is described in the CSS Device Adaptation Level 3 spec; but the section on actually parsing this tag is pretty gnarly. If I remember right it was a non-normative section and had a few weird corners that were likely left over from matching browser implementation quirks.
Anyway you need the viewport for responsive viewport sizing. 99% of the time you can just copy-paste the usual string and don't need to get fancy with custom values or anything. There's also a newer way to specify the viewport behavior through CSS (and indeed Chrome basically converts the meta tag to this internally), but it didn't really work right last time I tried it.
"og:" is from some semantic web standard. I never learned the details, but basically it tells crawlers some basic information about the page's contents.
For the remaining lines; presumably Safari recognize some custom meta tags to change Apple device theming. The "origin-trial" may refer to Chrome (or Safari?) origin-trials, where webpages can opt into (or sometimes out of) experimental browser behavior.
Line 10 is CSS. Presumably there was a <style> tag off the right end of the screenshot on line 9.
Interesting point about CSS or JS embedded in HTML:
This actually changes the parser's language from HTML parsing to CSS or JS parsing on the fly. But with a special rule to look for the end tag and switch back to HTML. This is why you'll see people break up the string "<script/>" if they have to embed it in JS embedded in HTML.
But my favorite is the <plaintext> tag which switches the parser to... plaintext. Unlike CSS or JS there is no special escape-hatch and it's just plaintext for the rest of the document.
Speaking of embedded languages: SVGs have a title element but it isn't the document's title element. Poorly written browsers or crawlers could confuse the SVG title with the document title if they don't have an understanding of tag namespaces (another relic from XML perhaps?!)