safari html code

• Great Tech Gifts for Any Occasion
• The Best Gadgets for The Beach or Pool

How to View HTML Source in Safari

If you want to see how a webpage was built, try viewing its source code.

• University of California
• University of Washington

What to Know

• From Safari menu, select Develop > Show Page Source .
• Or, right-click on page and Show Page Source from drop-down menu.
• Keyboard shortcut: Option+Command+U .

This article shows how to view HTML source code in Safari.

View Source Code in Safari

Showing source code in Safari is easy:

Open Safari.

Navigate to the web page you would like to examine.

Select the Develop menu in the top menu bar. Select the Show Page Source option to open a text window with the HTML source of the page.

Alternatively, press Option+Command+U on your keyboard.

If the Develop menu is not visible, go into Preferences in the Advanced section and select Show Develop menu in menu bar .

On most web pages, you can also view the source by right-clicking on the page (not on an image) and choosing Show Page Source . You must enable the Develop menu in Preferences for the option to appear.

Safari also has a keyboard shortcut for viewing the HTML source: Hold down the command and option keys and hit U  ( Cmd + Opt + U .)​

Advantages of Viewing Source Code

Viewing the source to see how a web designer achieved a layout will help you learn and improve your work. Over the years, many web designers and developers have learned quite a lot of HTML by merely viewing the source of web pages they see. It's an excellent way for beginners to learn HTML and for seasoned web professionals to see how others used new techniques.

Remember that source files can be very complicated. Along with the HTML markup for a page, there will probably be significant CSS and script files used to create that site's look and functionality, so don't get frustrated if you can't figure out what's going on immediately. Viewing the HTML source is just the first step. After that, you can use tools like Chris Pederick's Web Developer extension to look at the CSS and scripts as well as inspect specific elements of the HTML.

Is Viewing Source Code Legal?

While copying a site's code wholesale and passing it off as your own on a website is certainly not acceptable, using that code as a springboard to learn from is actually how many people make advancements in this industry. You would be hard-pressed to find a working web professional today who has not discovered something by viewing a site's source!

Web professionals learn from each other and often improve upon the work that they see and are inspired by, so don't hesitate to view a site's source code and use it as a learning tool.

You cannot edit webpage source code in Safari. When viewing the source code in Safari, copy and paste it into an app that can export files as plain text (like TextEdit or Pages).

The iOS version of Safari doesn't directly support webpage source viewing, but you can set up a custom bookmark that will accomplish the same task. Create a new bookmark in Safari and name it "Show Page Source" (or something similar, so long as you can identify it). Then in the address text box, copy and paste a specific javascript code , then Save . Once the bookmark is set up, navigate to a webpage that you want to vide the source of, then open your bookmarks and select the new Show Page Source bookmark to view the webpage's source code.

Get the Latest Tech News Delivered Every Day

• How to View the HTML Source in Google Chrome
• How to Use Web Browser Developer Tools
• How to View the Source Code of a Web Page
• Add More Features by Turning on Safari's Develop Menu
• 8 Best Free HTML Editors for Windows for 2024
• How to Inspect an Element on a Mac
• How to Activate and Use Responsive Design Mode in Safari
• A Step-By-Step Guide to Editing the HTML Source of an Email
• How to View the Source of a Message in Mozilla Thunderbird
• How to View the Source of a Message in Apple Mail
• How to Save Web Pages in the Opera Desktop Browser
• How to Find an RSS Feed on a Website
• The Best Windows Web Editors for Beginners
• What is WOFF?
• Keyboard Shortcuts for Safari on macOS
• How to Save Web Pages in Safari for OS X

Sign up for our daily newsletter

• Privacy Policy
• Advertise with Us

How to View the Source Code of a Webpage in Safari on Mac

Behind every beautiful webpage is a complex code called source code that serves the design and the functionality of that webpage to its users. Sometimes you may get curious and would like to see exactly what code builds a webpage. Viewing the source code of a webpage is possible in almost all web browsers, and the same applies to Safari for Mac.

Safari for Mac does allow you to view the source code of a webpage; however, it does not work like Chrome or Firefox. To view the source of a page in Safari you need to first unlock a hidden menu in the browser.

Here’s how to enable that menu and then see the source of a webpage using multiple ways.

View the Source Code of a Webpage in Safari on Mac

1. Launch Safari on your Mac.

2. When Safari launches, click on the “Safari” menu on the top followed by “Preferences…”

3. When the Preferences panel opens, click on the tab that says “Advanced”. It should be the last one in the menu on the top.

4. Inside the Advanced tab you should see an option that says “Show Develop menu in menu bar.”

Checkmark the box for the option, and the menu should instantly be added to the menu bar in the browser.

The Develop menu is now unlocked in Safari on your Mac. Here’s how you can use various options it gives you to access the source code of a webpage.

1. Using the Develop Menu

In the menu bar of Safari, you should now see a new option called “Develop” that has just been unlocked. To view the source of a page, click on the “Develop” menu and then choose “Show Page Source.”

Safari should instantly show you the full source code of the webpage.

2. Using a Keyboard Shortcut

If you plan to access the source code of a number of webpages, you may want to use a keyboard shortcut as it will be much faster than clicking an option in the menu bar and selecting another option.

While a webpage is open in Safari, press the “Option + Command + U” key combination, and Safari should let you see the source code of the webpage.

3. Using the Right-Click Menu

If Safari is your primary browser, and you happen to be someone who is interested in viewing the codes behind various webpages, the guide above should help you do that without requiring you to leave your favorite browser.

Our latest tutorials delivered straight to your inbox

Mahesh Makvana is a freelance tech writer who's written thousands of posts about various tech topics on various sites. He specializes in writing about Windows, Mac, iOS, and Android tech posts. He's been into the field for last eight years and hasn't spent a single day without tinkering around his devices.

• Accessories
• Meet the team
• Advertise with us
• Privacy Policy

Web pages are generally written in HTML (HyperText Markup Language) or comparable markup language. Web browsers have to get along with a number of web resource elements like images, scripts, stylesheet and more to show the web page. Ever wanted to view the source code of any webpage in Safari on your iPhone or Mac?

Turns out, you can easily access the HTML source code of any webpage in Safari. Once you have enabled your device, you are just a few clicks away from accessing it. Here is how it works.

How to View Source Code of a Webpage in Safari on Mac

How to enable develop mode in safari on mac.

To access the source code in Safari on your Mac, you need to first enable Develop Mode.

Step #1. Open Safari on your Mac and click on Safari → Click on Preferences.

Step #2. Next, click on the Advanced tab → Check the box next to Show Develop menu in the menu bar .

A new tab named “Develop” will now appear in the menu bar.

How to Show/View Page Source Code in Safari on Mac

There are three ways you can access page source code of a webpage.

• Just right-click on a page and select “Show Source Code”. Now, check out the source code of the page in the new window

• On the web page, you need to press the Option/Alt+Command+U keys at once

• While viewing any web page, select Develop in the Menu bar and choose “Show Source”

How to View Webpage Source Code in Safari on iPhone and iPad

There are quite a few iOS apps that let you view the source code of any webpage in Safari on your iOS device. But, I find “Source” very handy in letting you access HTML source of any web page.

How to Enable Safari Extension on your iOS device

Step #1. First off, you need to download “Source” on your iOS device . It’s priced at $0.99.

Step #2. Now, open Safari and tap on the Share button in the toolbar.

Step #3. Next, you have to scroll right to the end and tap on More.

Step #4. Now, Make sure to enable Source. Then, tap on Done at the top right corner to confirm.

Access/View Webpage Source Code in Safari on iPhone and iPad

Once you have enabled Safari extension, you can easily access the source code of any web page.

Step #1. Launch Safari on your iOS device.

Step #2. Go to any web page.

Step #3. Next, tap on the Share button.

Step #4. Now, tap on Source. Now, check out the source of the page.

Wrapping Up

Except for developers and some curious people, I don’t think many folks would show a lot of interest in viewing the complex source code of any web page. What do you say?

