HTML5 Foster Parenting
Instead of a <td> tag what happens when a custom tag element is placed inside a <tr> tag. I was trying to write a custom directive in angular which was doing the same thing as mentioned above. To my surprise the result was not the desired one. And this is how I accidentally stumbled upon the concept of HTML5 Foster parenting. Foster parenting happens when content is misnested in tables.
http://dev.w3.org/html5/spec-preview/tokenization.html#foster-parenting
Let’s look into the code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Foster Parenting</title> <style> table, tr, td { border: 1px solid red; } </style> </head> <body> <table> <tr> <wth>am I supposed to be here</wth> <td>i am a td</td> <td>iam another td</td> </tr> </table> </body> </html> |
“Keep learning.”
-Rushi
-Rushi