HTML blockquote vs div

Question

Is there any benefit in using a <blockquote> element over a <div>? I was looking at a website's markup to learn CSS and I couldn't figure out why the <blockquote> was being used.

EDIT: Yeah sorry I didn't clarify, it was used to hold the <div> tag with username as 'text' and an input tag. There was clearly no quote.

Answer 1

Easy peasy, right? Nothing has really changed. Remember that as is a ‘block-level element’ (flow content) we can put most anything in it, including headers, images, and tables, in addition to the usual paragraphs of text. There are a couple of slight differences in HTML5 though. is a sectioning root, meaning that any - elements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosing

tags is now completely kosher. Here are some simple examples (apologies for the fake content):

The suggestions in my article came directly from writing and editing a few megs worth of raw text used on my website, which bought up lots of edge-cases and curious questions about semantics; so whilst I wouldn’t say my choices would suit everybody, they have at least been trialed in a background of the text.

My complaint about the ABBR article you published here on HTML5Doctor was essential that you weren’t following your own advice, as I know that I practically went insane trying to use those rules on megs of text before I came up with my own to take back control of my sanity.

But, I will definitely say that cite still remains the weaker out of the three and I appreciate this article for being far more square.

If you would like, my article could be further adapted with feedback from the doctors to better suit a broader audience. I strongly believe that a key part of learning HTML5 is learning HTML4 properly and eschewing spans and divs for semantics where possible

Answer 2

In theory, HTML should be as "semantic" as possible - meaning that every element should indicate something about its content. <h1>s should enclose the most important headline; <p>s should surround paragraphs; <em> should indicate emphasis, etc.

That way the code makes sense when you - or a screen reader, or whatever - look at it. This also helps for devices that don't understand all (or any) of your CSS rules.

Answer 3

The likely reason they're using blockquote is that many people dabbling in HTML don't know enough about CSS to know that a div can be given the same left-margin as blockquote renders with by default.

Answer 4

As mentioned earlier, blockquotes are for quotes. Just like tables are (arguably) for tabular data, lists are for listings, divs for divisions, p for paragraphs, etc.

Sure, you could almost everything with divs. That's the beauty of using HTML with CSS: you can make anything look however you want it to look (in theory, in the real world browser quirks mess that up sometimes).

Using divs for anything you can think of is commonly known as 'divitis'. See this article for a little explanation :)

Answer 5

As mentioned, <blockquote> is for quoting. Similarly you will use several <p> blocks for paragraphs within one <div> that holds page content or whatever. HTML5 proposal will have lot more block elements (i.e same as divs) which purpose will be to add a semantic info about it, such as header, footer, menu, etc.

Answer 6

<blockquote> should be used when the text it contains is a block quote. This sounds very obvious to me, so is there another aspect to your question?

Answer 7

Semantically, a blockquote tag makes sense when you're quoting something. Sure, a stylized div can do the same thing, but why not use the right tag for the job?

Additionally, the blockquote tag allows you to include a citation with the cite attribute.