Nesting Primer Tutorial
The text (which can include emojis) …
- display: inline;
- display: inline-block;
… HTML elements are endlessly fascinating in our eyes, regarding the “nesting” of elements.
You can read all you like about this at a website like W3schools but we find endless surprises, so we decided to code for a web application with scope within a table cell “parent” element …
- reinitialize (ie. append) span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element to the end of table cell content
- nest span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element onto the end of the most outer table cell element’s content within the table cell content, or a clicked element flagged with a pink background
We find it interesting changing up the choice above and font-size and new element content textbox settings and seeing what happens. You see the resultant HTML innards below in a textarea element which changes to are reflected above (and in this way, you can pick an element type not listed above, if you like), as are changes to second and on table cell content’s on the top row.
Feel free to try out this proof of concept Nesting web application below …
If this was interesting you may be interested in this too.