Jignesh Padhiyar is the co-founder of iGeeksBlog.com, who has a keen eye for news, rumors, and all the unusual stuff around Apple products. During his tight schedule, Jignesh finds some moments of respite to share side-splitting content on social media.

View all posts

🗣️ Our site is supported by our readers like you. When you purchase through our links, we earn a small commission. Read Disclaimer .

LEAVE A REPLY Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Related Articles

How to download watchos 10.5 beta 3 on apple watch, how to download macos sonoma 14.5 beta 3, how to download ipados 17.5 beta 3 on ipad, how to download and install ios 17.5 beta 3 on iphone.

How-To Geek

How to turn on the develop menu in safari on mac.

The Develop menu lets you view page source in Safari on Mac.

Quick Links

How to enable the develop menu in safari on mac, how to view page source in safari on mac.

When you right-click on any web page in Safari on Mac, it doesn't reveal the Show Page Source and Inspect Element buttons. To see these, you need to enable the Develop menu---we'll show you how to do that.

Once you've enabled the Develop menu, right-clicking a blank space on any website will reveal the Inspect Element and Show Page Source buttons. These allow you to take a look at the source code of any website, which is useful for things like downloading images from websites and debugging code or finding out what it looks like behind any site (for website designers).

You can easily turn on the Develop menu in Safari by following a couple of steps. Open Safari on your Mac and click the "Safari" button in the menu bar.

Next, select "Preferences." Alternatively, you can use the keyboard shortcut Command+, (comma). This will also open up Safari preferences.

Go to the "Advanced" tab.

Check the box for "Show Develop Menu in Menu Bar."

Now the Develop menu will appear between Bookmarks and Window at the top.

Apart from being able to view the page source, this will allow you to access developer-focused features, such as disabling JavaScript on any website.

Once you've enabled the Develop menu, there are a couple of ways to view the page source in Safari.

Open any website in Safari and right-click the blank space on the page. Now, select "Show Page Source." You can also get to this menu by using the keyboard shortcut Option+Command+u.

If you're looking for images or other media elements from any web page, Safari makes it easy to find these. In the left-hand pane, you will see various folders such as Images, Fonts, etc. Click the "Images" folder to quickly find the photos that you need.

After selecting an image, you can view its details easily by opening up the details sidebar. The button to open this is located at the top-right of the console, just below the gear icon. You can also open this with the shortcut Option+Command+0.

Click "Resource" at the top of the details sidebar to view details, such as the size of the image and its full URL.

You can change the position of the page source console easily, too. There are two buttons at the top-left of this console, right next to the X button. Click the rectangle icon to move the console to a different side within the browser window.

If you'd like to open the page source console in a separate window, you can click the two-rectangles icon. This will detach the console and open it in a separate window.

To check out the code for any specific element on the page, you can right-click that element and select "Inspect Element." This will take you directly to the code for the element that you selected.

Whenever you're done looking at the code, click the X button to close the page source console and return to browsing on Safari. You can also check out how to view a website's page source in Google Chrome  here.

Related: How to View the HTML Source in Google Chrome

Tips & Tricks

Troubleshooting, how to view page source in safari on mac.

Viewing a web pages source code in Safari, and other web browsers, is a fairly routine activity for many people who work with the web for a living or even as a hobby. Unlike some other browsers, to view page source in Safari you must first enable a developer toolset for the browser to be able to access the view web page source feature.

This tutorial will demonstrate how to view a web pages source in Safari on Mac OS. This applies to all versions of Safari and MacOS.

How to View Page Source in Safari for Mac

Here is how you can view a web pages source in Safari on MacOS:

• First, enable the Safari Develop menu by going to the Safari menu, choosing “Preferences”, going to “Advanced” and checking the box to enable the developer menu

• Next, in any Safari window, navigate to the web page whose source you wish to view and inspect
• Pull down the “Develop” menu at the top of the screen and select “Show Page Source” from the menu options

• The web web pages source will appear on screen in the web inspector Sources section, a web developer toolkit built into Safari

Aside from viewing page source, you can also use the Develop menu to accomplish many other web useful tricks and developer tasks, including disabling Javascript and clearing Safari cache amongst myriad other functions and capabilities that are geared towards advanced users and developers, like finding embedded files in pages .

How to View Page Source by Keyboard Shortcut in Safari on Mac

After you have the Develop menu enabled in Safari, you can also use a keyboard shortcut to quickly view any web page source in the Safari browser for Mac:

• Navigate to the web page you wish to view the page source for
• Press Command + Option + U keyboard combination to view the page source

The keyboard shortcut for viewing page source will open the web inspector tool, just like accessing it from the Develop menu.

If you’re an advanced user of Safari, enabling the Develop menu is likely one of the first things you do when you launch the browser for the first time.

For what it’s worth, the Chrome browser and Firefox browsers also have similar web element inspector capabilities, but obviously we’re focusing on Safari for Mac here.

The Developer functions in Safari for Mac are not available for iPhone or iPad (yet anyway), but if you’re interested in gaining source viewing options on the mobile side you can use this javascript trick to view page source in iOS and ipadOS versions of Safari.

Do you have any handy tips or tricks associated with viewing page source or the developer toolset in Safari? Share your thoughts, tips, and experiences with us in the comments.

Enjoy this tip? Subscribe to our newsletter!

Get more of our great Apple tips, tricks, and important news delivered to your inbox with the OSXDaily newsletter. 

You have successfully joined our subscriber list.

Related articles:

• How to Turn Off Split Screen in Safari for iPad? Exiting Safari Split Screen in iPadOS
• How to Take Full Page Screenshots in Safari on iPhone & iPad
• How to Customize Safari Start Page on Mac
• How to “View Source” from Safari on an iPad or iPhone

» Comments RSS Feed

I appreciate how you made achieving this goal simple and clear. Out of all the search results I reviewed on this subject the information is the only one that has value. Thanks

I learn something from more than 90% of what you send me in your newsletters. My wife and myself are 70yrs old and we aren’t very computer literate. We both have MacBook Air laptops. They are new and running macOS Catalina 10.15.7 We are reluctant to upgrade to macOS Big Sur. I’m collecting everything I can find that you print about Big Sur. Once we’re comfortable, I think we may try it. I’m writing to thank you for what you do for us and you ask for nothing. ThankYou! ~Peter~

Leave a Reply

Name (required)

Mail (will not be published) (required)

Subscribe to OSXDaily

• - How to Uninstall Apps on MacOS Sonoma & Ventura via System Settings
• - How to Mute a Call on Apple Watch
• - How to Use the Latest GPT 4 & DALL-E 3 Free on iPhone & iPad with Copilot
• - 15 Mail Keyboard Shortcuts for Mac
• - How to Use Hover Text on Mac to Magnify On-Screen Text
• - Apple Event Set for May 7, New iPads Expected
• - Beta 2 of iOS 17.5, iPadOS 17.5, macOS Sonoma 14.5, Available for Testing
• - Opinion: Shiny Keys on MacBook Air & Pro Are Ugly and Shouldn’t Happen
• - MacOS Ventura 13.6.6 & Safari 17.4.1 Update Available
• - Using M3 MacBook Air in Clamshell Mode May Reduce Performance

iPhone / iPad

• - How to Bulk Image Edit on iPhone & iPad wth Copy & Paste Edits to Photos
• - What Does the Bell with Line Through It Mean in Messages? Bell Icon on iPhone, iPad, & Mac Explained
• - iOS 16.7.7 & iPadOS 16.7.7 Released for Older iPhone & iPad Models
• - Fix a Repeating “Trust This Computer” Alert on iPhone & iPad
• - Make a Website Your Mac Wallpaper with Plash
• - The Best Way to Clean a MacBook Air Keyboard: Microfiber Cloth & KeyboardCleanTool
• - Fix “warning: unable to access /Users/Name/.config/git/attributes Permission Denied” Errors
• - How to Fix the Apple Watch Squiggly Charging Cable Screen
• - NewsToday2: What it is & How to Disable NewsToday2 on Mac

About OSXDaily | Contact Us | Privacy Policy | Sitemap

This website is unrelated to Apple Inc

All trademarks and copyrights on this website are property of their respective owners.

