How to include HTML code snippets in HTML ? Last Updated : 17 May, 2023 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how to include HTML snippets in HTML code. We will include the HTML code snippet of "gfg.html" into "index.html". To achieve this task, we are going to write a JavaScript function in "index.html" which traverses the collection of all HTML elements in "gfg.html" and searches for elements with specific attributes. It creates an HTTP request with the attribute value as the file name. In the end, we will differentiate between the main "index.html" file and include the "gfg.html" snippet. Approach: Create two HTML files "index.html" and "gfg.html".Create another HTML file for including the "index.html" file.Create a JavaScript function in the main HTML file for including the HTML Snippet.Call the function in the main ( "index.html") file to include the snippet of "gfg.html". Step 1: Create the main HTML file named "index.html" file. This file will display a heading text 'This is index.html'. HTML <!DOCTYPE html> <html> <body> <h1 align='center'> <font color='Red'> This is index.html </font> </h1> </body> </html> Output: Step 2: Create another HTML file of your choice for inclusion in the "index.html" file and save this file in the same directory in which "index.html" is present. In this article, create an HTML file named "gfg.html" which displays " GeeksforGeeks A Computer Science Portal For Geeks ". HTML <!DOCTYPE html> <html> <style> body { text-align: center; } .gfg { font-size: 180px; font-weight: bold; color: green; } .geeks { font-size: 50px; font-weight: bold; font-family: Arial; } </style> <body> <div class="gfg">GeeksforGeeks</div> <div class="geeks"> A computer science portal for geeks </div> <h1> <font color='Blue'> This is gfg.html </font> </h1> </body> </html> Output: Step 3: We are going to include the "gfg.html" snippet in the "index.html" file. Including HTML is done by using a GFG-include-html-snippet attribute. <div GFG-include-html-snippet="gfg.html"></div> Add the JavaScript Traverse the collection of all HTML elements.Search for elements with specific attributes.Create an HTTP request with the attribute value as the file name.Delete the attribute and call this function again.Exit function. JavaScript code snippet: JavaScript function includeHTMLSnippet() { // Traverse the collection of all // HTML elements id = document.getElementsByTagName("*"); for (i = 0; i < id.length; i++) { element = id[i]; // Search for elements with // specific attributes file = element.getAttribute( "GFG-include-html-snippet"); if (file) { // Create an HTTP request with // the attribute value as the // file name xmlRequest = new XMLHttpRequest(); xmlRequest.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { element.innerHTML = this.responseText; } if (this.status == 404) { element.innerHTML = "Page not found."; } // Delete the attribute and // call this function again. element.removeAttribute( "GFG-include-html-snippet"); includeHTMLSnippet(); } } xmlRequest.open("GET", file, true); xmlRequest.send(); return; // Exit function. } } }; Output: Differentiating included gfg.html snippet in index.html: The red border indicates the output of the main index.html and the blue border indicates the output of included HTML snippet. Comment More infoAdvertise with us Next Article How to include HTML code snippets in HTML ? vinayedula Follow Improve Article Tags : HTML HTML-Questions Similar Reads How to include SVG code inside HTML file ? SVG stands for Scalable Vector Graphics. It is an XML-based format used to describe vector graphics. SVG is widely supported in modern web browsers, including Google Chrome, Firefox, Opera, and others, which can render SVG images seamlessly. Designers frequently use the SVG format for creating illus 1 min read How to Insert an Image in HTML? To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method 1 min read How to Display HTML Tags as Plain Text in HTML? In HTML, certain characters like <, >, ", and & are reserved for defining HTML elements and attributes. To display these characters as plain text instead of interpreting them as part of the HTML structure, you need to use special codes called HTML entities.HTML Entities for Special Charact 2 min read How to Insert an Image from Folder in HTML The <img> src attribute is used to insert an image from folder in HTML. The src attribute accepts absolute and relative file path. Table of ContentUsing HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <img> tag 1 min read How to embed PHP code in an HTML page ? PHP is the abbreviation of Hypertext Preprocessor and earlier it was abbreviated as Personal Home Page. We can use PHP in HTML code by simply adding a PHP tag without doing any extra work. Example 1: First open the file in any editor and then write HTML code according to requirement. If we have to a 2 min read How to Add Map in HTML? When building websites, including a map is often necessary to display important locations, such as office addresses, at the footer or on dedicated pages. Adding a map enhances user experience, making it easier for users to locate your business or other important points of interest.PrerequisitesBasic 3 min read How to render HTML to an image ? Converting HTML code into an image can be achieved through various methods, such as using the html2canvas JavaScript library or leveraging CSS. This capability is particularly useful for users who wish to share a visual representation of their code without sharing the actual code. This guide will de 3 min read How to Add JavaScript in HTML Document? To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev 3 min read How to Embed Multimedia in HTML ? A variety of tags such as the <img> tag, <video> tag, and <audio> tag are available in HTML to include media on your web page. Multimedia combines different media, such as images, audio, and videos. Users will have a better experience when multimedia is embedded into HTML. Early we 3 min read Like