Working with invalid HTML tags

Question

Hello,

I have a set of HTML codes and I am wondering how can I wrap a code such that it is interpreted correct by the browser and independent of the others.

I think I should give an example:

x = <a href="stackoverflow.com">Something

y = <b>Else</b>

I print x, then y and the browser will consider that y is part of the link defined in x. How can I force the browser to interpret x independent of y; that's is, how can I wrap x and y?

I don't know if it is relevant, but I work in Python.

Thanks!

Answer 1

Close the anchor tag if you don't want the bold tag to be part of it.

x = <a href="stackoverflow.com">Something</a>

If you don't close the anchor, most browser will assume that the rest of the document is contained within this tag.

---

Also, could I recommend that you use <strong> instead of <b> since <b> is not semantic.

Answer 2

Modern browsers do a good job of "cleaning up" broken or invalid HTML code. Obviously though there are lots of situations where what the author intends is not what the browser interprets. Your example is a good one: where should the browser insert the closing </a> tag? The browser has internally a bunch of rules to decide where to do this (which in your case doesn't give you what you want).

The only way to reliably get a browser to render exactly want you want is to ensure that what you are sending to the browser is correct! In that case, look at your HTML strings independently and add missing end tags where needed.

(Depending on the complexity of the HTML, there's possibly a number of approaches to this. You might be able to get away with manually checking each string, or if the HTML is more complex, you might need to use a parser.)

Answer 3

You must find all the tags in the HTML snippets and make sure that they are closed properly.

A simple solution is to use this regexp: r<[^>]+> and this pseudocode:

find next match:
    if match ends with `/>`:
        continue
    if match starts with '</':
        Pop element from stack and make sure that the name matches the element from the match
    else:
        Push element name on stack

for each element on stack:
    print '</%s>' % element.name