What is HTML and why would you need to read it?
HyperText Markup Language
Every website or web page that you visit uses HyperText Markup Language, or HTML for short, to show you content and perform various tasks. This very page is written in HTML. What is HyperText Markup Language? It is a set of instructions that define how a web page should be displayed. When a web browser, or a search engine fetches a page, the raw HTML instructions are what it sees.
There could be one of many technologies that run in the background, PHP or Java for example, but the user-facing part is always HTML. Popular Content Management Systems (CMS), such as Wordpress, typically use a server-side programming language, but interact with the user via HTML.
Your web browser will handle the part of rendering this set of instructions into a format that the user is intended to see. These instructions are usually in the form of HTML tags, which we will dive into below.
Why is it important to understand HTML
For most people, HTML is not something they would ever have to consider. You open a web page in your browser, and see the information in a nicely formatted way. However, if you are developing your own site, intend to figure out why something on it is broken, or want to optimize it for speed or search rankings, understanding HTML, and diving into the source code is essential.
What does HTML look like? Unlike many other programming languages, HTML is written in plain text, and can be read and edited via any text editor. In fact, most web browsers have the ability to display this code within the browser. Check out our article on How to view HTML in browsers. You can also use our View Source tool to do this.
It is important to understand HTML when developing or managing your own site. The same content can be presented in multiple ways, but if you are not using the correct tags, or are using them incorrectly, it may be a hindrance to at least some of your visitors. The wrong use of code may cause search engines to not crawl your website properly, resulting in lower rankings. It may appear broken to a visually impaired visitor, or someone using a different web browser. By understanding and validating your source code, you can bring in more traffic, and provide a better experience to your visitors.
The basics of HTML tags
HTML consists of tags that usually surround a piece of content, and determine what to do with it. At their simplest, HTML tags begin in the form <tag-name> (less than sign followed by the tag name and ending in a greater than sign) and end in a closing tag in the form </tag-name> (less than sign followed by a backslash, followed by the tag name and ending in a greater than sign).
Tags can have additional attributes added to the opening tag. For example, you can add a unique identifier in the format <tag-name id="identifier">. In fact, certain tags, such as the <a> tag which defines a hyperlink, are unable to do much without these attributes (the href= attribute in this case). Certain tags do not need a closing tag, and simply contain all the information within the opening tag.
Check out our HTML tags reference for a list of tags, and what each tag does.
As a basic example, let us imagine that this part of the sentence is important.
We can make it stand out by using the <strong> tag, like this:
<p>As a basic example, let us imagine that <strong>this part of the sentence is important</strong>.</p>
Whitespace in HTML
Whitespace consists of characters that are usually used to separate words, sentences, or paragraphs. Namely spaces, tabs, and newlines. It may seem counterintuitive to those without programming experience, but unlike a typical text document, HTML ignores most whitespace characters. In a paragraph <p> tag, one or more whitespace characters are rendered as a single space. Say you write the following HTML:
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
You would expect this to display in your browser on 7 separate lines, with a gap between "enim" and "ad" on line 2. However, this is how the browser will display this code:
Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
Styling your content
While HTML tags do a pretty decent job of explaining, classifying, and displaying your content, they are not meant to style it. Older versions of HTML included tags, such as the <font>, <strike>, and <big> tags, that did this. However, their capabilities were very limited, and they made longer pieces of HTML code one big mess.
Cascading Style Sheets, or CSS for short, can be loaded from external sources, or included within the HTML, to apply all sorts of styling parameters. These may be applied to a particular type of element, the whole document, a class, or a unique item. The ability to load CSS from outside the HTML document has many benefits. Firstly, it creates a logical separation between the content, and its styling. A search engine, or visually impaired visitor do not need the CSS, and can get to the content right away. It also allows faster loading of the main content.
The main structure of a HTML web page
Unlike most other programming languages, HTML is designed in a way that you could get away with minimal code, without anything breaking. In fact, you could write a simple paragraph without any HTML tags, save it as an HTML document, and open it in your browser, without any errors. However, for a number of reasons, you should follow certain guidelines and best practices while writing HTML. This will ensure that your website is consistent, secure, fast, and easily indexable by search engines.
This is what the main structure of a valid web page looks like:
<!DOCTYPE html><html lang="en-US" prefix="og: http://ogp.me/ns#"><head></head><body></body></html>
The first line (<!DOCTYPE html>) is a declaration that this is a HyperText Markup Language document.
The next tag (<html lang="en-US" prefix="og: http://ogp.me/ns#">) encloses all the HTML in the document, specifies the language used, and adds an OpenGraph definition (more on that some other time).
The <head> tag contains meta information about the page that is not usually displayed to the user, but is necessary for the browser and search engines. The title of the page is inserted here, and although it shows up at the top of the browser, it is not part of the main content. Other information here can include the styles that need to be loaded, what the preview of the page will look like when shared on social media, and tracking info for services such as Google Analytics.
Lastly, all the content on the page;headings, text, images, videos etc.; is contained within the <body> tag.
Recommended structure for a valid web page
Now that we have a basic structure, let us add other useful tags to get a complete page that looks good to both visitors, as well as search engines.
<!DOCTYPE html><html lang="en-US" prefix="og: http://ogp.me/ns#"><head><title>This is the title</title></head><body><header></header><main><h1>This is the main heading</h1></main><footer></footer></body></html>
Here you can see a few new tags to the structure which I will now describe.
The <title> tag goes inside the <head> tag, and describes the purpose of the page. The title should be unique for each page on your website, and concise enough for browsers and search engines to figure out what the page is about.
The <header> tag, not to be confused with the <head> tag, goes in the body, and is used to separate elements such as the logo and navigation bar from the main content of the page. This is often the same across all your pages to provide a consistent experience for your users.
The <main> tag contains the primary content of the page. Any article, signup form, or embedded photo/video content should go in here.
The <h1> tag is the primary heading of the page that you want to show to the visitor. This is another element that should not be confused with the <head> or <heading> tags. While you can have many headings on a page for each section or piece of content, the h1 is the most important. It is recommended that you have exactly one h1 tag, and use h2 to h6 tags for the rest of your content. The h1 tag is similar to the <title> tag, and on most sites, contain the same text.
The <footer> tag can be used to display additional information that you might want to include on all your pages. A brief description of your site, subscribe button, copyright/privacy info are some examples of what you can put here.
Example of a typical web page
<!DOCTYPE html><html lang="en-US" prefix="og: http://ogp.me/ns#"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="http://gmpg.org/xfn/11"><title>This is the title</title><meta name="description" content="Learn how to read the HTML source code of a given website and how to use this for development, troubleshooting, and improving your search engine rankings."><meta name="robots" content="index,follow"><link rel="canonical" href="https://www.view-page-source.com/how-to-read-source-code/"></head><body><header><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact</a></li><ul></nav></header><main><article><h1>This is a very cool and useful page</h1><p>The information in this article will change your life.</p><h2>This is a subheading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h2>Another subheading</h2><p>Where would we be without HTML?</p><p>Check out the source code of this page on <a href="https://www.view-page-source.com/" title="Source Code Viewer">View Page Source</a>.</p></article></main><footer><p>Copyright © 2024 <a target="_blank" href="https://www.view-page-source.com/" title="View Page Source">View Page Source</a>. All rights reserved.</p></footer></body></html>
You can see that there are now a number of new tags. Meta tags, such as "charset" and "canonical" tell browsers/search engines about what language the page is in, and the correct URL that should be used to refer to it.
What can HTML source code be used for
Now that we know the basics of how to read the code for any web page, we can look at how this can be useful.
How to use HTML for development
The most obvious use is if you are developing your own website. Looking at the source code can tell you if the structure of your page is according to standards, or to figure out why something is broken.
Say you forget to include a starting, or closing tag for an important element. The page will still display in your browser, but it will appear broken.
Optimizing source code for better SEO
Another common use is to use the source code to improve your search engine rankings. The source code can tell you if you have included essential tags that can help you rank. Or what tags can be replaced with other tags that better present your content.
We will explore Search Engine Optimization in more detail in a separate article.
Conclusion
Having a basic understanding of how the web works can be very fruitful for anyone with an online presence. Furthermore, it is relatively easy to grasp the basic concepts and begin to improve the speed, reputation, and search rankings foryour website. Follow us for more insights related to these topics, and do let us know in the comments if there is something you would like us to discuss.
Additional Resources
Useful tools and guides about source code
How to hide the source code of a website
How source code works and what you can do to hide and protect the code of your website from anyone trying to steal your intellectual property
Tool to view the source code of any website
Use our free and simple online utility to view the source code, as well as additional info, of any web page on the Internet. Click below