© 2024 OS X Daily. All Rights Reserved. Reproduction without explicit permission is prohibited.

Home » Tech Tips » iPhone » How to View Webpage HTML Source in iPhone?

How to View Webpage HTML Source in iPhone?

On desktop computers, you can use the developer console on the browsers to check the source code of websites. This is a very easy task when using Google Chrome browser both on Mac and Windows based computers. However, viewing source code is a lengthy process when using Safari browser on MacBook . And, that’s a kind of hidden feature with the Safari on your iPhone. If you ever wonder how to look at the HTML source code of webpages in your iPhone, here is how you can do that.

Can I View Source Code of Webpages in Safari iPhone?

The answer is no. You can’t view the source code of webpages directly on your iPhone. It also does not make sense to do such analysis with a small screen devices. However, Apple allows you to view the source code of mobile webpages and do all the Developer Console related stuffs from your Mac.

What You Need?

You need the following things to view the source code of iPhone Safari webpages on your Mac?

• Your iPhone with the the latest iOS version
• Lightning or USB-C connector cable
• Your Mac computer or laptop
• Safari browser in both iPhone and Mac

How to View Source Code of Webpages in Safari iPhone?

Follow the below steps to view the source code of webpages in Safari iPhone on your Mac.

• Add “Develop” menu in Mac Safari
• Enable “Web Inspector” in Safari iPhone
• Connect iPhone to Mac
• View source and inspect elements

Step 1 – Add Develop Menu in Safari Mac

By default, Mac Safari does not show the developer console and inspect element options. You need to manually enable “Develop” menu in order to use developer console in Safari.

• Launch Safari and go to “Safari > Settings…” section.
• Go to “Advanced” tab and enable “Show Develop menu in the menu bar” option.

Learn more on how to add “Develop” menu in Safari and do the responsiveness testing of website.

Step 2 – Enable Web Inspector in Safari iPhone

Similar to enabling “Develop” menu in Safari Mac, you also need to enable an option called “Web Inspector” in Safari iPhone.

• Tap on the “Settings” app and go to “Safari” settings page on your iPhone.
• Scroll down to the bottom and tap on “Advanced” option.
• On the next screen, you can enable “Web Inspector” option.

Step 3 – Connect iPhone to Mac

Now that you have setup your iPhone and Mac. Next step is to connect the iPhone to your Mac. If you have old iPhone / Mac models, use your USB lightning cable to connect the phone to Mac. However, the latest iPhone / Mac models come with USB Type-C connector instead of lightning cable. If you have one old model device and one new model device (either iPhone or Mac), you need an additional convertor to connect your iPhone and Mac.

If this is the first time you connect your iPhone, then choose to “Trust” the device by entering your passcode. Otherwise, you will not see the webpages opened in iPhone from Mac.

Step 4 – View Source HTML Code

Launch Safari browser on iPhone and open the website you want to view the source code and inspect elements.

• Go to your Mac and launch Safari browser. Navigate to “Develop > Your iPhone Name” to view the webpages that you have opened on your phone.

• Click on the website to open “Web Inspector” that will show the source code of the webpage opened in Safari iPhone.

• You can view elements, check source HTML / CSS and do all kind of analysis that you can do with Chrome Developer Tools .
• You can select the HTML elements in Mac Web Inspector (first column) to view source code and the corresponding element will get highlighted on your Safari iPhone.

Final Words

Note that you can also do the responsive site analysis on Safari Mac. However, selecting mobile relevant elements may be difficult in responsive design mode and Mac may not have your iPhone models by default. Therefore, using Web Inspector to inspect elements is an effective method to directly get the relevant mobile element’s source code.

About Nagasundaram Arumugham

Naga is the founder and chief content editor of WebNots. He has over 20 years of experience in technology field and published more than 2000 articles.

You also might be interested in

10 iPhone Tips Every User Should Know

Apple brings lot of improvements and new functions with every[...]

How to Find Source of Injected Stylesheets in Chrome?

Developer Tools is the best way to analyze elements on[...]

How to Limit Apps Screen Time in Mac?

Apple introduced Screen Time in iPhone with the release of[...]

DOWNLOAD EBOOKS

• SEO Guide for Beginners
• WordPress SEO PDF Guide
• Weebly SEO PDF Guide
• Alt Code Emoji Shortcuts PDF
• Free ALT Code Shortcuts PDF
• View All eBooks

TRENDING TECH ARTICLES

• 600+ Windows Alt Codes for Symbols
• Fix Chrome Resolving Host Problem
• Fix Slow Page Loading Issue in Google Chrome
• View Webpage Source CSS and HTML in Google Chrome
• Fix Safari Slow Loading Pages in macOS
• Fix Windows WiFi Connection Issue
• ROYGBIV or VIBGYOR Rainbow Color Codes
• Fix I’m Not A Robot reCAPTCHA Issue in Google Search
• Structure of HTTP Request and Response

POPULAR WEB TUTORIALS

• Move WordPress Localhost Site to Live Server
• Move Live WordPress Site to Localhost
• Move WordPress Media Folder to Subdomain
• Fix WooCommerce Ajax Loading Issue
• Create a Free Weebly Blog
• Edit Weebly Source Code HTML and CSS
• Add Scroll To Top Button in Weebly
• Add Table in Weebly Site
• How to Add Advanced Data Table Widget in Weebly?
• Up to $500 Free Google Ads Coupon Codes

FREE SEO TOOLS

• Webpage Source Code Viewer
• HTTP Header Checker
• What is My IP Address?
• Google Cache Checker
• Domain Age Checker Tool
• View All Free Web and SEO Tools

© 2024 · WebNots · All Rights Reserved.

Type and press Enter to search

How to view the HTML source code of a web page on Mac, iPad, and iPhone

Do you want to see what’s under the hood of web pages you visit? Check out how to view a page’s source code on Mac, iPad, and iPhone.

Whether you dabble in small-time web development or you just have the general interest of digging around in code to see how things work, there may be times when you want to see the HTML source code behind a specific web page.

It’s possible to do this from Safari (or other browsers) on your Mac, and for iPhone or iPad, you will have to use dedicated third-party apps.

View the source code of a website

Here are the steps for macOS and iOS.

The first step to being able to see the HTML code of a site is to enable Develop mode , a mode that Apple hides by default as the company assumes only developers would want to tinker with these options.

Enable Develop mode in Safari:

1) Open Safari and click Safari > Settings or Preferences from the top menu bar.

2) Go to the Advanced tab.

3) At the bottom, check the box that says Show features for web developers or Show Develop menu in menu bar .

In the menu bar, you will now see a new tab called Develop .

Show page source code:

Now that you have enabled this developer mode, you can access the source code of a web page in three different ways:

• With the web page open, go to Develop in the menu bar and select Show Page Source .
• On the web page for which you want to see the source code, press the Option + Command + U keys simultaneously.
• This is probably the easiest option. Simply Control-click or right-click on an empty area of the page and select Show Page Source .

When performing any of these actions, the source code of the page will then appear at the bottom of your Safari window. From there, you can inspect all you want.

On iPhone or iPad

If you want to view a web page’s source code from your iPhone or iPad, you will want to use an app to assist you. Most modern apps make this process easy and include useful syntax highlighting so you can better understand what you’re looking at.

We recommend using HTML Viewer Q , which is a free download from the App Store. Once installed, follow these steps to view a web page’s source code:

1) Launch HTML Viewer Q and tap the Link button at the top right of the app.

2) Enter the full URL of a web page you want to see the source code of, then tap the Go button. We will use Amazon for this example.

3) Once the page loads, tap on the Code button at the top left of the app.

You are now viewing the source code of the web page you selected. You can tap any of the numbers at the top of the app to change between different font sizes, i.e., 9pt, 12pt, 16pt, etc., and you can also use the Search button to search for any keywords or syntax you might be specifically looking for.

The app also lets you copy the HTML code so you can paste it into any other app.

This feature empowers the Curious Georges out there with the ability to see what makes a web page tick, but this is also an invaluable tool for web developers, novice or experienced, who want a better understanding of the code behind a web page or simply want to troubleshoot their own site.

