HTML, View Source, DOM, Inspect

Why is it important to understand DOM, View Source and Inspect?

Each of these concepts plays a significant role in how web pages are structured, rendered, and interacted with.

See What Users See: By understanding these concepts, you can understand how your website looks and functions to visitors. This also helps you understand if everything is working as it should. And also you can make better decisions when updating or changing your site.
Identify Issues: If something on your website isn’t displaying correctly, understanding these concepts can help you find out why. You can check if important content is missing or if there are errors (for example, layout issues or broken links).
Improve SEO: Knowing how your website is structured can help you optimize it for search engines. This means more people can find your site when they search online.
Communicate with Developers: If you work with web developers, understanding these concepts allows you to communicate better about what you want or what issues you’re facing.

How webpages load (are rendered)?

At first loads static content? Does it mean that at first webpage looks, only using static content (for very short time; seems actually depending on volume of additionally loading content)? So just after page load we see static content. If website need to load little additional content, then four humans’ eyes, we can not catch when static content changed to dynamically loaded content?

Webpages load through a series of steps that happen quickly when you click a link or type a web address in your browser. Here’s a simple explanation of how this process works:

Steps of Loading a Webpage

Request: When you enter a website address (like www.example.com) in your browser, it sends a request to the server where the website is stored.
Finding the Server: The browser needs to find the server's address using something called DNS (Domain Name System). This is like looking up the address of a store before you go there.
Connecting: Once the browser knows the server's address, it connects to it. This connection is secure if the website uses HTTPS, which keeps your information safe.
Getting the Files: The server processes your request and sends back files needed to display the webpage, mainly an HTML file, along with other resources like images and stylesheets.
Initial Display: When the browser receives these files, it first displays the static content (“hard-coded” code). This means, at first you “see” the basic layout and text of the page. The page renders its static content almost immediately, depending on: the size of the page, network speed and server response time, volume of dynamically loaded content.
Building the Page: Dynamic Content Loading: After the initial load (static content), the browser may still need to load additional dynamic content (like images or updates) using JavaScript. This happens in the background. Transition from static to dynamic content may happen so fast that it’s hard for our eyes to catch when it changes. We might not notice it because both types of content can appear almost simultaneously.

What is static content?

Static content is a type of information on a website that does not change. Static content does not rely on JavaScript or server-side processing after page load.

Unchanging Information: Static content remains the same for everyone who visits the website. It does not change based on user actions or preferences.
Examples: Common examples of static content include:

Text: Articles, blog posts, or descriptions that don’t get updated frequently.
Images: Photos or graphics that are the same for all users.
HTML Pages: Basic web pages that display fixed information.

How It Works: When you visit a webpage with static content, your browser receives the same files from the server every time. This means everyone sees the same text and images without any changes.

We can say that "static content" is similar to "original HTML code" and "hard-coded code," but there are some distinctions to keep in mind:

Static Content: This refers to files on a website that do not change and are delivered exactly as they are stored. Examples include HTML files, images, and CSS stylesheets. Static content remains the same for every user who visits the page.
Original HTML Code: This typically refers to the initial HTML markup of a webpage. When you view the source of a page, you see this original HTML code. It can be considered static if it doesn't change after being served to users.
Hard-Coded Code: This term usually means code that is directly written into the files without any dynamic elements or database connections. Hard-coded content is often static because it requires manual updates to change.

While static content, original HTML code, and hard-coded code share similarities in that they do not change dynamically for each user, "static content" is a broader term that encompasses all types of unchanging files on a website, whereas "original HTML code" and "hard-coded code" specifically refer to the way that content is written and stored in the website's files.

View source.

View Source is a feature in web browsers that allows you to see the underlying code of a webpage. Here’s a simple explanation:

Accessing the Code: When you use the "View Source" option, you can see the original HTML code that makes up the webpage. This includes all the text, images, and layout instructions.
How to Use It: You can usually access this by right-clicking on a blank area of the webpage and selecting "View Page Source" or something similar. It opens a new tab showing the code.
Why It's Useful:

Learning Tool: It helps people learn how websites are built by showing them real examples of HTML and other code.
Debugging: If something isn’t working on a webpage, developers can check the source code to find errors or missing parts.
Understanding Design: You can see how different elements are arranged and styled, which can inspire your own web design.

Methods to view source

Right-click -> View Page Source (or equivalent menu option).
Keyboard Shortcut: Ctrl+U (Windows) or Command+Option+U (Mac). Keyboard shortcuts may be different for different browsers.
Browser Developer Tools: View the "Sources" tab. Ctrl+Shift+I or F12 (Windows). Then click on the Elements (for Chrome) or Inspector (for Firefox) tab.
Using the Address Bar: Type view-source: followed by the URL in the address bar (e.g., view-source:https://www.example.com) and press Enter.
Download the HTML file (Ctrl+S (Windows))and open it in a text editor.

Methods to Prevent View Source

While there are ways to make it more difficult for users to view your webpage's source code, none are foolproof against determined individuals. The best approach is often a combination of good coding practices and server-side security measures rather than relying solely on client-side restrictions.

Disable Right-Click: Using JavaScript, you can disable the right-click context menu, which prevents users from accessing options like "View Page Source" or "Inspect Element."

document.addEventListener("contextmenu", e => e.preventDefault(), false);

Keyboard Shortcuts Prevention: You can attempt to disable keyboard shortcuts (like Ctrl + U for view source or F12 for developer tools) using JavaScript.

document.addEventListener("keydown", function(event) {
if (event.ctrlKey && (event.key === 'u' || event.keyCode === 123)) {
event.preventDefault();
}
});

JavaScript Obfuscation: This involves making your JavaScript code difficult to read by converting it into a more complex format that still functions as intended.
Source Code Padding: Adding a large amount of whitespace at the beginning of your HTML file can make it harder for users to find the actual code when they view the source.
JavaScript Encryption: Encrypting your code and using JavaScript to decrypt it on the client side can obscure the original code, although determined users can still access it.
Server-Side Rendering: Generating HTML on the server rather than sending raw HTML files can help protect sensitive logic and data.

Methods to Overcome Prevention Techniques

Disabling JavaScript: Users can disable JavaScript in their browsers, which allows them to bypass methods like disabling right-click or keyboard shortcuts.
Using Browser Developer Tools: Even if right-click is disabled, users can still access developer tools through browser menus (e.g., Chrome's menu > More Tools > Developer Tools).
Bookmarklets: Users can create bookmarklets that allow them to view the source code regardless of any JavaScript restrictions placed on the page.
- Copy the Code: Use the following JavaScript code for your bookmarklet: javascript:(() => { var newWindow = window.open('about:blank'); var doc = newWindow.document; doc.open(); doc.write('<html><head><title>Source of ' + document.location.href + '</title></head><body><pre>' + document.documentElement.outerHTML + '</pre></body></html>'); doc.close(); })();
- Create a Bookmark: In your web browser, create a new bookmark. For the URL, paste the copied JavaScript code. Name it something like "View Source".
- Using the Bookmarklet: Navigate to any webpage. Click on your "View Source" bookmarklet. A new window will open displaying the source code of the current page.
Browser Extensions: There are various browser extensions available that can bypass restrictions and reveal hidden or obfuscated code.
Manual Inspection: Users experienced with web technologies may manually inspect network requests or use tools like Postman or cURL to fetch raw HTML responses directly from the server.

Loading external CSS and JavaScript files.

CSS (Cascading Style Sheets) and JavaScript files can be stored separately from your main HTML file. This helps keep your code clean and makes it easier to manage.

Why Use External Files?:

Reusability: You can use the same CSS or JavaScript file across multiple web pages without rewriting the code.
Organization: Keeping styles and scripts in separate files makes your HTML easier to read and maintain.
Performance: Browsers can cache these files, which means they don’t need to be downloaded again every time a user visits a page, speeding up load times.

Loading CSS

To load an external CSS file, you use the <link> tag in the <head> section of your HTML. Here’s how it looks:


<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

Explanation:

rel="stylesheet" indicates that this link is for a stylesheet.
type="text/css" specifies the type of file.
href="styles.css" is the path to the CSS file.

Loading JavaScript

To load an external JavaScript file, you use the <script> tag, usually placed at the end of the <body> section for better performance:


<body>
<script src="script.js"></script>
</body>

Dynamic Loading of CSS and JavaScript

Sometimes, you may want to load CSS or JavaScript files only when needed (dynamically). This can be done using JavaScript itself. Here’s how:

Example of Dynamically Loading CSS

You can create a function that loads a CSS file when called:


function loadCSS() {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "styles.css"; 
document.head.appendChild(link);
}

Example of Dynamically Loading JavaScript

Similarly, you can create a function to load a JavaScript file:


function loadJS() {
var script = document.createElement("script");
script.src = "script.js";
document.body.appendChild(script);
}

Saving webpage?

Saving a webpage allows you to keep a copy of its content for offline access or future reference. Here’s a simple explanation of how to save a webpage, the different methods available, and whether you can save dynamically loaded content.

What Does Saving a Webpage Mean?

When you save a webpage, you create a copy of its content (text, images, and layout) on your device. This lets you view the page later without needing an internet connection.

Methods to Save a Webpage

Using Browser Save Option:
- Keyboard Shortcut: Press Ctrl + S (Windows) or Command + S (Mac) while on the webpage.
- Menu Option: Click on the browser menu (usually three dots or lines), then select "Save Page As" or similar.
- Save Formats:
- - Web Page, Complete: Saves the HTML file along with a folder containing images and other resources.
  - Web Page, HTML Only: Saves just the HTML file without additional resources.
Using Print Function: Open the print dialog (Ctrl + P or Command + P) and select "Save as PDF" instead of printing. This creates a PDF version of the webpage.
Browser Extensions: Use extensions like Save Page WE or SingleFile that allow you to save webpages as single HTML files that include all content.
Online Services:
- Websites like WebCite or Archive.is let you save a copy of a webpage online under a permanent link. This can be useful for citing sources.
Special Software: Programs like HTTrack or Local Website Archive can download entire websites or specific pages while maintaining their structure and functionality.

Can You Save Dynamically Loaded Content?

Dynamically loaded content refers to elements that are added to a webpage after it initially loads, often through JavaScript (like images that appear when you scroll).

When Saving: If you save a webpage using standard methods (like Ctrl + S), it may not capture all dynamically loaded elements unless they are fully rendered at the time of saving.
Using Extensions or Tools: Some tools and extensions can capture dynamic content more effectively by simulating user interactions or waiting until all elements are loaded. For example, Selenium, Playwright, Puppeteer.

What is the DOM?

The Document Object Model (DOM) is a programming interface that represents the structure of a web document, allowing scripts to interact with and manipulate its content. In other words: DOM is a browser-created object based on the initial source, updated dynamically as needed. Here’s an explanation of what the DOM is and how it works:

Structure Representation: The DOM treats an HTML or XML document as a tree-like structure, where each part of the document (like elements, attributes, and text) is represented as a node. This tree structure is known as the DOM tree.
Nodes: Each node in the DOM tree represents a different part of the document. For example, an HTML element like a paragraph (<p>) or an image (<img>) is a node. The root of this tree is the document itself.
Dynamic Interaction: The DOM allows developers to change the content, structure, and style of a webpage dynamically using programming languages like JavaScript. This means you can add new elements, remove existing ones, or modify their properties while the page is being viewed.

How Does the DOM Work?

Loading: When a webpage is loaded in a browser, the browser creates the DOM from the HTML code. Each element in the HTML becomes a node in the DOM tree.
Manipulation: Developers can use JavaScript to interact with these nodes. For example:
- Accessing Nodes: You can select specific elements using methods like document.getElementById() or document.querySelector().
- Changing Content: You can update text or HTML inside an element using properties like innerHTML or textContent.
- Adding/Removing Elements: You can create new nodes with methods like document.createElement() and add them to the DOM, or remove existing nodes with parentNode.removeChild().
Event Handling: The DOM also allows you to attach event listeners to nodes so that specific actions can be triggered when users interact with elements (like clicking buttons).

Overcoming Restrictions to see DOM content

Using Browser Developer Tools via Menu: Even if F12 is disabled, you can usually access Developer Tools through the browser menu. For example, in Chrome, you can go to "More Tools" > "Developer Tools."
Disabling JavaScript: Temporarily disabling JavaScript in your browser settings will allow you to bypass any scripts that block the F12 key or other shortcuts. However, this may break some functionality on the website.
Using Different Browsers: Sometimes, using a different browser or an incognito window may allow you to access Developer Tools without restrictions.
Bookmarklets: You can create a bookmarklet that runs JavaScript to capture the DOM or manipulate elements directly without relying on keyboard shortcuts.
Inspecting Network Requests: If you cannot access Developer Tools directly, you can use network monitoring tools (like Fiddler or Wireshark) to inspect requests made by the webpage and analyze how data is loaded dynamically.
Using Browser Extensions: Some browser extensions may help bypass restrictions or allow easier access to Developer Tools.
Web Scraping Tools: Using tools like Selenium or Puppeteer allows you to automate browser actions and interact with web pages programmatically, capturing all content regardless of restrictions.

HTML difference from DOM

HTML (HyperText Markup Language): This is the code that defines the structure and content of a webpage. It includes elements like headings, paragraphs, images, and links. Think of HTML as the blueprint or recipe for a webpage.
DOM (Document Object Model): The DOM is a representation of the HTML document created by the browser when it loads a webpage. It organizes the HTML elements into a tree structure where each element becomes an object that can be manipulated with JavaScript. So, while HTML is static text, the DOM is dynamic and allows for interaction and changes.

Static vs. Dynamic: HTML is what you see in the code; it doesn't change unless you edit it. The DOM, on the other hand, can change based on user interactions (like clicking buttons or loading new content).

Why is "View Source" different than "Inspect Element"

View Source: This option shows you the original HTML code sent from the server when you first load the page. It does not include any changes made by JavaScript after the page loaded. So if elements were added or modified dynamically, those changes won't appear here.
Inspect Element: This feature opens Developer Tools and allows you to see the current state of the DOM. It shows you all elements as they are now, including any dynamic changes made by JavaScript after the page loaded. You can interact with these elements directly in this view.

Why DOM structure is not seen on source code?

The source code you see when using "View Source" only displays what was initially sent from the server as HTML. It does not reflect any changes made after loading, such as:

Dynamic Changes: JavaScript can add, remove, or modify elements after the page has loaded. These changes are reflected in the DOM but are not part of the original HTML source code.
Real-Time Updates: The DOM updates in real-time based on user interactions or data fetched from servers (like loading new content when you scroll). These updates happen after the initial load and are not captured in static source code.

What does Google’s crawler see?

HTML Structure: When Googlebot visits a webpage, it primarily sees the HTML code that is sent from the server. This includes all the static content like text, images, and links that are part of the original HTML document.
Rendered Content: Googlebot uses a modern version of the Chrome browser to render pages. This means it can execute JavaScript and see dynamic content that is generated after the initial page load. However, if content is hidden using CSS properties like display: none, it might not be treated with the same importance as visible content.
Dynamic Content: Googlebot can crawl and index dynamically loaded content (such as content that appears after user interactions) as long as it is rendered in the DOM when the page is loaded. If JavaScript is used to load content after the initial HTML load, Googlebot will see it only if it executes that JavaScript successfully. Google's ability to process JavaScript isn't guaranteed in all cases, especially for resource-heavy or poorly implemented scripts.
Hidden Content: Content that is hidden behind tabs or accordions may still be indexed by Google, but it often carries less weight in terms of ranking. Googlebot can see this content, but if it's not immediately visible to users, it might not be prioritized in search results.
CSS and JavaScript: Googlebot takes into account how CSS and JavaScript are used on a page. For instance, using CSS for hiding content (like with visibility: hidden or display: none) can lead to that content being indexed but potentially with lower ranking value compared to visible content.