Differences between and

Question

There are several articles about this topic but I\'m not able to understand the relevant difference between and

. The s

Answer 1

<blockquote> is a block level element like div. Which means that it will start at a new line if you put it in a document flow. For example, if my markups are:

 Henry Ford said <blockquote>Most people spend more time and energy going around problems than in trying to solve them.</blockquote> in the 20th century

They will be shown on browsers like this

<q> is an inline element like span. So if my markups are

 Henry Ford said <q>Most people spend more time and energy going around problems than in trying to solve them.</q> in the 20th century

The result will be

Answer 2

<blockquote> is block level element, normally it starts and end with new line when displayed in the browser. <q> is inline element,normally it displays without line break.

Block elements stand on their own; inline elements goes with the flow.

Answer 3

Just see their definitions:

• q element:

  […] some phrasing content quoted from another source

• blockquote element:

  […] a section that is quoted from another source

The last part is the same ("quoted from another source"), so they only differ in "phrasing content" vs. "section".

q can only contain phrasing content (and it can only be used where such phrasing content is expected). blockquote can only contain flow content (and it can only be used where such flow content is expected). In that sense, they are similar to span (~ q) and div (~ blockquote).

Some other differences:

Note that blockquote is a sectioning root, which means that any headings or sectioning elements it may contain will not be part of the document’s outline. q can’t contain headings or sectioning elements in the first place.

Note that you MUST NOT use any quotation marks when using q (not before, not inside, not after), because user agents should add them automatically. There is no such restriction for blockquote (however, it’s probably unlikely that you’d need some for block quotes).

Answer 4

is block level element, normally it starts and end with new line when displayed in the browser. is inline element,normally it displays without line break.

Block elements stand on their own; inline elements goes with the flow.