Check out next: How to use Safari Web Inspector on Mac, iPad, and iPhone

The Tech Edvocate

• Advertisement
• Home Page Five (No Sidebar)
• Home Page Four
• Home Page Three
• Home Page Two
• Icons [No Sidebar]
• Left Sidbear Page
• Lynch Educational Consulting
• My Speaking Page
• Newsletter Sign Up Confirmation
• Newsletter Unsubscription
• Page Example
• Privacy Policy
• Protected Content
• Request a Product Review
• Shortcodes Examples
• Terms and Conditions
• The Edvocate
• The Tech Edvocate Product Guide
• Write For Us
• Dr. Lynch’s Personal Website
• The Edvocate Podcast
• Assistive Technology
• Child Development Tech
• Early Childhood & K-12 EdTech
• EdTech Futures
• EdTech News
• EdTech Policy & Reform
• EdTech Startups & Businesses
• Higher Education EdTech
• Online Learning & eLearning
• Parent & Family Tech
• Personalized Learning
• Product Reviews
• Tech Edvocate Awards
• School Ratings

Phonological Awareness: Everything You Need to Know

Product review of kate spade’s bloom: the perfect mother’s day gift, learning to read: everything you need to know, product review of the arzopa z1c portable monitor, how to teach phonics: everything you need to know, reading groups: everything you need to know, product review of the ultenic p30 grooming kit, reading anxiety in children: everything you need to know, iep meetings and parent-teacher conferences: everything you need to know, college disability services and accommodations: everything you need to know, how to view html source in safari.

If you’re a web developer, designer or just a curious individual, you may find the need to view HTML source in Safari, one of the most popular web browsers. HTML source refers to the underlying code that creates a web page, and viewing it can help you understand how a page works, troubleshoot issues and learn new techniques.

Here’s how to view HTML source in Safari:

1. Open Safari and navigate to the web page you want to view the source code for.

2. Click on the “Develop” menu option in the Safari menu bar. If you don’t see this menu, go to Safari Preferences > Advanced and check the box next to “Show Develop menu in menu bar”.

3. From the “Develop” menu, select “Show Page Source”. Alternatively, you can use the keyboard shortcut Option + Command + U.

4. Safari will display the HTML source code in a new window or tab, depending on your settings. You can now view, analyze and edit the code as needed.

Some additional tips for working with HTML source in Safari:

– If you’re inspecting a particular element on a web page, you can right-click on the element and select “Inspect Element” from the context menu to view its HTML source in the Safari Developer Tools

– The Safari Developer Tools also allow you to view the CSS and JavaScript code for a web page, among other things

– If you want to edit the HTML source code, you can make changes directly in Safari, but these changes will not be saved. Alternatively, you can copy the code and paste it into a text editor or web development tool to make permanent changes.

– Be cautious when editing HTML source code, as even small mistakes can cause a web page to break or behave unexpectedly. Always back up your code before making changes and test your changes thoroughly.

In conclusion, viewing HTML source in Safari is a useful skill for anyone who works with web pages. With these simple steps and tips, you can explore the underlying code of your favorite websites and gain insights into how they work.

What Is an Expansion Slot?

How to set up a new iphone.

Matthew Lynch

Related articles more from author.

Best Barre Workout YouTube Channels for Ultimate At-Home Fitness

What is the Network Model?

What Is a Hard Disk Drive?

How to Create Custom App Icons on an iPhone

The Best Black Garlic Fermenters

How to Convert Multiple Images Into a Single PDF on Your Computer or Phone

Safari Web Content Guide

• Table of Contents
• Jump To…
• Download Sample Code

Developing Web Content for Safari

Safari is a full-featured Web browser for macOS and iOS. You don't need to add any Safari-specific tweaks to make your website work with Safari or to make your website work on iOS-based devices. If you design your website using W3C standards for HTML, CSS, and JavaScript, and don't rely on third-party plug-ins, users can view and interact with your website using Safari on all supported platforms.

Making websites work with Safari is just a first step, however. It should be your goal to optimize websites to create the best experience for all users, including people using Safari on handheld devices with touch screens. Use CSS with responsive design techniques to change the layout of your website for multiple viewport screen sizes and multitasking split-screen, add touch and gesture support, animate changes in CSS properties, and so on.

At a Glance

There are three main areas to focus on when creating web content for Safari:

Make sure your website is compatible with Safari.

Enhance the user experience in Safari, particularly on mobile devices.

Make the best use of dynamically changing network bandwidth to deliver content.

Making It Work

Safari has an array of built-in tools for quickly spotting incompatibilities and debugging problems. If you have a website up and running, and are getting complaints that the site doesn't work with Safari, it is usually because of one of the following problems:

The site includes media compressed in a format that Safari doesn't support.

The site relies on plug-ins to handle audio, video, or animation.

Use the Web Inspector to identify errors and warnings, making them easy to correct.

There are Safari-compatible media formats and embedding techniques for every job. Safari supports audio media in AAC, MP3, AIFF, and WAVE formats on all platforms. Safari supports video media encoded using H.264 compression, commonly used in MPEG-4 format, on all platforms. Handheld devices support a somewhat more limited set of MPEG-4 profiles than desktop devices.

Use the HTML5 <audio> and <video> tags to embed audio and video files in supported formats, with fallback to a plug-in for older browsers on the desktop. Safari on iOS does not support plug-ins. Therefore, to make your website accessible using handheld devices, do not rely on plug-ins to display content. Safari on the desktop does support plug-ins. and there are Safari-compatible versions of all common plug-ins, including QuickTime, Flash, and SilverLight. When possible, avoid plug-ins and use CSS or Canvas to embed animation and create special effects.

Enhancing the User Experience

Enhance the user's experience with responsive design to provide different page layouts for varying viewport sizes on handheld and desktop devices. Responsive design can handle CSS and JavaScript detection as well as select the appropriate CSS layout for a device. Responsive design can react to portrait and landscape orientation and multitasking split-screen, automatically switching between layouts with CSS and JavaScript syntax.

It's easy to add touch and gesture support by adding a few event handlers to your site. Make navigation easier for touchscreen users by making links large enough to reliably hit with a finger, and by surrounding links with enough whitespace to avoid accidentally hitting the wrong link. Leave a blank gutter or border on the page as well, so the user can easily scroll the screen with a finger without touching a link.

iOS-specific enhancements can turn your website into a web app that behaves like a native iOS app. Optimize websites for iOS by providing an icon for the user's home screen, by making your website into a fullscreen web app, and by including links that dial a phone number, open the Maps app, or open other built-in iOS apps.

Use caching and client-side storage to make your website work even when the user is offline or the user’s device loses network connectivity. Safari supports HTML5 client-side storage and caching, "lazy" caching for offline reading, and techniques for allowing web-based games to work offline.

Prerequisites

You need a solid understanding of HTML, familiarity with JavaScript, and a basic understanding of CSS in order to make the best use of this document.

Safari Web Inspector Guide —How to use Safari’s built-in tools for debugging and optimization.

Safari HTML5 Audio and Video Guide —How to embed audio and video without using plug-ins, or by using a plug-in as a fallback.

Safari HTML5 Canvas Guide —How to add sophisticated animation and interactive games to a website without using plug-ins.

Safari CSS Visual Effects Guide —How to enhance websites using WebKit extensions for masks, gradients, reflections, CSS animation, and 3D transformations.

Safari Client-Side Storage and Offline Applications Programming Guide —How to create websites that work when the user is offline, or that contain HTML5 client-side databases.

HTTP Live Streaming Overview —How to optimize network bandwidth for streaming audio and video from a standard web server.

Safari HTML Reference —HTML elements and attributes supported in Safari.

Safari CSS Reference —CSS properties and classes supported in Safari.

Safari DOM Additions Reference —Events and other DOM additions supported in Safari.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

Safari HTML Reference

• Table of Contents
• Jump To…
• Download Sample Code

Supported HTML

Safari and WebKit implement a large subset of the HTML5 Specification defined by the World Wide Web Consortium (W3C). This reference defines every symbol in the specification that Safari implements. If a element is not listed here, it is not supported by Safari and WebKit.

