How to get HTML code of a WebElement in Selenium?

We can get the HTML code of a WebElement using Selenium WebDriver by accessing the innerHTML attribute. The innerHTML represents the HTML content between the opening and closing tags of an element, which includes both text content and any nested HTML elements.

The getAttribute() method is used to retrieve the innerHTML value by passing "innerHTML" as a parameter. This method returns the complete HTML markup contained within the selected element.

Syntax

Following is the syntax to get the innerHTML of a WebElement −

String htmlContent = element.getAttribute("innerHTML");

Where element is the WebElement object and getAttribute("innerHTML") returns the HTML content as a String.

Understanding innerHTML

Consider the following HTML element −

<h4>You are browsing the best resource for <b>Online Education</b></h4>

The innerHTML of this element would be: You are browsing the best resource for <b>Online Education</b>

This includes both the plain text and the nested <b> tag with its content, but excludes the outer <h4> tags themselves.

Complete Example

Following example demonstrates how to extract the HTML code of a WebElement using Selenium WebDriver −

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.By;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.WebElement;

public class HtmlCodeElement {
    public static void main(String[] args) {
        // Set up Chrome driver
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        
        // Set implicit wait
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        
        // Navigate to the webpage
        driver.get("https://www.tutorialspoint.com/index.htm");
        
        // Locate the element using CSS selector
        WebElement element = driver.findElement(By.cssSelector("h4"));
        
        // Get the innerHTML using getAttribute method
        String htmlContent = element.getAttribute("innerHTML");
        
        // Print the HTML content
        System.out.println("HTML code of element: " + htmlContent);
        
        // Close the browser
        driver.quit();
    }
}

The output will display the HTML content of the selected h4 element −

HTML code of element: You are browsing the best resource for Online Education

Alternative Methods

Besides innerHTML, you can also retrieve other HTML-related attributes −

Using outerHTML

To get the complete HTML including the element's own tags −

String outerHtml = element.getAttribute("outerHTML");

This would return: <h4>You are browsing the best resource for <b>Online Education</b></h4>

Using getText() Method

To get only the text content without HTML tags −

String textContent = element.getText();

This would return: You are browsing the best resource for Online Education

Practical Use Cases

• Content Validation − Verify that specific HTML markup is present within an element.

• Dynamic Content Testing − Check if JavaScript has properly populated HTML content.

• Nested Elements Analysis − Examine the structure of complex HTML elements without locating each child individually.

• Debugging − Understand the actual HTML structure when element location fails.

Enhanced Example with Error Handling

Following example includes proper error handling and multiple element testing −

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.NoSuchElementException;
import java.util.concurrent.TimeUnit;

public class GetElementHtmlCode {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        
        try {
            driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
            driver.get("https://www.tutorialspoint.com/index.htm");
            
            // Get innerHTML of first h4 element
            WebElement h4Element = driver.findElement(By.tagName("h4"));
            String innerHTML = h4Element.getAttribute("innerHTML");
            System.out.println("innerHTML: " + innerHTML);
            
            // Get outerHTML for comparison
            String outerHTML = h4Element.getAttribute("outerHTML");
            System.out.println("outerHTML: " + outerHTML);
            
            // Get plain text for comparison
            String textContent = h4Element.getText();
            System.out.println("Text content: " + textContent);
            
        } catch (NoSuchElementException e) {
            System.out.println("Element not found: " + e.getMessage());
        } finally {
            driver.quit();
        }
    }
}

This enhanced example provides comprehensive output showing the differences between innerHTML, outerHTML, and text content −

innerHTML: You are browsing the best resource for Online Education
outerHTML: 
You are browsing the best resource for Online Education

Text content: You are browsing the best resource for Online Education

Conclusion

The getAttribute("innerHTML") method is the standard approach to retrieve the HTML content of a WebElement in Selenium. This method returns the inner HTML markup including nested elements and text, making it useful for content validation and dynamic content testing. For complete element markup including the element's own tags, use getAttribute("outerHTML") instead.