How to View HTML Source Code

How to View HTML Source Code

Once you understand HTML structure, it's useful to see how it looks in real websites. Browsers offer built-in tools to help you explore and inspect HTML code.

1. View the Entire Page's HTML

To view the complete HTML source code of a webpage:

• Press Ctrl + U (Windows) or Cmd + Option + U (Mac)
• Or, right-click on the page and select “View Page Source”

This will open a new tab showing all the raw HTML used to build the page.

2. Inspect a Specific HTML Element

To see the HTML for a specific part of a page:

• Right-click on the item (image, text, button, etc.)
• Select “Inspect” or “Inspect Element”

The Developer Tools panel will appear, showing the exact HTML and CSS used for that element. You can even edit the code in real-time to see how changes affect the page.

Key Takeaway

By learning and practicing basic HTML tags like headings, paragraphs, links, images, and lists, you gain the tools to build your own web pages. Viewing source code and inspecting elements in the browser lets you see how other sites are built and apply those techniques in your own work. Keep experimenting—you’re building the foundation of web development.