Specifies a hyperlink or a page anchor.

When the href attribute is used with the a element, the text or image enclosed by the element becomes a hyperlink, linked to the URL specified by URL . When the name attribute is used, the element becomes an anchor that can be linked to by a hyperlink.

Specifies an abbreviated form of a string. Use abbr instead of acronym .

In Safari, the string specified by abbr is displayed onscreen while the content of fullstring is revealed in help element form by holding the mouse over the abbreviated value. This element is also useful for applications that read the underlying HTML code of a page, such as screen readers. Use abbr instead of acronym .

Obsolete. Specifies the acronym form of a string. Use abbr instead.

The acronym element behavior was identical to the behavior of the abbr element.

The acronym element has been declared obsolete in the HTML5 specification.

Specifies a street address.

The address element specifies a street address. The address enclosed within the element is italicized. Line breaks (such as ones between a street address and a city/state/zip) are not automatically inserted.

Obsolete. Embeds a Java applet within a page. Use embed or object instead.

The applet is displayed at the location of the element in the page. The location of the applet is given by the URL specified by an archive parameter.

The applet element has been declared obsolete in the HTML5 specification.

Specifies a specific area within an image map.

The area element defines discrete areas within an image map (defined by an enclosing map element). The area defined by this element acts as a hyperlink, linked to the URL specified by URL , bounding shape specified by shape , and coordinates specified by coords .

Specifies an independent section of a page.

Use article instead of div to contain a forum post, newspaper article, or blog entry. An article may be nested inside another article element.

Specifies a section of a page that is tangentially related to the surrounding content.

The aside element can indicate parenthetical content like pull quotes or sidebars.

Embeds audio into a webpage.

The audio element might contain fallback content for browsers that do not support this element. Any content enclosed within the audio element is ignored by browsers that support the audio element (but it must be valid HTML).

The audio element supports inclusion of source elements to provide multiple versions of an audio clip encoded with different codecs, at different bit rates, and so on. These source elements must be the first elements inside the audio element before any fallback content. See source for more information.

Displays text in a bold style.

The text specified by content is displayed in the bold style, but otherwise matches the style of the enclosing element. Consider using em to add emphasis and strong to indicate importance before choosing b . Styles should be more finely tuned using CSS instead of using HTML style elements.

Defines the base URL for all linked objects on a page.

The URL specified by href acts as the base URL for any relatively linked object—such as an image, hyperlink, or Java applet—on the page. If a URL is specified absolutely (with a fully qualified URL), it is not affected by this element. The base element must be placed in the head section of a page.

Obsolete. Specifies the base font for a page. Use CSS styling instead.

The font is used as the default font for the page unless otherwise specified. The font is specified by face , its size is specified by size , and its color is specified by color . These attributes and their various options are defined in Supported Attributes . Use CSS styling to set this property for the enclosing elements unless you have a specific reason to use basefont .

The basefont element has been declared obsolete in the HTML5 specification.

Specifies text that may be displayed in a unique direction.

Use bdi when the directional display of the text is unknown. Unlike bdo elements, bdi elements are not automatically displayed in a unique direction. See http://www.w3.org/TR/CSS2/visuren.html#direction for more information on directional text.

Displays text in a different direction.

The text specified by content is displayed left to right if dir is set to ltr ; it is displayed right-to-left if it is set to rtl . See http://www.w3.org/TR/CSS2/visuren.html#direction for more information on directional text.

Obsolete. Displays text in a large size. Use CSS styling instead.

The text specified by content is displayed in a larger size but otherwise matches the style of the enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements.

The big element has been declared obsolete in the HTML5 specification.

Displays text in an indented quotation style.

The text specified by content is indented (on both sides of the text block), but otherwise matches the style of the enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements.

Defines the entirety of the document body.

The content specified by content comprises most of the content of the page.

Represents a single line break.

Layout should be more finely tuned using CSS instead of using HTML style elements.

Defines an interactive button on a page.

The text specified by content is displayed within the frame of the button. This differs from the button input type in that you can specify content within the button element.

Specifies an advanced drawing region.

The canvas element specifies the location of an advanced drawing region. The canvas element supports the same attributes as the img element with the exception of the src attribute, which is ignored for the canvas element. You can specify any of the other attributes you would normally specify for an image. The identifier specified by id is required for Dashboard widgets, as are the height and width specified by height and width , respectively.

Read Safari HTML5 Canvas Guide for more information.

Defines a caption for an HTML table.

The text specified by content is displayed as a caption for the table in which the caption is enclosed.

Deprecated. Defines a region of content to be centered. Use CSS styling instead.

The content wrapped by the center element is centered within its enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements.

The center element has been declared obsolete in the HTML5 specification.

Specifies a citation.

The cite element specifies a citation. The text enclosed within the element is italicized.

Specifies text as computer code.

The code element specifies a block of code. The text enclosed within the element uses a "teletype" monospaced character font.

Specifies attributes of columns in a table.

The col element allows you specify attributes for a given table column, with those attributes specified by properties . A series of col elements must be placed in order of the actual table columns. These elements must be placed within a table or a colgroup .

Specifies attributes for multiple columns in a table.

The colgroup element specifies attributes for multiple table columns, with those attributes specified by properties . For example, to set center column alignment for three different columns, you would use <colgroup span="3"> . These elements must be placed within a table.

Obsolete. Specifies a command the user can invoke. Use menuitem instead.

The command element has been declared obsolete in the HTML5 specification.

Contains a set of option elements for a control.

Specifies a definition for a term.

The dd element specifies a definition for a term within an HTML definition list. The text enclosed within the element is indented under the term specified by the enclosing dt block.

Specifies a block of deleted text.

The del element specifies a block of deleted text, which is marked with a horizontal line through the center.

Specifies a control for additional information, typically displaying a disclosure triangle.

Nested content is revealed on user interaction. The summary element should be included in a details element.

The details element was introduced in the HTML5 specification.

Specifies a definition.

The dfn element specifies a definition of any sort.

Obsolete. Specifies a directory list. Use CSS styling or list elements as appropriate.

The dir element specifies a directory list, each element of which is specified by an li element. List styles should be more finely tuned using CSS instead of using HTML style elements, and the structure should be defined instead with the ul and ol elements.

The dir element has been declared obsolete in the HTML5 specification.

Specifies a styleless section in a document.

The div element specifies a section in a document as a block element. Multiple divs stack vertically on the page. Use CSS styles to tune the style properties of this element.

Specifies a definition list.

The dl element specifies a definition list. Within the bounds of this block, terms to be defined should be marked using the dt element, and their definitions should be marked using the dd element.

Specifies a definition term.

The dt element specifies a definition term. It should be used to mark an actual term within the bounds of a definition list ( dl ). Definitions should follow each term, and be marked using the dd element.

Specifies emphasized text.

The em element specifies a block of emphasized text. Use CSS to finely tune styles instead of using HTML style elements.

Deprecated. Embeds an object within a page. Use the object element to embed objects.

The object, if visible, is displayed at the location of the element in the page, with a height specified by height and a width specified by width . The location of the object is given by the URL specified by src , or code if the applet is in a standard Java class file.

The embed element has been deprecated in the HTML 4.01 standard.

Specifies a set of fields.

The fieldset element encloses a set of input fields, and draws a box around them. The fields themselves are made with input elements specified by input and the names of the fields are plaintext specified by caption .

Specifies a caption for a figure element.

The content specified by figure may be removed without affecting the page flow.

Typically includes an image or video; may include a caption ( figcaption ).

Obsolete. Defines a font style for the content the element encloses. Use CSS styling instead.

The content specified by content is altered based on a variety of properties, such as face , size , and color . Styles should be more finely tuned using CSS instead of using HTML style elements.

The font element has been declared obsolete in the HTML5 specification.

Specifies content for the section footer.

The footer element was introduced in the HTML5 specification.

Specifies an HTML form.

The form element specifies a form on a page. Each individual form (with its variety of inputs such as checkboxes, text fields, and password fields) should be enclosed in its own form element. If using the form for some kind of submission, the form's submit button should also be enclosed within this element.

