How to Read Website Source Code

For students who have had no computer programming background, it’s hard to relate a few simple lines of codes to the beautiful animations and websites.

When I started learning HTML it was not clear to me how these codes are actually going to help me create a website that I can put online. The first few things that I learned were the layout of an HTML page and the tags within it.

I am still learning, but I would like to share one thing that made me see the bigger perspective of it all.

Website Source Code

Open your favorite website. Use CTRL + U or by right-clicking chose View page source from the browser’s menu. Now you can easily see the source code behind the website. To view the source code on your phone, just go to the website and type view-source: before the URL of the website.

When you start looking at the source code of different websites, at first, you won’t be able to understand most of it. But as you learn more, you will see that all of the things that you see on a website are embedded inside those HTML tags that you are learning. Here are some examples.

1. <title>

Everything that you write inside the <title> tag is shown in the browser window and also in the search results.

Source Code:
Text in the title tag appears in the Browser Window
Text in the title tag is shown in the Search Results

2. <a>

The <a> tag, which is an inline tag, defines the hyperlink. Its attribute ‘href’ tells you the destination of the link. You can add a link to a word or sentences by embedding it inside <a> tag as shown below.

Source Code:

3. <div>

The <div> tag which is a block tag contains other HTML tags. It is mainly used to style the content inside it with CSS and JavaScript. Here <g-emoji> is short for GitHub emoji. If the image can not be loaded it loads alt text. If the alt text cannot be loaded another attribute fallback-src will be loaded.

Source Code:

4. <audio>

Using the <audio> tag you can add the desired music file in your webpage.

Source Code:

These are some of the examples that show you how HTML tags are used to create a website. Now you can view the page source of this website and try to find the tags that you have learned.


Related Posts