{"id":354567,"date":"2021-10-22T10:57:30","date_gmt":"2021-10-22T17:57:30","guid":{"rendered":"https:\/\/css-tricks.com\/?p=354567"},"modified":"2021-10-22T10:57:32","modified_gmt":"2021-10-22T17:57:32","slug":"can-include-a-certain-html-element-within-another-certain-html-element","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/can-include-a-certain-html-element-within-another-certain-html-element\/","title":{"rendered":"Can Include (a Certain HTML element within another Certain HTML Element)"},"content":{"rendered":"\n

A single-serving website<\/a> from Alexander Vishnyakov for testing if it’s valid to put any particular HTML element within another type of HTML element. Kinda neat to have a quick reference for this.<\/p>\n\n\n\n

Some combinations feel fairly obvious: can you put a <video><\/code> inside an <input<\/code>>? Uh, no. Some are trickier: can you put a <div><\/code> inside an <h1><\/code>? Nope \u2014 that one bit me this week (derp). Some are a little confusing, like <div><\/code> is an invalid child of an <ol><\/code> but a valid child of a <dl><\/code>. <\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

A single-serving website from Alexander Vishnyakov for testing if it’s valid to put any particular HTML element within another type of HTML element. Kinda neat to have a quick reference for this. Some combinations feel fairly obvious: can you put a <video> inside an <input>? Uh, no. Some are trickier: can you put a <div> […]<\/p>\n","protected":false},"author":3,"featured_media":354572,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Not sure if an HTML element can be nested inside of a mother certain HTML element? Here's a site you can reference.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[731],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/caninclude.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":302917,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-data-attributes\/","url_meta":{"origin":354567,"position":0},"title":"A Complete Guide to Data Attributes","date":"February 17, 2020","format":false,"excerpt":"Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/data-attribute-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352342,"url":"https:\/\/css-tricks.com\/comparing-methods-for-appending-and-inserting-with-javascript\/","url_meta":{"origin":354567,"position":1},"title":"Comparing Methods for Appending and Inserting With JavaScript","date":"September 24, 2021","format":false,"excerpt":"Let's say we want to add something to a webpage after the initial load. JavaScript gives us a variety of tools. Perhaps you've used some of them, like append, appendChild, insertAdjacentHTML, or innerHTML. The difficult thing about appending and inserting things with JavaScript isn\u2019t so much about the tools it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/js-insert-append.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333537,"url":"https:\/\/css-tricks.com\/dynamically-switching-from-one-html-element-to-another-in-vue\/","url_meta":{"origin":354567,"position":2},"title":"Dynamically Switching From One HTML Element to Another in Vue","date":"February 2, 2021","format":false,"excerpt":"A friend once contacted me asking if I had a way to dynamically change one HTML element into another within Vue\u2019s template block. For instance, shifting a

element to a element based on some criteria. The trick was to do this without relying on a series of v-if\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/button-link-swap.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":171586,"url":"https:\/\/css-tricks.com\/using-encapsulation-semantic-markup\/","url_meta":{"origin":354567,"position":3},"title":"Using Encapsulation for Semantic Markup","date":"June 2, 2014","format":false,"excerpt":"The following is a guest article by Chris Scott. Chris takes us through a great use case for the Shadow DOM. As designers, we may want to style something in a certain way, but sometimes end up having to go to war with HTML, CSS, and JS to get it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373372,"url":"https:\/\/css-tricks.com\/more-details-on-details\/","url_meta":{"origin":354567,"position":4},"title":"More Details on `details`","date":"September 15, 2022","format":false,"excerpt":"A lot of chatter around the ol'
and elements lately! I saw Lea Verou recently tweet an observation about the element's display behavior and that sorta splintered into more observations and usage notes from folks, including a revived discussion on whether should be allowed to contain interactive\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/details-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326279,"url":"https:\/\/css-tricks.com\/a-complete-state-machine-made-with-html-checkboxes-and-css\/","url_meta":{"origin":354567,"position":5},"title":"A Complete State Machine Made With HTML Checkboxes and CSS","date":"November 27, 2020","format":false,"excerpt":"State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we\u2019re going to do exactly that. I recently built a website\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/state-management.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/354567"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=354567"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/354567\/revisions"}],"predecessor-version":[{"id":354723,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/354567\/revisions\/354723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/354572"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=354567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=354567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=354567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}