How do you write it?
❯ <img>
❯ <img />
❯ <img></img>
Void elements in HTML, explained.
⇩
❯ <img>
❯ <img />
❯ <img></img>
Void elements in HTML, explained.
⇩
➊ Element Structure in HTML
➤ Start Tag
Example: <div>
➤ End Tag
Example: </div>
➤ Content
Anything that's been put between
the start tag and the end tag
➤ Start Tag
Example: <div>
➤ End Tag
Example: </div>
➤ Content
Anything that's been put between
the start tag and the end tag
➋ Self Closing Tags
⬘ If you can put a "/" before the closing of the start tag, it's called a "Self Closing Tag".
Example: <img />
⬙ For a self closing tag, there won't be any content and, an end tag.
Example:
<img /> abc </img>
✘ ✘
⬘ If you can put a "/" before the closing of the start tag, it's called a "Self Closing Tag".
Example: <img />
⬙ For a self closing tag, there won't be any content and, an end tag.
Example:
<img /> abc </img>
✘ ✘
➌ Void Elements
⬘ Void elements are those elements that cannot have any content. It contains only a start tag and no end tag.
⬗ The "start tag" may optionally be a "self closing tag".
⬙ Also in HTML, self closing tags are allowed only for "Void Elements".
⬘ Void elements are those elements that cannot have any content. It contains only a start tag and no end tag.
⬗ The "start tag" may optionally be a "self closing tag".
⬙ Also in HTML, self closing tags are allowed only for "Void Elements".
➍ List of Void Elements
❍ area
❍ base
❍ br
❍ col
❍ embed
❍ hr
❍ img
❍ input
❍ link
❍ meta
❍ source
❍ track
❍ wbr
❍ area
❍ base
❍ br
❍ col
❍ embed
❍ hr
❍ img
❍ input
❍ link
❍ meta
❍ source
❍ track
❍ wbr
➎ Let's Summarise
⬘ For "Void Elements"
✔ <img>
✔ <img />
✘ <img></img>
⬙ For "Non-Void Elements"
✘ <div>
✘ <div />
✔ <div></div>
⬘ For "Void Elements"
✔ <img>
✔ <img />
✘ <img></img>
⬙ For "Non-Void Elements"
✘ <div>
✘ <div />
✔ <div></div>
🔗 Reference
#void-elements" target="_blank" rel="noopener" onclick="event.stopPropagation()">html.spec.whatwg.org
#void-elements" target="_blank" rel="noopener" onclick="event.stopPropagation()">html.spec.whatwg.org
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✅ Tutorials
✅ Tricks
✅ Career Tips
✅ Cheat Sheets
✅ Interview Questions
✅ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✅ Tutorials
✅ Tricks
✅ Career Tips
✅ Cheat Sheets
✅ Interview Questions
✅ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
Loading suggestions...