What a website's source code tells about it
In this post, written specially for non-techie bloggers and website owners, we would discuss the following:
All websites are written primarily in a language called HTML. Modern websites and blogs do have large chunks of scripts, widgets, modules etc written in other languages; yet, HTML remains the backbone.
HTML and other web languages of the website or blog are for the browser (IE, Chrome etc) to decipher while you see the content the way you can understand.
You can easily find how the HTML code of any webpage looks like. Open a webpage, right-click on a plain area of the page and depending upon the browser, take this action: On IE/ Edge, choose 'View source', on Chrome/ Firefox, choose 'View Page Source'. On Safari, you should have 'Develop mode' enabled through 'Preferences'. A menu item appears and gives option to view source code.
The code looks like the image given here but even for a small page, it might run into hundreds of lines. In addition, there are so many elements on the website that are not part of this code but are linked to codes elsewhere.
Non-techie bloggers and website owners are of course rarely concerned with what is going on in the background but use UI (user interface) provided by the host/ platform. When we create a website or blog, even the most committed coder seldom writes the code word by word. Even big websites, written by techies, depend mostly on content management systems (CMS) or other interfaces than writing each word of the HTML code.
Then why should we bother to learn the code at all?
Because it helps you understand various elements of the website better; that in turn might help you in SEO, better highlighting elements, doing some small tweaks that might not be given by the host/ platform, and some other simple tasks.
All HTML pages are written according to a strict structure that must be followed.
You can do an interesting exercise that would take just two minutes but you will know some very basic elements of the source code and HTML.
Select the entire source code of any webpage, and paste it on a word processor such as MS Word. Look for <head>, color it red; look for </head> and color it red too. Similarly find <body and color it blue. Find any one occurrence of these expressions and color them green: <meta , <script , <img , <a href .
All HTML documents (web pages) start with <html> and end with </html> This type of expressions (closed inside <,>) are called tags. All code is written between these two tags. On blogging platforms, site builders and CMSs, these codes are written by the software based on what you write in a human readable language (e.g. English). If you are working on Blogger platform, you can see blog's code by going to Template>Customize HTML. You can see a post's code by clicking on HTML button at the top left of the post editor.
In the top part of the source code, you will find <head> and after a few lines, </head> tag. Major styling codes are written within this area. When affiliate sites want you to put their code on your website for authentication, you should paste their code just before the closing </head> tag. Major meta tags that are prescribed by SEO experts are also to be put here. Look at various <meta...> tags; one of these might have been colored green by you in the present exercise. When you put 'description' for the blog and the post on Blogger and Wordpress, these land in <meta description> tag.
All that is outside the head portion comes in the body of the document, within the opening <body...> and closing </body> tags.
It might help sometimes to know a few useful tags. Let's see just a few:
You might have read in SEO articles that search engines cannot read pictures, and therefore you should put an alt tag on them to make them searchable and therefore coming on search pages. ALT is in fact not a tag but part of image tag written as <img> and is therefor 'alt attribute of img tag'. it stands for 'ALTernate' and tells browsers what is contained in the image. In the first code below, there is no alt attribute while the second code has this attribute.
1. <img src="http://abc.jpg">
2. <img src="http://abc.jpg" alt="bridal-shoes">
Blogger and Wordpress let you give a caption or description of any image that you put on a post and automatically give it a search description. Blogger additionally allows you to give a specific alt expressions when you right click on the image on the post editor, then go to Properties and then to alt.
Putting a relevant alt expression on the image makes it readable for search engines and screen readers (for visually impaired visitors). In the above example, the imaginary blog on women's shoes had this image of bridal shoes.)
Remember, though Blogger allows putting alt expression through a text box as said above, it does not allow this on other images. You can easily put alt=.... attribute to any image by going to the HTML version of a widget or HTML of the blog itself (Template>Customize HTML).
<script> is used for putting a script on the blog. You can install Google Analytics and many third-party scripts, generally in the head portion of the blog's code. However, use scripts only from highly dependable sources such as Google, as some scripts might be harmful, some might steal your data and some might take visitors to their sites through you. In fact, that applies to all types of codes and widgets.
A bit about <a href="...">xyz</a>. This tag is used for hyperlinking. The linked text is placed in place of xyz and the link URL is placed within inverted commas. You can use this tag for putting links where it is otherwise difficult to put a link or the blogging platform does not have a button for that.
Hope, this little knowledge of source code of your blog makes you a bit more comfortable with HTML.
For keen learners and experts, the source code has minefield of information about various elements, how they render, bugs, and so on. This and 'Inspect Element' option when you right click on a webpage, give you all information about each little bit of the webpage. But let's leave that for techies!
- What is source code and how to obtain it.
- What information can we get from source code
- How to use that information for improving the website's quality
Source code: the real website
All websites are written primarily in a language called HTML. Modern websites and blogs do have large chunks of scripts, widgets, modules etc written in other languages; yet, HTML remains the backbone.
HTML and other web languages of the website or blog are for the browser (IE, Chrome etc) to decipher while you see the content the way you can understand.
You can easily find how the HTML code of any webpage looks like. Open a webpage, right-click on a plain area of the page and depending upon the browser, take this action: On IE/ Edge, choose 'View source', on Chrome/ Firefox, choose 'View Page Source'. On Safari, you should have 'Develop mode' enabled through 'Preferences'. A menu item appears and gives option to view source code.
The code looks like the image given here but even for a small page, it might run into hundreds of lines. In addition, there are so many elements on the website that are not part of this code but are linked to codes elsewhere.
A brief appreciation of the source code
Non-techie bloggers and website owners are of course rarely concerned with what is going on in the background but use UI (user interface) provided by the host/ platform. When we create a website or blog, even the most committed coder seldom writes the code word by word. Even big websites, written by techies, depend mostly on content management systems (CMS) or other interfaces than writing each word of the HTML code.
Then why should we bother to learn the code at all?
Because it helps you understand various elements of the website better; that in turn might help you in SEO, better highlighting elements, doing some small tweaks that might not be given by the host/ platform, and some other simple tasks.
All HTML pages are written according to a strict structure that must be followed.
You can do an interesting exercise that would take just two minutes but you will know some very basic elements of the source code and HTML.
Select the entire source code of any webpage, and paste it on a word processor such as MS Word. Look for <head>, color it red; look for </head> and color it red too. Similarly find <body and color it blue. Find any one occurrence of these expressions and color them green: <meta , <script , <img , <a href .
All HTML documents (web pages) start with <html> and end with </html> This type of expressions (closed inside <,>) are called tags. All code is written between these two tags. On blogging platforms, site builders and CMSs, these codes are written by the software based on what you write in a human readable language (e.g. English). If you are working on Blogger platform, you can see blog's code by going to Template>Customize HTML. You can see a post's code by clicking on HTML button at the top left of the post editor.
In the top part of the source code, you will find <head> and after a few lines, </head> tag. Major styling codes are written within this area. When affiliate sites want you to put their code on your website for authentication, you should paste their code just before the closing </head> tag. Major meta tags that are prescribed by SEO experts are also to be put here. Look at various <meta...> tags; one of these might have been colored green by you in the present exercise. When you put 'description' for the blog and the post on Blogger and Wordpress, these land in <meta description> tag.
All that is outside the head portion comes in the body of the document, within the opening <body...> and closing </body> tags.
It might help sometimes to know a few useful tags. Let's see just a few:
You might have read in SEO articles that search engines cannot read pictures, and therefore you should put an alt tag on them to make them searchable and therefore coming on search pages. ALT is in fact not a tag but part of image tag written as <img> and is therefor 'alt attribute of img tag'. it stands for 'ALTernate' and tells browsers what is contained in the image. In the first code below, there is no alt attribute while the second code has this attribute.
1. <img src="http://abc.jpg">
2. <img src="http://abc.jpg" alt="bridal-shoes">
Blogger and Wordpress let you give a caption or description of any image that you put on a post and automatically give it a search description. Blogger additionally allows you to give a specific alt expressions when you right click on the image on the post editor, then go to Properties and then to alt.
Putting a relevant alt expression on the image makes it readable for search engines and screen readers (for visually impaired visitors). In the above example, the imaginary blog on women's shoes had this image of bridal shoes.)
Remember, though Blogger allows putting alt expression through a text box as said above, it does not allow this on other images. You can easily put alt=.... attribute to any image by going to the HTML version of a widget or HTML of the blog itself (Template>Customize HTML).
<script> is used for putting a script on the blog. You can install Google Analytics and many third-party scripts, generally in the head portion of the blog's code. However, use scripts only from highly dependable sources such as Google, as some scripts might be harmful, some might steal your data and some might take visitors to their sites through you. In fact, that applies to all types of codes and widgets.
A bit about <a href="...">xyz</a>. This tag is used for hyperlinking. The linked text is placed in place of xyz and the link URL is placed within inverted commas. You can use this tag for putting links where it is otherwise difficult to put a link or the blogging platform does not have a button for that.
Hope, this little knowledge of source code of your blog makes you a bit more comfortable with HTML.
For keen learners and experts, the source code has minefield of information about various elements, how they render, bugs, and so on. This and 'Inspect Element' option when you right click on a webpage, give you all information about each little bit of the webpage. But let's leave that for techies!
