Did you know html elements had an element named element ? Well ! I didn't.
This article is originally published on https://devansvd.com/html. Visit if you're interested.
Quick Demo:
Visualize Cross browser Rendering - https://devansvd.github.io/html-elements
Frustration:
Ever wonder, when you begin writing
markup's
by skimming through thehtml
docs, Oh! that's a lot of tags and faced why the hell the height, margin-top or margin-bottom not applied to span elements ?Then, when you tried to place an html element in certain tiny space hoping it would fit there but it collapses the whole thing and took too much space. damn !!!
Also, Finally when you stuffed that element thing in the top right corner, Said to yourself Yay!! I did it, then viewed it in some other browser - Man !! Cross browsers.
Well, this select box is rendered ugly in this specific browser. why ? have to tweak css Ouch...Ouch...Ouch...
Inline
vsblock
vsInline-block
Oh my !
And then feel like time to read the docs properly. hahaha.
Night-mare. Real Nightmare. We all been there down the road, I guess.
Questions need answers:
Want to know how much each browsers apply
margin
,padding
,borders
and how it styles the UI for a specific element.That's a lot of elements in there how many of them are
inline
? how many are them areblock
elements ?
Time to overcome:
While finally reading the docs, I was surprised to see few things I did not know before ...
- The
inline
andblock
elements are removed to avoid some confusion fromhtml5 specs
, newcontent categories
are introduced for grouping elements. - Many
input
types specificallyweek picker
. -
Datalist
as anautocomplete
,filter
,dropdown
,custom input that's
a handy element. -
Fieldset
- this draws a nice UI around the element. - Subtitle
tracks
for a video element, wow! just wow. - Embedding a whole pdf via
Object
element. -
Mapping
certainareas
of an image to make indications. Nice. -
Details
collapse - expander - Tables don't have default
borders
. ew -
Marquee
text dance around. Interesting.
Solution:
- A page to view all the element to reveal their
cross-browser
default rendering without any fancycss
. - By placing
each element
Intentionally next to each other and see which are allinline elements
? which are allblock elements
?
Demo:
Visualize Cross browser Rendering - https://devansvd.github.io/html-elements
Note: Intentionally not be mobile responsive.
This is not suppose to be used as a reference(use MDN for that), Intended to visualize default cross browser rendering of each elements Specifically, how much space it occupies like
marigin
,padding
,border
.Intentionally each elements placed next to each other(
Span tag
is occupied as their heading) to see if that specific element isinline
orblock
element. So don't think like page is not aligned properly, What the Hell ? Intentionally Ugly.
Mdn docs are really so good, Credits to them.
I guess I could say this is an experiment with html element. This is my First post on Dev.to.
Feel free to share your thoughts and feedback.
I'm Devan
- Aka devansvd.
Top comments (0)