Incorporating XML content into a pre-existing HTML/CSS layout

I am looking to insert an XML file into my current template without having to rewrite a significant portion of it in XSLT. I want the XML data to be integrated into the content section of my website while maintaining the existing CSS and formatting. Instead of using the "xml" tag inline, I prefer to import the data from an external file.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Local fish and chips bar, serving the city for over 20 years.">
<meta name="keywords" content="Food,Drink,Fish,Chips,British">

<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="header">
<h1>
<img alt="logo" src="images\logo.jpg" style="width:473px;height:135px">Home</h1>
</div>
<div id = "wrap">
    <div id = "navWrap">
    <div id = "nav">
        <ul>
            <li><a class ="nav" href="index.html">Home</a></li>
            <li><a class ="nav" href="order.html">Order Online</a></li>
            <li><a class ="nav" href="look.html">Look Around</a></li>
            <li><a class ="nav" href="contact.html">Contact Us</a></li>
            <li><a class ="nav" href="#menu">Download Our Menu</a></li>
            <li><a class ="nav" href="#contact">Download Our App</a></li>
            <li><a class ="nav" href="report.html">Report</a></li>
        </ul>
    </div>
</div>
</div>


<div id="main">
<xml Id = msg SRC = "menu.xml"></xml> ----- **XML DATA HERE**
</div>


<div id="sidebar">
<div id = "sidebarMain">
</div>
<div id = "mapWrap">
<iframe src= width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<h3><center><u>Opening Times</u></center></h3>
    <table style="width:100%">
        <tr>
            <th>Day</th>
            <th>Lunch</th>
            <th>Evening</th>
        </tr>
        <tr>
            <td>Monday</td>
            <td>10:00 - 14:00</td> 
            <td>16:00 - 22:00</td>
        </tr>
          ... (All days's time schedule is listed)
        </tr>
    </table>
</div>


<div id = "footer">
Copyright © FryingNemo.com<br>
<br>
</div>
</body>
</head>

Here is my xml file:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="nemoMenu.xsl"?>
<breakfast_menu>

       ... (All types of food displayed with price, description, calories etc.)
       
</breakfast_menu>

I welcome any suggestions on how to tackle this issue effectively, or if switching to XSLT would be a better solution.

Answer №1

Both HTML 4 and HTML5 do not include an xml element. Older versions of IE on Windows were the only ones that supported embedding so called XML data islands inline in HTML. The only ways to embed external XML documents in an HTML document are through the use of the iframe element or the object element. When it comes to static HTML, these are the options available. However, if you have a server-side programming/processing framework or want to utilize client-side scripting, there are additional alternatives.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fade between two divs using jQuery works perfectly with images, but unfortunately, it does not work with iframes

Edit: Uploaded live, with images, and with iframes I am experimenting with making pane1 fade into pane2. It successfully works with images, but I am curious if it can be achieved with iframes. Is this feasible? Any insights or suggestions are much appreci ...

Are there any alternatives similar to the reverse sr-only feature in Bootstrap 4?

I implemented the use of .sr-only to ensure compatibility with text-based browsers such as Lynx. This allows for the display of an ASCII logo in the header for those using standart GUI browsers like Firefox, while displaying the normal graphical logo for o ...

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

Comparing the Absolute anchor tag to the anchor tag with an absolute span

I have come across two methods for extending a link over a card, container, div, or any other element in order to make the entire area clickable. The first approach involves positioning the <a> tag as an absolute element. The second method keeps th ...

When adding text to a React Material UI Box, it can sometimes extend beyond the boundaries

I'm currently working on a straightforward React page, but I've encountered an issue right from the start: my text is overflowing the box and I can't figure out why. Could someone take a look at my styles? Here's a picture showing the ...

Width of flex container overflowing from relative position is at its full capacity

I'm attempting to create a horizontal line across an overflowing flex container by using an absolutely positioned child element with both the left and right set to 0. This requires the container to have a relative position to contain the absolutely po ...

What types of elements can be marshalled or unmarshalled by default in JAXB?

I'm aware that this information is documented somewhere, but I am having trouble locating it. Within the JAXB api documentation or specification, there should be details on the specific properties a class needs to have in order for JAXB to successful ...

What is the best way to arrange multiple elements on the second row within a div?

As I attempt to utilize CSS for positioning elements within a div, my challenge lies in the limitation of only being able to use classes/ids due to the fact that the div and its content are generated from a third-party plug-in (datatables). This restricts ...

How to Customize the Drawer Color in Material-UI v5

I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...

What steps can I take to enhance the responsiveness and overall performance of this code using bootstrap?

Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsivene ...

CSS: The relative positioned element now functions correctly with the inclusion of overflow-x

Is there a way to ensure that the images in the day_time_block cover the title class? I would also like all contents within the day_time_block to be displayed using overflow-x. However, when I add overflow-x: auto; to the scroll div, the images in the d ...

Load the page's content gradually, without needing to wait for all the content to be fully loaded

I am facing an issue with a webpage that displays 10 different items, each of which has a slow loading time. Currently, the entire page waits for all 10 items to fully load before displaying anything. I am interested in finding out if it is feasible to sh ...

What is the best way to toggle a sticky footer menu visibility using div elements with JavaScript instead of relying on pixel measurements?

Just wanted to mention that I'm pretty new to this, so if I use the wrong terms, I apologize in advance. I am trying to replicate Morning Brew's sticky footer opt-in form (check it out here). However, the code I have now only tracks pixels. Is t ...

Changing Values of Elements in an Array in PHP

I have created a form in HTML as shown below: <form method="post" action="survey.php"> <div> <label class="prompt">Favorite CS courses:</label> <label> & ...

Creating an svg ring using css: a step-by-step guide

Is there a way to create a ring in an SVG using CSS? I have the desired shape using a polygon, but I am looking for a method to achieve the same effect with a ring: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 4 ...

"Exploring the Relationship Between Parent and Child Elements in CSS

Is it possible for an id to act as a parent in CSS? For instance: <div id="link"> <a href="www.example.com"></a> </div> The CSS code: #link > a{ /* style would be applied here*/ } Can this actually be achieved? ...

Extracting the value attribute text from a tag with Selenium: a step-by-step guide

Trying to figure out how to extract the text from the value attribute in the HTML code below. Specifically, I want to extract all the strings inside the value attribute of "td class="regu". I've managed to extract names of people, but I'm struggl ...

Heroku App Breaks Down - Fails to Render Static HTML Content (Express Server)

Despite my best efforts, I keep encountering this persistent error on Heroku whenever I attempt to serve a static HTML page with some basic JS, images, and CSS. I diligently followed all the advice from SO, made adjustments to index.js, restructured files, ...

Creating a glassy appearance: What's the process?

I want to achieve a similar glass effect as shown in this screenshot here: (), but despite trying to adjust the opacity, I can't seem to get it right. Here's my code: .Head { position: absolute; top:200px; margin-left: 20%; c ...

Choosing the Right Alignment for Your Selection Box

How can I adjust the alignment of the select box to make it inline with the others? I also need to apply this alignment to the three option input boxes. CSS: #newwebsiteSection, #websiteredevelopmentSection, #otherSection{ display:none; } #newwebsite ...