When the browser encounters your html, it starts building the DOM tree. There are rules on how the tree is to be built, this depends on the built-in tags, what happens when the a certain element is placed in a certain place, how should the tree be built. All these rules are properly defined in the specification. The insertion mode is a state variable that controls the primary operation of the tree construction stage.
http://dev.w3.org/html5/spec-preview/parsing.html#insertion-mode

Let’s look into the code. The input element is placed inside a select tag, in this case, the specification says “act as if an end tag with the tag name ‘select’ had been seen, and reprocess the token”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Insertion Mode</title>
</head>
<body>
    <select name="" id="">
        <option value="1">1</option>
        <input type="text" value="rushi" />
        <option value="2">2</option>
    </select>
</body>
</html>

“Keep learning.”
-Rushi

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>