Html-5 elements - Visualize Cross Browser Rendering

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 is inline or block element. So don't think like page is not aligned properly, What the Hell ? No Additional Margin, Padding, Border is added in-between elements. Grouping sub headings are fake to check their actual grouped section head to MDN or Html5 Spec.

Fun Fact: Did you know html elements had an element named element ? Well ! I didn't.

Note: Click the left element heading(Red color heading) of each element to view their reference and how to use.

Input types:

text: disabled text: number: button: checkbox: color: date: datetime local: email: file: hidden: month: password: radio: range: reset: search: submit: tel: time: url: week:
image:

Form elements:

button element: datalist element: fieldset element:
Choose your favorite monster

label element: legend element: Choose your favorite monster form element:
Form element represents a document section containing interactive controls for submitting information.
textarea element: meter element: At 50/100 select, options elements: select with optgroup elements: output element: Output = 60 progress element: 70%

Inline Elements:

a element: Netlify abbr element: LOL b element: b element is known as Bring attention to element bdi element: الرجل القوي إيان bdo element: This text will go right to left. br element:
cite element: Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1) code element: [1,2,3,4].push() data element: Mini Ketchup dfn element: The (<dfn>) - definition. em element: In html 5, what was previously called block-level content is now called flow content. i element: The Latin phrase Veni, vidi, vici is often mentioned in music, art, and literature. kbd element: Terminal magic press Ctrl + r mark element: Mark my words q element: The Inline Quotation element s element: Strike me through. samp element: Keyboard not found, Press F1 to continue. Ouch!!! small element: This whole sentence is in small letters. span element: Some text inside span strong element: Important: Before proceeding, make sure you add plenty of butter. sub element: C8H10N4O2 sup element: a2+ b2 = c2 time element: u element: This sentence has wrnogly spelled word. var element: l × w × h wbr element: Reallylongwordwbronlyeffectsettingwidth rb, rp, rt elements: 漢字 (kanji) ruby, rtc elements: 旧jiù 金jīn 山shān San Francisco

Special Elements:

audio element: img element: Clock video, track elements: embed element: map, area elements: Workplace Computer Phone Cup of coffee Iframe element: Object, param elements(pdf): Canvas element: An alternative text describing what your canvas displays. Picture, Source elements: surfer noscript element: Javascript Enabled! del, ins element: text deleted text inserted

Block Elements:

address element:
You can contact author at www.somedomain.com.
If you see any bugs, please contact webmaster.
You may also want to visit us:
Mozilla Foundation
331 E Evelyn Ave
Mountain View, CA 94041
USA
article element:
Article element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.
aside element: footer element: header element:
Header element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
h1 h2 h3 h4 h5 h6 elements:

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
hgroup element:

h group heading level 4

Living Standard — Last Updated 12 August 2016
main element:
Main element represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
nav element: section element:
Section element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. Typically, but not always, sections have a heading.
Blockquote element:
It's not who I am underneath, but what I do that defines me. —Batman Begins, 2005.
Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced. —Aldous Huxley, Brave New World.
dl, dt, dd, elements:
Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
div element:
Content Division element (div) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.
Figure, Figcaption elements:
Usage of Figure and figcaption
Figure (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (figcaption) element. The figure, its caption, and its contents are referenced as a single unit.
hr element:
Ul, li (Unordered list) elements: Ol, li (Ordered list) elements:
  1. Mix flour, baking powder, sugar, and salt.
  2. In another bowl, mix eggs, milk, and oil.
  3. Stir both mixtures together.
  4. Fill muffin tray 3/4 full.
  5. Bake for 20 minutes.
p element:

p element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

pre element: 
      ___________________________
      Holy Cow ! Is this a Cow ?
      ---------------------------
             \   ^__^
              \  (oo)\_______
                 (__)\       )\/\
                     ||----w |
                     ||     ||

Table Elements:

table with caption, tr, th, td elements:
Example Caption
Login Email
user1 user1@sample.com
user2 user2@sample.com
table with col, colgroup elements:
Batman Robin The Flash Kid Flash
Skill Smarts Dex, acrobat Super speed Super speed
table with thead, tbody elements:
Student ID Name Major
3741255 Jones, Martha Computer Science
3971244 Nim, Victor Russian Literature
4100332 Petrov, Alexandra Astrophysics
Footer Hello world

Interactive elements:

details, summary elements:
System Requirements Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. details creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the summary element.
menu element: Action Another action
Separated action dialog element: Grettings To everyone ! I'm a dialogue element with open attribute

Web components:

slot element: Slot element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. template element (Can be rendered via js):

Deprecated elements:

Intentionally not added elements - basefont, bgsound, command, content, dir, element, font, frame, frameset, image, isindex, keygen, listing, menuitem, multicol, nextid, nobr, noembed, noframes, plaintext, shadow, spacer, xmp

acronym element: WWW applet element: Sorry, you need Java to play this game. big element: This whole sentence is in bigger letters. blink element: Why would somebody use this? center element:
This text inside center element will be centered.
marquee element: This text will scroll from right to left marquee with behavior element: This text will bounce strike element: Today's Special: Salmon tt element: tt element creates inline text which is presented using the user agent's default monospace font face.

=================================== THE END ============================================

Useful Info:

To visualize Display Inline difference between (display block vs display inline vs display inline-block) with height 100px

Note: This will reveal where height is applied. Where it is not! :) Example taken from https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block credits to the author.

display: block
Ach, was muß man oft von bösen
Kindern hören oder lesen!
Wie zum Beispiel hier von diesen
Welche Max und Moritz hießen.
Die, anstatt durch weise Lehren
Sich zum Guten zu bekehren,
Oftmals noch darüber lachten
Und sich heimlich lustig machten.
display: inline
Ach, was muß man oft von bösen
Kindern hören oder lesen!
Wie zum Beispiel hier von diesen
Welche Max und Moritz hießen.
Die, anstatt durch weise Lehren
Sich zum Guten zu bekehren,
Oftmals noch darüber lachten
Und sich heimlich lustig machten.
display: inline-block
Ach, was muß man oft von bösen
Kindern hören oder lesen!
Wie zum Beispiel hier von diesen
Welche Max und Moritz hießen.
Die, anstatt durch weise Lehren
Sich zum Guten zu bekehren,
Oftmals noch darüber lachten
Und sich heimlich lustig machten.
Difference summary:

Infact in Html5 spec, block element and inline block elements were removed, Instead Content categories is introduced.

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in the html5 specification:

To vizualize which element grouped to which category, here is the nice svg take from html5 spec (hover over the good stuff):

The Box Model: (content-box model by default in all browsers)

Box: To Vizualize content-box model and border-box model 

        .box {
          border: 5px solid rebeccapurple;
          background-color: lightgray;
          padding: 40px;
          margin: 40px;
          width: 300px;
          height: 150px;
        }
Total width: content width + padding-left + padding-right + border-left + border-right, Total height: content height + padding-top + padding-bottom + border-top + border-bottom
I use the standard box model.
Total: 390 X 240 px
Total width: content width , Total height: content height
I use the border-box model. exactly: 300 X 150 px

It first applies the width and height of the box, then it apply border, padding, margin

References: