Elements

There are six different kinds of elements:

1. Void elements

area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr

2. The template element

template

3. Raw text elements

script, style

4. Escapable raw text elements

textarea, title

5. Foreign elements

MathML, SVG.

6. Normal elements

Rest of the HTML elements.

block-level elements

• A Block-level element occupy the full width of their parent container by default.
• A Block-level elements has a new line, both before and after the element.
• Block-level elements are like stack of boxes.

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

inline elements

• An Inline element do not occupy the full width of their parent container by default.
• An Inline element do not start on a new line.
• An Inline element do not respect top and bottom margins & paddings.
• Inline elements can be place side by side.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

inline-block

• display: inline-block elements respect top and bottom margins & paddings.

Others

• <search>: The generic search element
• <dialog>: The Dialog element

Resources

1. https://html.spec.whatwg.org/