html - The DOM tree is showing the title tag inside the BODY section and not in the HEAD section in the LIVE DOM viewer? Why is this happening? -


in order check working of dom tree (actually check how works if don't put tags orderly or write random text without using tag) touched upon live dom viewer.

as write title before text, dom tree shows in head section right way:

input:

<!doctype html> <title>xyz</title> random text

output(what dom viewer shows):

doctype: html  html    head      title        #text: xyz          #text:    body        #text: random text

but when write text before title tag, shows title in body section , not in head. why happening? :

input:

<!doctype html> random text <title>xyz</title>

output:

doctype: html   html     head     body         #text: random text         title         #text: xyz         #text:

basically, when parser sees text directly inside head, insertion mode switched "in body", text appears inside body elements. following title elements won't moved head, because has been parsed.

specifically, code ...

<!doctype html> <title>xyz</title> random text

... parsed follows:

  1. the insertion mode set "initial"
  2. the parser sees doctype token. insertion mode switched "before html".
  3. the parser sees line break, ignored.
  4. the parser <title> start tag. html element created. insertion mode switched "before head", , token reprocessed.
  5. the parser <title> start tag. head start tag inserted. insertion mode switched "in head", , token reprocessed.
  6. the parser <title> start tag. generic rcdata element parsing algorithm followed.
  7. a title element inserted. insertion mode switched "text".
  8. the parser sees text. characters inserted.
  9. the parser sees </title> end tag. title element popped off stack of open elements. insertion mode switched original one.
  10. the parser sees text. head element popped off stack of open elements. insertion mode switched "after head", , token reprocessed.
  11. the parser sees text. body start tag inserted. insertion mode switched "in body", , token reprocessed.
  12. the parser sees text. characters inserted.
  13. the parser sees end-of-file token. the end

and code ...

<!doctype html> random text <title>xyz</title>

... parsed follows:

  1. the insertion mode set "initial"
  2. the parser sees doctype token. insertion mode switched "before html".
  3. the parser sees line break, ignored.
  4. the parser sees text. html element created. insertion mode switched "before head", , token reprocessed.
  5. the parser sees text. head start tag inserted. insertion mode switched "in head", , token reprocessed.
  6. the parser sees text. head element popped off stack of open elements. insertion mode switched "after head", , token reprocessed.
  7. the parser sees text. body start tag inserted. insertion mode switched "in body", , token reprocessed.
  8. the parser sees text. characters inserted.
  9. the parser sees <title> start tag. token processed using "in head" insertion mode.
  10. the parser sees <title> start tag. generic rcdata element parsing algorithm followed.
  11. a title element inserted. insertion mode switched "text".
  12. the parser sees text. characters inserted.
  13. the parser sees </title> end tag. title element popped off stack of open elements. insertion mode switched original one.
  14. the parser sees end-of-file token. the end

Comments

Post a Comment