My first mental picture

This is my first mental picture of Twitter's HTML for the cropped image of the three cats. I've deleted a lot of things or hidden them in ellipses ⋯, but it's still a pretty large diagram.

There's a green box around the cat image element [link] which is my focus.

html dir="ltr" lang="en" style="overflow: auto scroll; overscroll-behavior-y: none; font-size: 15px;"
╟─ ⋯
╙─ body style="background-color: rgb(0, 0, 0);"
   ╟─ ⋯
   ╟─ div id="react-root" style="height:100%;display:flex;"
   ║  ╙─ div
   ║     ╙─ div
   ║        ╟─ ⋯
   ║        ╟─ ⋯
   ║        ╙─ div data-at-shortcutkeys='
{"n":"New Tweet","CTRL Enter":"Send Tweet","m":"New Direct Message","/":"Search","l":"Like","r":"Reply","t":"Retweet","s":"Share Tweet","b":"Bookmark","u":"Mute account",
"x":"Block account","Enter":"Open Tweet details","o":"Expand photo","i":"Open/Close Messages dock","?":"Shortcut help","j":"Next Tweet","k":"Previous Tweet",
"Space":"Page down",".":"Load new Tweets","g h":"Home","g e":"Explore","g n":"Notifications","g r":"Mentions","g p":"Profile","g l":"Likes","g i":"Lists",
"g m":"Direct Messages","g c":"Moment Maker","g s":"Settings","g b":"Bookmarks","g u":"Go to user…","g d":"Display settings"}' aria-hidden="false" style="min-height: 881px;"
║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╙─ main role="main" ║ ╙─ div ║ ╙─ div ║ ╙─ div ║ ╙─ div data-testid="primaryColumn" ║ ╙─ div ║ ╟─ ⋯ ║ ╙─ div ║ ╙─ div ║ ╙─ div ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╙─ div ║ ╙─ section aria-labelledby="accessible-list-83" role="region" ║ ╟─ ⋯ ║ ╙─ div aria-label="Timeline: low poly animals’s Tweets" ║ ╙─ div style="position: relative; min-height: 6154px;" ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ div style="position: absolute; width: 100%; transform: translateY(1053.5px); transition: transform 0.15s linear 0s;" ║ ║ ╙─ div ║ ║ ╙─ div ║ ║ ╙─ article role="article" tabindex="0" ║ ║ ╙─ div ║ ║ ╙─ div ║ ║ ╙─ div ║ ║ ╟─ ⋯ ║ ║ ╙─ div data-testid="tweet" ║ ║ ╟─ ⋯ ║ ║ ╙─ div ║ ║ ╟─ ⋯ ║ ║ ╙─ div ║ ║ ╟─ ⋯ ║ ║ ╟─ div ║ ║ ║ ╙─ div ║ ║ ║ ╙─ div ║ ║ ║ ╙─ div ║ ║ ║ ╙─ div ║ ║ ║ ╙─ a href="/lowpolyanimals/status/1397613505595969539/photo/1" role="link" ║ ║ ║ ╙─ div style="" ║ ║ ║ ╟─ ⋯ ║ ║ ║ ╙─ div ║ ║ ║ ╙─ div aria-label="Image" data-testid="tweetPhoto" style="margin-bottom: -30%;" ║ ║ ║ ╟─ ⋯ ║ ║ ║ ╙─ img alt="Image" draggable="true" src="https://pbs.twimg.com/media/E14DAsgVEAAbk_-?format=png&name=small" ║ ║ ║ ║ ║ ╙─ ⋯ ║ ║ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╟─ ⋯ ║ ╙─ ⋯ ║ ╟─ ⋯ ╟─ ⋯ ╟─ ⋯ ╟─ ⋯ ╟─ ⋯ ╟─ ⋯ ╟─ ⋯ ╟─ ⋯ ╙─ ⋯

PS. I didn't make this whole tree by hand: that would have taken hours. I wrote a short Python program using Beautiful Soup to generate this ansi art from Twitter's HTML, and then marked it up a little manually.