Annotating my website page structure

While I was trying to figure out how to link a manifest.json file to my feed reader, I found myself looking at the source code behind Jeremy Keith's website home page. The fact that you can see the source code behind how a page loads is an amazing feature behind the web. You can see the code that tells a browser how a web page loads. Sometimes the source code behind a site is almost or completely illegible but there are plenty of sites out there whose code you can peruse.

Jeremy annotates some features in his site's HTML code. This makes it easier to navigate the page. Jeremy calls out how the web enables this degree of reverse engineering. It's a feature we certainly should not take for granted. Because web code is open, we can all see how some of the amazing features behind the web work. Jeremy's site inspired me to add similar annotations to my source code. My aim in doing so is to make it easier for people, especially beginners, to read how my site is structured.

I have documented a lot (but not all) of the meta tags that I use on my site, indicating their purpose and what they allow me or browsers to do. I have learned so much about meta tags in the last year. I couldn't have done it without being able to peek behind sites to see how their meta tags work. I may even write about some meta tags I use on my site some day.

I have also added comments that annotate the overall structure of my website. Annotations cover features like my website navigation bar, skip links, and my footer. The annotations are not much but I think will aid in understanding the basic structure behind my website. Semantic HTML, where one uses the right HTML tag for the job, is itself quite readable. But written words are even easier to read.

The photo below illustrates some of the annotations you can see by viewing the source code behind this site in your browser:

Go into your browser's web tools and take a peek at the new annotations. If you have questions about how my site works, feel free to send me an email at readers@jamesg.blog and I can help you out. If you own a website of your own, consider whether you could annotate your site to explain features that you think are useful or cool.

Tagged in web.