Do Browsers Automatically Insert Missing HTML Tags?

I'm working with a web page the translates content from XML to HTML and then displays it on the HTML template page. I have a single page where some elements are getting misplaced

Solution 1:

For the most part unclosed tags will be automatically closed - but each browser treats an unclosed tag differently. Not only does it depend on your browser, it also depends on the doctype spec.

To quote @Elliott Frisch :

I believe most web-browsers attempt to fail gracefully (unless you use a strict DTD), the issue is that the specification can't define how to render invalid content

You can find out more information about browser interpretation of invalid markup here: http://www.w3.org/wiki/Validating_your_HTML#Different_browsers_interpret_invalid_HTML_differently

According to W3C: Specifying your doctype along with using validators can help find offending tags: http://www.w3.org/TR/WCAG20-TECHS/H74.html

Here is an exerpt from W3C.H74 :

Example 1: HTML

HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that all id attribute values are unique and that opening and closing tags are used according to the specification.

Note: The specification for which tags require closing elements has changed with the introduction of HTML5.

Example 2: XHTML

Like other other XML-based documents, XHTML documents reference a Document Type Definition (DTD) or other type of XML schema. The developer can use online or offline validators (including validation tools built into editors) to check that opening and closing tags are used according to the specification.

Example 3: Using test frameworks

When a Website generates HTML or XHTML dynamically instead of serving only static pages, a developer can use XHTMLUnit, XML Test Suite or a similar framework to test the generated XHTML code.

W3C provides resources for testing your html: http://www.w3.org/TR/WCAG20-TECHS/H74.html

There a number of HTML validators across the web, but it is important to specify the doctype properly to leverage them all. Here is another resource list that may help you: http://www.w3.org/wiki/Validating_your_HTML

Solution 2:

They all do. For example, inspect the source of http://blog.fefe.de/ to see a minimal variant that is completed by any modern browser. If you use the browsers developers tools it will show up all the missing tags.

A common example is that every browser add the tbody element to tables that are missing one. So the following:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

will get turned into:

<table>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Solution 3:

Missing tags are treated differently depending on tag. When HTML specifications allow end tag omission, e.g. for </p> and </td>, all browsers imply them and are even required to do so. The situation is different for invalid end tag omission. For example, </div> may never be omitted. What browsers actually do is that they imply the closing </div> at the very end of the document body. This usually means that the div element is interpreted as containing much more than intended, and this may have drastic effects if there are style sheets that format the element (or scripts that process it). For text-level elements like em, processing is more complicated: an end tag is implied when the end of an enclosing block element is encountered but the text-level element is opened again at the start of the next block! This is described and other specialties are presented in section 8.2.8 An introduction to error handling and strange cases in the parser of the HTML5 spec.

All this applies to HTML syntax. When using XHTML syntax and the browser has been instructed to process the data as being of an XML content type such as application/xhtml+xml, no end tag omission is tolerated: the first omitted end tag, being a well-formedness violation, is treated as a fatal error. This means that document content is not shown at all; an error message is shown to the user instead. This is very rare situation on web pages, since there is seldom a good reason to use “real XHTML” (i.e. XHTML processed by XML rules).

The conclusion is that you should generate valid HTML and at least in some tests validate it, using a suitable validator like http://validator.w3.org.