Form elements are described in Supported Attributes .

Obsolete. Displays a URL in an inline frame. Use iframe instead.

The frame element specifies a directory list, each element of which is specified by an li element. List styles should be more finely tuned using CSS instead of using HTML style elements, and the structure should be defined instead with the ul and ol elements.

The frame element has been declared obsolete in the HTML5 specification.

Obsolete. Specifies a frameset. Use iframe instead.

The frameset element specifies the overall frameset for a number of frames (each specified with the frame element. The URL for the frame is specified by src . The size of each column should be specified by the cols and rows properties.

The frameset element has been declared obsolete in the HTML5 specification.

h1 - h2 - ... - h6

Specifies various headers.

Heading elements specify a block of header text, with h1 representing the largest font size and h6 representing the smallest. Styles should be more finely tuned using CSS instead of using HTML style elements.

Specifies metainformation about the HTML document.

The head element can contain a number of informational elements, such as title for the page title or style for a CSS definition block.

Specifies .

Specifies a horizontal line.

The hr element specifies a horizontal line. Styles should be more finely tuned using CSS instead of using HTML style elements.

Specifies the HTML document.

The html element specifies an HTML document, and should encompass all the content of the page.

Displays text in an italic style.

The text specified by content is displayed in the italic style, but otherwise matches the style of the enclosing element. Consider using the em , strong , mark , cite , and dfn elements before choosing i . Styles should be more finely tuned using CSS instead of using HTML style elements.

Displays a URL in an inline frame.

The URL specified by src loads into an inline frame placed wherever the iframe element is entered.

Displays an inline image.

The image file specified by src or srcset is displayed inline in the enclosing element. Descriptors in srcset refer to maximum pixel width ( w ), height ( h ), or density ( x ).

Displays an input for an HTML form.

The input element specifies an input mechanism in an HTML form. The available types of input are listed in Supported Input Values .

Specifies a block of inserted text.

The ins element specifies a block of inserted text, which is marked with an underline.

Specifies text as keyboard text.

The kbd element specifies a block of keyboard text. The text enclosed within the element uses a "teletype" monospaced character font.

Provides public key generation for forms.

The keygen element places a form element on the page, which generates a 512, 1024, or 2048-bit public key as its value. The challenge specified by challenge and the public key are DER encoded and digitally signed with a private key (stored in a local database). The result is then encoded in Base64 and is returned as the value of this field.

Specifies a label for input controls.

The label element specifies a label for the input control whose name is specified by for . The text specified by content makes up the body of the label.

Specifies individual layers on a webpage. The layer element is not well-supported and should be replaced with iframe frames using CSS styling techniques in HTML 4.01 Transitional documents. In HTML 4.01 Strict documents, layer should be replaced with object or div .

The layer element specifies an independent layer of content on a webpage.

Specifies the caption for a fieldset.

The legend element specifies the label for a fieldset (specified by the fieldset element). The caption specified by content is merged with the box surrounding the fieldset.

Specifies a list element.

Within a list block (specified by ul for an unordered list, or ol for an ordered list), li specifies single list element, whose content is specified by content . List styles should be more finely tuned using CSS instead of using HTML style elements.

Specifies a connection to an external file.

The link element specifies an external file that is related to the HTML document it is enclosed in. For example, you should use link in the head of an HTML document to specify an external CSS stylesheet.

Obsolete. Indicates a block of preformatted text. Use pre and code instead.

The listing element has been declared obsolete in the HTML5 specification.

Specifies the main content of the body element.

Only one main element is included in a body element. The main content should not be nested in other block elements.

Specifies a browser-processed image map.

The map element encloses the area elements that define the regions of an image map. The identifier specified by id and the name specified by name should be used by an img element’s usemap property.

Specifies a highlighted element.

The mark element can be used to highlight search results.

Obsolete. Specifies a horizontally scrolling block of content. Use JavaScript instead.

The marquee element specifies a block of content that scrolls horizontally.

The marquee element has been declared obsolete in the HTML5 specification.

Specifies a menu list.

The menu element specifies a menu list. Within the bounds of this block, terms to be defined should be marked using the dt element, and their definitions should be marked using the dd element. The menu element was deprecated in the HTML 4.01 standard but reintroduced in HTML5.

Specifies metainformation about an HTML page.

The meta element specifies a list of metainformation about a page, such as keywords for a search engine to index. The title specified by name defines what metainformation you are displaying. The text specified by content is the actual metainformation.

For information on Apple-specific meta tag keys, see Supported Meta Tags .

Displays a gray horizontal bar with an area of color inside, representing a scalar or fractional value. Similar to the progress element.

Use progress to illustrate task completion. Use meter to show a value in a range.

The meter element was introduced in the HTML5 specification.

Specifies a section with navigation links.

You can create multiple nav elements in one document. The nav element was introduced in the HTML5 specification.

Obsolete. Specifies a region of content with no embedded line breaks. Use CSS styling instead.

The content displays with no line breaks. Use the nobr element for text blocks that must remain on one line.

The nobr element has been declared obsolete in the HTML5 specification.

Obsolete. Specifies content to display when embedded objects are not supported. Use object if necessary.

The noembed element specifies a block of content that displays in browsers that do not support embedded objects.

The noembed element has been declared obsolete in the HTML5 specification.

Obsolete. Specifies content that displays in browsers that do not support frames. There is no replacement element.

The noframes element specifies a block of content that displays in browsers that do not support frames or have them deactivated. Because frames are no longer supported the noframe element is not needed.

The noframes element has been declared obsolete in the HTML5 specification.

Specifies content that displays in browsers that do not support layers.

The nolayer element specifies a block of content that displays in browsers that do not support layers.

Specifies content to display in browsers that do not run scripts.

The noscript element specifies a block of content that displays in browsers that do not support the execution of scripts or have them deactivated.

Embeds an object within a page.

The object is displayed at the location of the element in the page, with a height specified by height and a width specified by width .

The location of the object is given by the URL specified by archive for a Java archive, data for some arbitrary embedded data (an image, for example), or codebase for object code of any other type.

Specifies an ordered list.

The ol element specifies an ordered, numbered list. Within the bounds of this block, list items should be defined using the li element.

Specifies a group of options.

Within a select input type, the optgroup element specifies a subgroup of options. Within the bounds of this block, individual options are specified using the option element. The title of the subgroup is specified by label , and in Safari is displayed as bold gray text, with the subgroup’s associated options indented under it.

Specifies a list option.

Within a select input type, the option element specifies a single selectable option. The form value of the option is specified by value , and its visible name is specified by title . These elements can be placed directly within a select input type or within an optgroup within a select element.

Specifies the result of a calculation.

Use a script to add the result to the text specified by content .

The output element was introduced in the HTML5 specification.

Displays a paragraph.

The p element indicates a paragraph in the document.

Represents a parameter for an object declaration.

The param element represents a specific parameter for an embedded object element. You can place any number of these, but they must be enclosed within the object block. The parameter’s name/key is specified by name and its value is specified by value .

Obsolete. Represents a MIME type. Use "text/plain" instead.

MIME types indicate the type of media to be displayed.

The plaintext element has been declared obsolete in the HTML5 specification.

Represents a block of preformatted text.

The pre element preserves the formatting of the block of text specified by content , specifically line breaks and multiple spaces. Normal text operation in Safari displays no difference between a single space and multiple consecutive spaces. In Safari, text enclosed in this element is also rendered in a monospace "teletype" font.

Displays a representation of task completion. Similar to the meter element.

The progress element was introduced in the HTML5 specification.

Displays an inline quotation.

The text specified by content is displayed in quotes, but otherwise matches the style of the enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements.

Specifies parenthesis to display if the ruby element is not supported.

The rp element was introduced in the HTML5 specification.

Specifies a ruby annotation showing pronunciation of East Asian characters.

Th ruby element was introduced in the HTML5 specification.

Specifies the pronunciation of East Asian characters.

The rt element was introduced in the HTML5 specification.

Deprecated. Defines a block of text in strikethrough style. Use del to indicate document edits.

The content inside the s element is rendered with a horizontal line through the center. The del element is more appropriate to show text that was removed. Styles should be more finely tuned using CSS instead of using HTML style elements when possible.

The s element has been deprecated in the HTML 4.01 standard.

Specifies text as sample code.

The samp element specifies a block of code. The text enclosed within the element uses a "teletype" monospaced character font.

Embeds and executes script code.

The script element specifies a block of script code, such as JavaScript. The code specified by code is invisible onscreen, but is visible in the page source. Code embedded within script elements (unless defined inside functions) is executed immediately on page load. The MIME type of the script should be specified by type .

Specifies a generic section of a document when article is not appropriate.

The content in a section should be related. If content is unrelated use a div element for grouping.

The section element was introduced in the HTML5 specification.

Specifies a selection input type.

The select element specifies a selection menu. This block must contain a set of option elements or optgroup elements containing options. In Safari, if the size property is explicitly set for this element, the input box resembles a Mac OS X combo box, otherwise it resembles a pop-up menu.

Displays text in a small size.

The text specified by content is displayed in a smaller size, but otherwise matches the style of the enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements.

Provides a resource URI for a multimedia element such as audio or video .

Specify type and codec information appropriately. Browsers use this information to choose the media that is most appropriate according to available codecs, and screen resolution.

Available in Safari 3.1 and later.

Specifies an inline styleless section in a document.

The span element specifies a section in a document. Multiple consecutive spans are placed horizontally on the page by default. Use CSS styles to tune the style properties of this element.

Obsolete. Defines a block of text in strikethrough style. Use the del instead.

The content specified by content is rendered with a horizontal line through the center. The del element is more appropriate for this function. Styles should be more finely tuned using CSS instead of using HTML style elements.

The strike element has been declared obsolete in the HTML5 specification.

Specifies important text.

The strong element specifies a block of text with "strong" importance. Styles should be more finely tuned using CSS instead of using HTML style elements.

Defines an inline stylesheet.

The style element specifies a CSS stylesheet within the page. All CSS declarations should be placed within this block. This element should be placed in the head section of a page. If you are linking to an external stylesheet, use the link element instead.

Specifies text as subscript.

The text specified by content is displayed in a smaller size and is subscripted, but otherwise matches the style of the enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements.

Specifies a summary for a details element.

When a details element summary is absent the heading "details" is used by default.

The summary element was introduced in the HTML5 specification.

Specifies text as superscript.

The text specified by content is displayed in a smaller size and is superscripted, but otherwise matches the style of the enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements.

Defines a data table.

The table element defines a table structure for a page. The HTML specified by content should contain the other structural elements such as table rows ( tr ) and table cells ( td ).

Defines a table’s body.

The tbody element defines the body for a table. This element is only a structural definition and by default does not render anything unique, so the HTML specified by content should contain the other structural elements such as table rows ( tr ) and table cells ( td ).

Defines a table cell.

The td element defines a cell within a table. Cells are usually enclosed by table row ( tr ) definitions. Consecutive table cells are placed horizontally onscreen.

Specifies a text area input type.

The textarea element specifies a scrollable, multiline text input block. You can specify its size onscreen by specifying values for rows and cols .

Safari on iOS extends the textarea element with two additional properties, autocorrect and autocapitalize , described in Supported HTML .

Defines a table’s footer.

The tfoot element defines a footer for a table. This element is only a structural definition and by default does not render anything unique, so the HTML specified by content should contain the other structural elements such as table rows ( tr ) and table cells ( td ).

Defines header text for a table column.

Table headers should be placed in their own table row, usually the first row in a table definition, and should correspond in number to table cell definitions in later rows. In Safari, the text specified by content is displayed in a bold face.

Defines a table’s header.

The thead element defines a header for a table. This element is only a structural definition and by default does not render anything unique, so the HTML specified by content should contain the other structural elements such as table rows ( tr ) and table cells ( td ).

Defines the visible window title for the page.

The text specified by content is displayed at the top of a browser window, but remains invisible in embedded WebKit web views unless requested programatically. The title element must be placed in the head section of a page.

Defines a table row.

The tr element defines a row within a table. Table cells are usually enclosed by these rows. Consecutive table rows are placed vertically onscreen.

Specifies a text component of the parent audio or video element.

The track element can indicate subtitles , captions , description , chapters or metadata through the kind attribute. See Safari HTML5 Audio and Video Guide for more information.

The track element was introduced in the HTML5 specification.

Obsolete. Displays text in a "teletype" style. Use CSS styling instead.

The text is displayed in a monospaced "teletype" style, but otherwise matches the style of the enclosing element. Styles should be more finely tuned using CSS instead of using HTML style elements. Semantic HTML alternatives to tt include: kdb for keyboard input, var for variables, code for computer code, and samp for computer output.

The tt element has been declared obsolete in the HTML5 specification.

Deprecated. Defines a block of underlined text. Use CSS styling instead.

The content is underlined. The ins element is more appropriate for this function. Styles should be more finely tuned using CSS instead of using HTML style elements. Additionally, underlined text should not be used as it might be confused with actual hyperlinks.

The u element has been deprecated in the HTML 4.01 standard.

Specifies an unordered list.

The ul element specifies an unordered, bulleted list. Within the bounds of this block, list items should be defined using the li element.

Specifies a variable.

The var element specifies a variable. The text enclosed within the element is italicized.

Embeds video into a webpage.

The video element might contain fallback content for browsers that do not support this element. Any content enclosed within the video element is ignored by browsers that support the video element (but it must be valid HTML).

The video element supports inclusion of source elements to provide multiple versions of a video clip encoded with different codecs, at different bit rates, and so on. These source elements must be the first elements inside the video element before any fallback content. See source for more information.

Specifies a block in which line breaks are permitted.

Within a nobr block (in which line breaks are enabled), any content specified by content is permitted to use line breaks. The line breaks themselves must still be requested using the br element.

Obsolete. Represents a block of literal text. Use pre and code instead.

The xmp element preserves the formatting of the block of text, specifically line breaks, multiple spaces, and the greater-than and less-than symbols that accompany HTML elements. This block is also prefaced with a newline element. In Safari, text enclosed in this element is also rendered in a monospace "teletype" font.

The xmp element has been declared obsolete in the HTML5 specification.

Copyright © 2014 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2014-07-15

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

Viewing The HTML Source Code In Safari

Published: August 29, 2023

Why View HTML Source Code in Safari?

Viewing the HTML source code of a webpage can provide valuable insights for developers, designers, and even curious users. Understanding the underlying code structure can help identify and troubleshoot issues, inspect elements and their properties, and gain a deeper understanding of how a website is built. Safari, the default web browser for Apple devices, offers several methods to view the HTML source code, each with its own advantages. Whether you’re a web professional or simply want to quench your curiosity, exploring the HTML source code in Safari can be a rewarding endeavor.

By viewing the HTML source code, web developers can gain a comprehensive understanding of how a webpage is constructed. It allows them to analyze the code structure, identify potential errors or bugs, and make necessary modifications. This is particularly useful when troubleshooting layout issues, debugging JavaScript functions, or optimizing website performance. With Safari’s intuitive interface, developers can easily view and navigate through the HTML source code, making the debugging process more efficient.

For web designers, viewing the HTML source code in Safari enables them to inspect the styles applied to different elements. By examining the CSS properties, designers can better understand how the visual elements are defined and styled. This knowledge is crucial when designing responsive websites, as it allows them to fine-tune the layout for different screen sizes and ensure a consistent user experience across devices. Additionally, by analyzing the HTML structure, designers can optimize the code for search engine optimization (SEO) and improve the website’s visibility in search engine results.

Even for non-technical users, exploring the HTML source code can offer a glimpse into the inner workings of a website. It allows them to understand how different elements are organized, learn about the technologies used, and appreciate the complexity involved in building a web page. Furthermore, viewing the HTML source code can help users detect any malicious scripts or suspicious content hidden within a webpage. This knowledge can be empowering, as it enhances their online security and enables them to make informed decisions while browsing the internet.

Safari provides several methods to view the HTML source code, making it accessible to users with varying levels of technical expertise. Whether you’re a developer looking to troubleshoot issues, a designer seeking to refine your layout, or a curious user wanting to delve deeper into the web, Safari’s HTML source code viewing options offer a valuable toolset for exploring the digital landscape.

Method 1: Using the Develop Menu

Safari’s Develop menu offers a straightforward way to view the HTML source code of a webpage. Here’s how to access and utilize this method:

• Open Safari and navigate to the webpage for which you want to view the source code.
• Click on the “Develop” menu in the menu bar at the top of the screen. If you don’t see the “Develop” menu, go to Safari preferences, select the “Advanced” tab, and check the box next to “Show Develop menu in menu bar.”
• In the Develop menu, hover over “Page Source” to reveal a submenu of options.
• Select “Show Page Source” to open a new window displaying the HTML source code of the webpage.
• In the HTML source code window, you can browse, search, and analyze the code to gain insights into how the webpage is built. You can also copy and paste sections of the code for further analysis or reference.

The Develop menu is a powerful tool for developers and designers, providing easy access to the HTML source code and allowing for efficient troubleshooting and debugging. It is particularly useful when analyzing complex webpages with dynamic content, as it enables you to inspect the underlying code that generates the page’s elements.

It’s worth noting that the Develop menu also offers additional options for advanced users, such as disabling JavaScript or CSS on the current webpage. These options can be valuable when testing and fine-tuning website functionality or performance.

By utilizing the Develop menu in Safari, you can quickly and effortlessly view the HTML source code of any webpage, empowering you with the knowledge to understand and manipulate the code as needed.

Method 2: Using the Keyboard Shortcut

If you prefer to use keyboard shortcuts, Safari offers a convenient way to view the HTML source code with just a few key presses. Follow these steps:

• Press the Option + Command + U keys simultaneously. Alternatively, you can right-click anywhere on the webpage and select “Show Page Source” from the context menu.
• A new window or tab will open, displaying the HTML source code of the webpage.
• In the HTML source code view, you can scroll, search, and analyze the code to gain insights into the webpage’s structure and elements.

This keyboard shortcut provides a quick and efficient way to access the HTML source code, allowing you to bypass the menus and access the code with ease. It’s particularly helpful for users who prefer using keyboard shortcuts for their browsing tasks.

This method is suitable for developers, designers, and curious users who want a fast and accessible way to view the HTML source code without the need to navigate through multiple menus and options.

Using the keyboard shortcut in Safari provides a streamlined approach to view the HTML source code, presenting you with a detailed look into the inner workings of the webpage in just a few simple steps.

Method 3: Using the Right-Click Menu

If you prefer a more context-sensitive approach, Safari offers the ability to view the HTML source code directly from the right-click menu. Follow these steps:

• Right-click anywhere on the webpage to open the context menu.
• From the context menu, select the “Inspect Element” or “Inspect” option. This will open the Safari Developer Tools panel.
• In the Developer Tools panel, you will see various tabs such as Elements, Console, and Network. Click on the “Elements” tab.
• The Elements tab will display the HTML structure of the webpage, allowing you to view, explore, and make changes to the code as needed.

The right-click menu method is particularly useful for web developers and designers who want a more comprehensive set of tools to inspect and modify the code. It provides a more interactive and dynamic experience, enabling you to not only view the HTML source code but also make live changes and see the immediate results.

Using the right-click menu in Safari leverages the built-in Developer Tools feature, giving you granular control over the HTML source code and the ability to diagnose and fix issues with ease.

Whether you need to troubleshoot layout problems, inspect CSS styles, or delve into the code structure, the right-click menu method in Safari provides a convenient way to access and analyze the HTML source code of any webpage.

Method 4: Using the Inspector Tool

Safari’s Inspector tool offers a powerful and versatile way to view the HTML source code, inspect elements, and make live changes on the fly. Follow these steps to use the Inspector tool:

• Open Safari and navigate to the webpage you want to inspect.
• Right-click on any element on the webpage and select “Inspect Element” from the context menu. Alternatively, you can go to the “Develop” menu, choose “Show Web Inspector,” or use the keyboard shortcut Option + Command + I.
• The Inspector tool will appear as a separate pane or sidebar, with the HTML source code displayed in the Elements tab.
• You can explore the HTML structure by expanding and collapsing elements, revealing nested tags and attributes.
• By hovering over an element in the code, the corresponding area on the webpage will be highlighted, providing a visual representation of the code.
• Inspecting the Styles tab will reveal the CSS properties applied to each element, allowing you to understand and modify the visual appearance of the webpage.
• The Inspector tool also provides additional tabs for examining the Network activity, JavaScript Console, and more, offering a comprehensive set of debugging and development tools.

The Inspector tool in Safari is invaluable for web developers and designers, providing a rich set of features to analyze and manipulate the HTML source code. It allows for real-time debugging, making it easier to identify and resolve issues with precision.

This method is especially beneficial for developers who need to closely examine specific elements, troubleshoot layout issues, or fine-tune the CSS styles of a webpage. Designers, too, can use the Inspector tool to gain insights into the structure and styling of a website, enabling them to refine the visual presentation with ease.

By utilizing the powerful capabilities of the Inspector tool in Safari, you can confidently navigate and manipulate the HTML source code, while fine-tuning the design and functionality of your webpages.

Method 5: Using Safari Extensions

Safari offers the flexibility to enhance its functionality through extensions, and there are several extensions available that can assist in viewing the HTML source code of a webpage. Here’s how to use Safari extensions for this purpose:

• Open Safari and go to the Apple App Store or the Safari Extensions Gallery to search for HTML source code viewing extensions.
• Install the desired extension by following the provided instructions.
• Once installed, navigate to the webpage you want to examine.
• Look for the Safari extension’s icon in the Safari toolbar or the browser’s menu.
• Click on the extension’s icon to activate it and view the HTML source code of the current webpage.
• The extension may display the HTML source code in a separate window or provide a panel within Safari.

Using Safari extensions to view the HTML source code adds flexibility and customization to your browsing experience. Extensions can provide additional features and options beyond what Safari offers by default, making them valuable tools for developers, designers, and curious users alike.

Extensions dedicated to HTML source code viewing may offer enhanced functionality, such as syntax highlighting, code formatting, and search capabilities, to help you analyze the code more efficiently. Some extensions may even provide additional tools, like debugging and live editing, to make your development or troubleshooting tasks easier.

When using Safari extensions, it’s important to choose reputable and trusted sources for downloading them to ensure your online security. Review the user reviews and ratings of the extension before installation to ensure it meets your requirements.

By leveraging Safari extensions specifically designed for viewing the HTML source code, you can enhance your browsing experience and gain deeper insights into the structure and functionality of webpages.

Related Stories

How To View The Source Code Of A Web Page

How To Activate The IPhone Debug Console Or Web Inspector

Add More Features By Turning On Safari’s Develop Menu

How To Inspect An Element On A Mac

What’s An MHT File And How Do You Open One?

HTC File (What It Is & How To Open One)

What Is A Web Browser?

Which Browser Should I Use For Watching Movies?

How Do Workers’ Compensation Lawyers Maximize Your Benefits?

The Brilliance of Smart Lighting: Residential to Commercial Benefits

Enhancing Employee Integration for Efficiency

Understanding SA Interest Rates

Revolutionizing Lead Generation: How Software Solutions Are Redefining Sales Strategies

Top 100 Christmas Songs for the Best Christmas Music

The Life and Career of Dean Haglund: A Journey from Canada to the Paranormal and Beyond

16 Best Ad Blocker For Every Browser and Device

Different Types of Aesthetics: 30 Outfit Ideas to Step Up Your OOTD Game

Monopoly Man Monocle and 10 Other Popular Examples of the Mandela Effect

Browser Stats

The apple safari browser.

Safari is a web browser developed by Apple.

Safari is the default browser on all Apple devices.

Safari uses the WebKit rendering engine.

Download Safari

Safari Statistics

The numbers below are shown in percentages, and are extracted from W3Schools' Statistics .

Advertisement

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.