How to View the HTML Source Code of a Web Page in Safari on Mac

Whether you are a web developer debugging a layout, a student learning HTML, or simply curious about how a specific website is built, viewing the source code of a webpage is a fundamental browser feature. While browsers like Google Chrome and Mozilla Firefox make this option visible by default, Apple’s Safari hides its developer tools to keep the interface uncluttered for standard users. To view the HTML source code in Safari on a Mac, you must first enable a hidden menu.

Step 1: Enable the Develop Menu

Before you can inspect code, you need to unlock Safari’s advanced features by enabling the Develop menu in the menu bar.

1. Open the Safari application on your Mac.
2. In the top-left corner of the macOS menu bar, click on Safari.
3. Select Settings… (or Preferences… if you are running an older version of macOS) from the drop-down menu.
4. In the settings window that opens, click the Advanced tab represented by a gear icon on the far right.
5. Look at the very bottom of the Advanced settings window and check the box next to “Show Develop menu in menu bar”.
6. Close the settings window. You will now see a new Develop option listed in your Mac’s top menu bar, situated between Bookmarks and Window.

Step 2: View the Page Source Code

With the Develop menu unlocked, you now have multiple ways to view the raw HTML structure of any webpage.

Method A: Using the Menu Bar

1. Navigate to the webpage you wish to inspect.
2. Click on the newly enabled Develop option in the top menu bar.
3. Select Show Page Source from the drop-down list.
4. The Safari Web Inspector panel will open (usually docked at the bottom or side of your window), displaying the raw, color-coded HTML document.

Method B: Using the Right-Click Context Menu

This is the fastest method for examining the overall page structure.

1. Navigate to your target webpage.
2. Right-click (or Control-click) anywhere on a blank area of the page background.
3. Select Show Page Source from the context menu.

Method C: Using Keyboard Shortcuts

For power users, keyboard shortcuts bypass the menus entirely. Once the Develop menu is enabled, simply press Option + Command + U (⌥⌘U) to instantly open the Web Inspector and jump straight to the source code view.

Inspecting Specific Elements

Viewing the entire page source can be overwhelming if you are only interested in one specific image, button, or paragraph. Instead of searching through thousands of lines of code, you can inspect individual elements directly.

Right-click directly on the specific item you want to examine (e.g., a headline) and select Inspect Element from the context menu. The Web Inspector will open and automatically highlight the exact line of HTML code responsible for rendering that specific piece of the webpage, allowing for highly targeted debugging and analysis.