Why source code of some website looks messy when I use view page source from browser

I'm new to web development and when I come a cross a new website I view it's source from the browser and try to learn how the site is structures and all. But when I view the source code of some websites, it looks really messy and difficult to learn. I want to why source code looks like that and if it is for some security purposes, I just want to know what the tools out there that we can turn our source code into that messy unreadable code when we go for production.

You can see the below images to get what I mean.

Image 1 Image 2