Open source code is a development software and information technology concept which means that the source code is property of an organization, but it is organized or published so that anyone can see it or download and modify it under open content licenses.
Open source code makes it easy to reuse other peoples’ work in your own projects. Copy and paste these steps into GitHub and change the code to something you want. This whole presentation is open-sourced on GitHub.
View Source Code in Chrome
So how do you view the source code of a website? Here are the step-by-step instructions to do so using the Google Chrome browser.
- Open the Google Chrome web browser (if you do not have Google Chrome installed, this is a free download).
- Navigate to the web page you would like to examine.
- Right-click the page and look at the menu that appears. From that menu, click View page source.
- The source code for that page will now appear as a new tab in the browser.
- Alternatively, you can also use the keyboard shortcuts of Ctrl+U on a PC to open a window with a site’s source code displayed. On a Mac, this shortcut is Command+Option+U.
How to See the HTML Code of a Web Site
Hypertext Markup Language
HyperText Markup Language is a language used to create pages on the Web. Web browsers interpret the language and display the page as instructed by the HTML. By viewing the page’s HTML or source code, you can see how elements on the page are handled as well as paths to the page’s images or audio features. For a small business, viewing the source code of a page that has an element you wish to incorporate on your own page or even viewing elements on your own page can be helpful in determining how the browser interprets the HTML.
Open your browser and navigate to the page for which you wish to view the HTML
Right-click on the page to open the right-click menu after the page finishes loading.
Click the menu item that allows you to view the source. In Internet Explorere, the menu item is “View Source.” In Mozilla Firefox and Chrome, the menu item is “View Page Source.” In Opera, the menu item is “Source.”
When the source page opens, you’ll see the HTML code for the full page. Scan through it to locate code for specific features and objects on the page, as desired.
Use Chrome’s Developer Tools
In addition to the simple View page source ability that Google Chrome offers, you can also take advantage of their excellent Developer Tools to dig even deeper into a site. These tools will allow you not only to see the HTML, but also the CSS that applies to view elements in that HTML document.
To use Chrome’s developer tools:
- Open Google Chrome.https://7c9fd49706717cb93304468a0fbf7689.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html
- Navigate to the web page you would like to examine.
- Select the three-dot menu in the upper-right corner of the browser window.
- From the menu, hover over More tools and then choose Developer tools in the menu that appears.
- A window will open that shows the HTML source code on the left of the pane and the related CSS on the right.
- Alternatively, if you right-click an element in a web page and select Inspect from the menu that appears, Chrome’s developer tools will pop up and highlight the specific part you chose in the HTML with the corresponding CSS shown to the right. It is super helpful if you want to learn more about a particular piece of a site.
To view the source of a website on a Mac using Safari, navigate to the page you want and use the following keyboard shortcut: Option+Command+U.
Alternatively, you can right-click anywhere on the page and select “Show Page Source” from the dropdown menu.
How to View Source Code
How to View Source Code.
The first step in checking your website’s source code is to view the actual code. Every web browser allows you to do this easily. Below are the keyboard commands for viewing your webpage source code for both PC and Mac.
- Firefox – CTRL + U (Meaning press the CTRL key on your keyboard and hold it down. While holding down the CTRL key, press the “u” key.) Alternatively, you can go to the “Firefox” menu and then click on “Web Developer,” and then “Page Source.”
- Internet Explorer – CTRL + U. Or right click and select “View Source.”
- Chrome – CTRL + U. Or you can click on the weird-looking key with three horizontal lines in the upper right hand corner. Then click on “Tools” and select “View Source.”
- Opera – CTRL + U. You also can right click on the webpage and select “View Page Source.”
- Safari – The keyboard shortcut is Option+Command+U. You also can right click on the webpage and select “Show Page Source.”
- Firefox – You can right click and select “Page Source” or you can navigate to your “Tools” menu, select “Web Developer,” and click on “Page Source.” The keyboard shortcut is Command + U.
- Chrome – Navigate to “View” and then click on “Developer” and then “View Source.” You also can right click and select “View Page Source.” The keyboard shortcut is Option+Command+U.
Once you know how to view the source code, you need to know how to search for things in it. Usually, the same search functions you use for normal web browsing apply to searching in your source code. Commands like CTRL + F (for Find) will help you quickly scan your source code for important SEO elements.
The title tag is the holy grail of on-page SEO. It’s the most important thing in your source code. If you’re going to take one thing away from this article, pay attention to this:
You know those results Google provides when you’re searching for something?
All of those results come from the title tags of the webpages they are pointing to. So, if you don’t have title tags in your source code, you can’t show up in Google (or in any other search engine, for that matter). Believe it or not, I’ve actually seen websites without title tags.
Now, let’s do a quick Google search for the term “Marketing Guides”:
You can see that the first result is for the KISSmetrics blog section on marketing guides. If we click on that first result and view the page source code, we can see the title tag:
The title tag is designated by the opening tag: <title>. It ends with the closing tag: </title>. The title tag is usually near the top of your source code in the <head> section.
And we can see that the content inside the title tag matches what is used in the headline of that first Google result.
Not only are title tags required in order to be included in Google search results, but Google identifies the words in your title tags as important keywords that they think are relevant to their users’ searches.
So if you want a certain webpage to rank for a particular subject matter, you’d better make sure words that describe the subject matter are in the title tag. There are a number of online resources where you can learn more about how keywords and title tags are important in your overall site architecture.
Here are some important things to remember about your title tags:
- Make sure you have only one title tag per webpage.
- Make sure every webpage on your website has a title tag.
- Make sure each title tag on your website is unique. Never duplicate title tag content.
Open-sourcing code to a website you have spent months, maybe even years, creating can be an overwhelming task. This guide will help you take the first steps towards opening and maintaining your source code through GitHub, WordPress Plugin Repository (WPPR), and more.