Multiple "html" Tags In Html File: How To Separate Css Rules When Classes And Id's Can Be The Same?

May 30, 2024 Post a Comment

I see that multiple HTML tag file is correctly rendered by the browser. I mean like two html files merged and concatenated. But if I put a STYLE region into each of the HTML parts

Solution 1:

Having more than one html tag in a document is not valid HTML code. The browser will try to render the content anyway, but the separate html sections will simply be mashed together into a single document.

You can't apply separate styles to seperate html sections, because the browser will not keep the html sections separate. Anything after the first html section will just be thrown in at the end of the previous body, and the browser tries to make some kind of sense out of the complete mess.

Solution 2:

I think multiple html-Tags in one document are not allowed. I do not see any advantages for doing so.

When you have multiple documents, consider to use the frame or better iframe-tag

Solution 3:

HTML Tags and CSS rules are entirely different in behavior. So, if u merge html files also, it will all act as a single file. Try PHP include function and include a HTML page inside another. Once rendered, it will act as a child of parent.

So for a Single HTML file if you write multiple CSS rules with same name, it will surely crash.

Solution 4:

You can do this by replacing the classes/ids with inline code.

Consider the following 1st html file:

<html><head><style>.aclass{
            color: #fff;
        }
    </style></head><body><ahref="#"class="aclass">xyz</a></body></html>

And this 2nd html file:

<html><head><style>.aclass{
            color: #000;
        }
    </style></head><body><ahref="#"class="aclass">abc</a></body></html>

Now you can make the styles inline in both the files and then merge them, and final results should look like:

<html><head></head><body><ahref="#"style="color:#fff;">xyz</a><ahref="#"style="color:#000;">abc</a></body></html>

Solution 5:

Having multiple elements with same id is very error prone. Breaks on more than one occasion like

On javascript: document.getElementById('idname');

Html5 News