How to View Source Code on a Web Page

By Lisa Lopuck from Web Design For Dummies, 3rd Edition

Web browsers let you view the HTML and CSS source code of a web page. Sneaking a peek at the source code of a web page is a great way to see how it’s built — and to see how you can do something similar.

To see the HTML code behind a web page, follow these simple steps:

Go online and open a web browser, such as Mozilla Firefox or Internet Explorer.
Go to any website by typing the URL of any web page whose HTML source code you’d like to see.
Look at the HTML source of the page:
- In Firefox, choose View→Page Source from the menu bar.
- In Internet Explorer, choose View→Source.
You’ll see a new window with the HTML code for the current page you are viewing. If you glance through the code, you’ll see the text content of the page and all the <a> tags for each link. You can select and copy the whole page or any portion of it.

The source window shows you just the HTML code, not any externally linked CSS documents (see the following figure). If the page uses CSS, the <head> section at the top of the HTML code will contain the URL path to the CSS file. You can copy the path and paste that into your browser’s location field, like typing in a web address, and see the CSS code that the page uses.

Credit: © Daimler Vehicle Innovations USA LLC

In the example, the CSS link is written as a relative path — relative to the path already in the web browser. To complete the path you need to append /unassets/css/smart_min.css to the URL that shows in the address bar at the top of the screen.

When you finish adding the relative path to the URL, you press or click Enter to access the CSS; if you’re running Windows, the CSS shows up in a Notepad file that opens automatically onscreen, as in the following figure.