Thread by @swapnakpanda

🟦 All inline & block-level elements in HTML / CSS

Check inside the 🧵 for

✧ Interesting details about inline & block-level
✧ Link to high resolution image

⇩

📋 Table of Contents

➊ Introduction
➋ inline-level
➌ block-level
➍ Changing Element Level
➎ List of inline-level elements
➏ List of block-level elements
➐ Link to High Resolution Image

🚥 Disclaimer

❑ I have compiled these information with all sincerity. But in case you find any omissions or, wrong representations, 💬 me.

❒ If you have any suggestions or, feedbacks, share those with me. I am eager to hear from you.

➊ Introduction

❑ HTML elements can be categorised as either "block-level" elements or "inline-level" elements.

❒ Since this is a presentational characteristic, it is now-a-days specified by CSS in the Flow Layout.

➋ inline-level

❑ An inline element does not start on a new line and only takes up as much width as necessary.

❒ Generally, inline elements may contain only data and other inline elements.

❑ inline elements can't contain block elements inside.

➌ block-level

❑ A block-level element always starts on a new line.

❒ It takes up the full width available (stretches out to the left and right as far as it can).

❑ It may contain inline elements and (sometimes) other block-level elements.

➍ Changing Element Level

❑ You can change the visual presentation of an element using the CSS display property.

❒ By changing the value of display from "inline" to "block", you can tell the browser to render the inline element in a block box, and vice versa.

❑ However, doing this will not change the category and the content model of the element.

❒ It means by changing the value of display from "inline" to "block" won't still allow you to put block-level elements inside it.

➎ List of inline-level elements

❍ a
❍ abbr
❍ acronym
❍ audio
❍ b
❍ bdi
❍ bdo
❍ big
❍ br
❍ button
❍ canvas

❍ cite
❍ code
❍ data
❍ datalist
❍ del
❍ dfn
❍ em
❍ embed
❍ i
❍ iframe
❍ img

❍ input
❍ ins
❍ kbd
❍ label
❍ map
❍ mark
❍ meter
❍ noscript
❍ object
❍ output
❍ picture

❍ progress
❍ q
❍ ruby
❍ s
❍ samp
❍ script
❍ select
❍ slot
❍ small
❍ span
❍ strong

❍ sub
❍ sup
❍ svg
❍ template
❍ textarea
❍ time
❍ u
❍ tt
❍ var
❍ video
❍ wbr

➏ List of block-level elements

❍ address
❍ article
❍ aside
❍ blockquote
❍ details
❍ dialog
❍ dd
❍ div
❍ dl
❍ dt
❍ fieldset

❍ figcaption
❍ figure
❍ footer
❍ form
❍ h1
❍ h2
❍ h3
❍ h4
❍ h5
❍ h6
❍ header

❍ hgroup
❍ hr
❍ li
❍ main
❍ nav
❍ ol
❍ p
❍ pre
❍ section
❍ table
❍ ul

🌆 Link to High Resolution Image

If you liked this one, give a ⭐️ to this GitHub repo to support my work.

✧ Direct Link:
github.com/swapnakpanda/I…

End of 🧵

Are you into Web Development? Check out my "Moment" section for the regular contents (threads, infographics, resources) I post to make your learning easier.

If your are interested in such contents, Follow Me ✅