Hi I'm seeing a great number of different ways to implementat blockquote in html but it doesn't seem clear in its documentation how should I properly format a blockquote let's say of a famous quote and metion its author like:
In victory, you deserve Champagne, in defeat, you need it.
Napoleon Bonaparte
What would the correct format of that be in HTML5?
Should the author be inside or outside the blockquote tag?
Should it be inside the cite attribute? (even knowing the documentation specifies an URI , not author)
I googled about this and it looks like <figure> and <figcaption> should do the job:
<figure>
<blockquote cite="https://developer.mozilla.org/samples/html/figure.html">
Quotes, parts of poems can also be a part of figure.
</blockquote>
<figcaption>MDN editors</figcaption>
</figure>
https://developer.mozilla.org/samples/html/figure.html
<figure>
<blockquote cite="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element">
The figure element represents some flow content, optionally with a caption,
that is self-contained and is typically referenced as a single unit from the
main flow of the document.
</blockquote>
<figcaption>asdf</figcaption>
</figure>
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element
UPDATE 2020
WHATWG says about the blockquote element
Attribution for the quotation, if any, must be placed outside the
blockquote element.
WHATWG says about the cite element
The cite element represents the title of a work (e.g. a book, a paper,
[...])
A person's name is not the title of a work [...] and the element must
therefore not be used to mark up people's names.
So the following HTML it's fine:
<blockquote>
<p>In victory, you deserve Champagne, in defeat, you need it.</p>
</blockquote>
<p>— Napoleon Bonaparte</p>
OLD POST 2018
HTML 5.3 Editor’s Draft, 9 March 2018
W3C says about the cite element:
The cite element represents a reference to a creative work. It must
include the title of the work or the name of the author (person,
people or organization) or an URL reference, or a reference in
abbreviated form as per the conventions used for the addition of
citation metadata.
So the following HTML it's fine:
<blockquote>
Those who pass by us, do not go alone, and do not leave us alone;
they leave a bit of themselves, and take a little of us.
<cite>Antoine de Saint-Exupéry</cite>
</blockquote>
This is how Bootstrap does quotes in v3.3.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
More on the footer element from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
The HTML <footer> Element represents a footer for its nearest
sectioning content or sectioning root element (i.e, its nearest parent
<article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>,
<fieldset>, <figure>, <td>). A footer typically contains information
about the author of the section, copyright data or links to related
documents.
You may also consider using Structured Data, such as microdata, RDFa, and microformats.
http://neilpie.co.uk/2011/12/13/html5-quote-attribution/
For example, use
<small class="author">Napoleon Bonaparte<small>
HTML 5 documentation says, "Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements."
My preference and it validates...
<!doctype html>
<html lang="en">
<head><title>Blockquote Test</title></head>
<body>
<div style="width:300px;border:1px solid #cecece; padding:10px;">
<blockquote cite="URL">
In victory, you deserve Champagne, in defeat, you need it.
</blockquote>
<div class="credit" style="text-align:right;">
<cite>Napoleon Bonaparte</cite>
</div>
</div>
</body>
</html>
This can be covered by Bootstrap 4 <footer class="blockquote-footer"> element:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<blockquote class="blockquote">
<p>In the digital age, knowledge is our lifeblood. And documents are the DNA of knowledge.</p>
<footer class="blockquote-footer">Rick Thoman, CEO, <cite title="Xerox Corporation">Xerox</cite></footer>
</blockquote>
Related
My goal is to cite a blog post by using HTML microdata.
How can I improve the following markup for citations?
I am seeking improvements on the syntax and semantics, to produce a result that works well with HTML5 standards, renders well in current browsers, and parses well in search engines.
The bounty on this question is for expert advice and guidance. My research is turning up many opinions and snippets, so I'm seeking clear answers, complete samples, and canonical documentation.
This is my work in progress and I'm seeking advice on it's correctness:
Use <div class="citation"> to wrap everything.
Use <article> with itemscope and BlogPost to wrap the post info including its nested info.
Use <header> and <h1 itemprop="headline"> to wrap the post name link.
Use <cite> to wrap the post name.
Use <footer> to wrap the author info and blog info.
Use <address> to wrap the author link and name.
Use rel="author" to annotate the link to the author's name.
Use itemprop="isPartOf" to connect the post to the blog.
This is my work in progress HTML source:
<!-- Hello World authored by Alice posted on Bob's blog -->
<div class="citation">
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">
<a itemprop="url" href="…">
<cite itemprop="name">Hello World</cite>
</a>
</h1>
</header>
<footer>
authored by
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<address>
<a itemprop="url" rel="author" href="…">
<span itemprop="name">Alice</span>
</a>
</address>
</span>
posted on
<span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
<a itemprop="url" href="…">
<span itemprop="name">Bob's blog</span>
</a>
</span>
</footer>
</article>
</div>
Related notes thus far:
The <cite> tag W3 reference says the tag is "phrase level", so it works like an inline span, not a block div. But the <article> tag seems to benefit from using <h1>, <header>, <footer>. As best I can tell, the spec does not give a solution for citing an article by using <cite> to wrap <article>. Is there a solution to this or a workaround? (The work in progress fudges this by using <div class="citation">)
The <address> tag W3 reference says the content "The address element must not be used to represent arbitrary addresses, unless those addresses are in fact the relevant contact information." As best I can tell, the spec does not give a solution for marking the article's author's URL and name, as distinct from the article's contact info. Is there a solution for this or a workaround? (The work in progress fudges this by using <address> for the author's URL and name)
Please ask questions in the comments. I will update this post as I learn more.
If you’d ask me which markup to use for a list of links to blog posts (OP’s context), without seeing your example, I’d go with something like this:
<body itemscope itemtype="http://schema.org/WebPage">
<ul>
<li>
<cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name headline">Hello World</span>,
authored by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Alice</span></span>,
posted on <span itemprop="isPartOf" itemscope itemtype="http://schema.org/CreativeWork"><span itemprop="name">Bob’s blog</span></span>.
</cite>
</li>
<li>
<cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">…</cite>
</li>
</ul>
</body>
Using the sectioning content element article, like in your example, is certainly possible, although perhaps unusual (if I understand your use case correctly): As article is a sectioning content element, it creates an entry in the document outline, which may or may not be what you want for your case. (You can check the outline with the HTML5 Outliner, for example.)
Another indication that a sectioning content element might not be the best choice: Your article doesn’t contain any actual "main" content. Simply said, the main content of a sectioning content element could be determined by stripping its metadata: header, footer, and address elements. (This is not a explicitly specified, but it follows from the defintions in Sections.)
However, not having this content is not wrong. And one could easily imagine (and maybe you intend to do so anyway) that you’ll quote a snippet from the blog post (making this case similar to a search result entry), in which case you’d have:
<article>
<header></header>
<blockquote></blockquote> <!-- the non-metadata part of the article -->
<footer></footer>
</article>
I’ll further on assume that you want to use article.
Notes about your HTML5:
Semantically, the wrapping div is not needed. You could add the citation class to the article directly.
The header element is optional if it just contains a heading element (this element makes sense when your header consists of more than just a heading element). However, having it is not wrong, of course.
I’d prefer to include the a element in the cite element (similar to the fifth example in the spec).
The span element can only contain phrasing content, so address isn’t allowed as a child.
The address element must only be used if it contains contact information. So if this element is appropriate depends on what is available at the linked page: if it’s a contact form, yes; if it’s a list of authored blog posts, no.
The author link type might not be appropriate, as it’s defined to give information about the author of the article element. But, strictly speaking, you are the author. If the article would consist only of the blog post author’s actual content, using the author link type would be appropriate; but in your case, you are writing the content ("authored by", "posted on").
You might want to use the external link type for all external links.
Notes about your Microdata:
You can specify the Schema.org properties headline and name in the same itemprop (separated with space).
You might want to use Schema.org’s citation property on the article (which requires that you specify a parent type of CreativeWork or one of its child types; i.e., it could be WebPage or maybe even AboutPage in your case).
Taking your example, this would give:
<body itemscope itemtype="http://schema.org/WebPage">
<article itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting" class="citation">
<header>
<h1>
<cite itemprop="headline name"><a itemprop="url" href="…" rel="external">Hello World</a></cite>
</h1>
</header>
<footer>
authored by
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href="…" rel="external"><span itemprop="name">Alice</span></a>
</span>
posted on
<span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
<a itemprop="url" href="…" rel="external"><span itemprop="name">Bob’s blog</span></a>
</span>
</footer>
</article>
</body>
(All things considered, I still prefer the section-less variant.)
I'm trying to find the best way to code a search result page in HTML5.
Here's how I've done it.
<section>
<header>
<h2>Results for <kbd>this terms</kbd></h2>
</header>
<!-- list of results -->
<ol>
<!-- First result -->
<li>
<article>
<header>
<h3>
<cite>
This is a result
</cite>
</h3>
</header>
<blockquote cite="http://addressofthepage.ch/">
<p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>
<footer>
<p>Published <time datetime="2010-07-15T13:15:05-02:00">MMMM DDth, YYYY</time> at the <abbr title="Uniform Resource Locator">URL</abbr> http://addressofthepage.ch/</p>
</footer>
</blockquote>
</article>
</li>
<!-- Second result ... and so on -->
<li>...</li>
</ol>
</section>
The main questions are
<header> mentions the search terms. What is the best tag to use? <kbd>?
Is the <cite> tag related to the <blockquote> if it is positioned in the <header>?
Is not better to put the <cite> in blockquote > footer like <p>[...] at the URL <cite>http://addressofthepage.ch/</cite></p>
All this is also available on a Gist
is meant as a way to show keys. That's why many sites style that tag as a keyboard key. You're not showing keys, you're showing a search term. A <span> should be fine. Maybe add a class like <span class="search-term">.
Semantically speaking, no, it wouldn't be related as it's not a child.
The "correct" HTML for using cite and blockquote would be:
A quote here...
— Foo Bar
gist here of the HTML: https://gist.github.com/OscarGodson/5a3e87ce895b3af952de (stackoverflow appears to have issues rendering HTML when in code tags?!)
Notice the cite and footer tags. As per spec:
The blockquote element represents content that is quoted from another
source, optionally with a citation which must be within a footer or
cite element, and optionally with in-line changes such as annotations
and abbreviations. Content inside a blockquote other than citations
and in-line changes must be quoted from another source, whose address,
if it has one, may be cited in the cite attribute.
Source: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element
The main thing to remember, and coming from someone who's been doing this for a long, long time, semantics matter, but don't overthink it. Sure, the blockquote has some strict rules about how to properly use it, but browsers will handle whatever you give it fine. Do what makes sense for your app and that should be semantic enough 90% of the time as long as everything isn't a span and div. If you over analyze this stuff you'll spend more time deciding which tag to use instead of just getting stuff done ;)
Im writing a markup for :
Would it be correct to present every tweet like an article or its too short and I should use ul or something else?
<section>
<h1>Recent tweets</h1>
<article>
<p>I'm looking...</p>
<time>3 day ago</time>
</article>
<article>
<p>#mediatemple will ...</p>
<time>6 days ago</time>
</article>
<article>
<p>Corpora Business</p>
<time>10 days ago</time>
</article>
</section>
It really doesn't matter. The WHATWG is still pretty vague about it. My issue is with the h1. Is this the only thing on the page? Is the page title also 'Recent Tweets'? If so you're fine. But I get the sense this is like a plug-in on a larger page. If so, consider using a lower level tag, for semantic/accessibility reasons.
Yes, each microblogging entry should be an article, as it matches the definition:
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
You could list them in a ul/ (or, depending on the context, ol) too, if needed/appropriate:
<section>
<h1>Recent tweets</h1>
<ul>
<li><article>…</article></li>
<li><article>…</article></li>
<li><article>…</article></li>
</ul>
</section>
If you'd want to include metadata (like the author name), the footer element should be used. That's where your time element should be placed, too. If the author name would be linked to a profile where contacting the author is possible, the address element should be used (as it is associated with the article and not the whole page, which is another reason to use the article element for micro-blogging entries).
<article>
<p>…</p>
<footer>
<time>…</time>
</footer>
</article>
For example of a blog-post or article.
<article>
<h1>header<h1>
<time>09-02-2011</time>
<author>John</author>
My article....
</article>
The author tag doesn't exist though... So what is the commonly used HTML5 tag for authors?
Thanks.
(If there isn't, shouldn't there be one?)
Both rel="author" and <address> are designed for this exact purpose. Both are supported in HTML5. The spec tells us that rel="author" can be used on <link> <a>, and <area> elements. Google also recommends its usage. Combining use of <address> and rel="author" seems optimal. HTML5 best affords wrapping <article> headlines and bylines info in a <header> like so:
<article>
<header>
<h1 class="headline">Headline</h1>
<div class="byline">
<address class="author">By <a rel="author" href="/author/john-doe">John Doe</a></address>
on <time pubdate datetime="2011-08-28" title="August 28th, 2011">8/28/11</time>
</div>
</header>
<div class="article-content">
...
</div>
</article>
The pubdate attribute indicates that that is the published date.
The title attributes are optional flyovers.
The byline info can alternatively be wrapped in a <footer> within an <article>
If you want to add the hcard microformat, then I would do so like this:
<article>
<header>
<h1 class="headline">Headline</h1>
<div class="byline vcard">
<address class="author">By <a rel="author" class="url fn n" href="/author/john-doe">John Doe</a></address>
on <time pubdate datetime="2011-08-28" title="August 28th, 2011">on 8/28/11</time>
</div>
</header>
<div class="article-content">
...
</div>
</article>
HTML5 has an author link type:
John
The weakness here is that it needs to be on some sort of link, but if you have that there's a long discussion of alternatives here. If you don't have a link, then just use a class attribute, that's what it's for:
<span class="author">John</span>
According to the HTML5 spec, you probably want address.
The address element represents the contact information for its
nearest article or body element ancestor.
The spec further references address in respect to authors here
Under 4.4.4
Author information associated with an article element (q.v. the
address element) does not apply to nested article elements.
Under 4.4.9
Contact information for the author or editor of a section belongs in
an address element, possibly itself inside a footer.
All of which makes it seems that address is the best tag for this info.
That said, you could also give your address a rel or class of author.
<address class="author">Jason Gennaro</address>
Read more: http://dev.w3.org/html5/spec/sections.html#the-address-element
In HTML5 we can use some semantic labels that help organize the information regarding your type of content, but additional and related to the subject you can check schema.org. It is an initiative of Google, Bing and Yahoo that aims to help search engines to better understand websites through microdata attributes. Your post could look like this:
<article itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline">header</h1>
<time itemprop="dateCreated datePublished">09-02-2011</time>
<div itemprop="author publisher" itemscope itemtype="http://schema.org/Organization">
<p>
<img itemprop="image logo" src="..."/>
<span itemprop="name">John</span>
</p>
</div>
</header>
<section itemprop="articleBody" >
My article....
<img itemprop="image" src="..."/>
</section>
</article>
Google support for rel="author" is deprecated:
"Authorship markup is no longer supported in web search."
Use a Description List (Definition List in HTML 4.01) element.
From the HTML5 spec:
The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.
Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.
Authorship and other article meta information fits perfectly into this key:value pair structure:
who is the author
date the article published
site structure under which the article is organized (category/tag: string/arrays)
etc.
An opinionated example:
<article>
<header>
<h1>Article Title</h1>
<p class="subtitle">Subtitle</p>
<dl class="dateline">
<dt>Author:</dt>
<dd>Remy Schrader</dd>
<dt>All posts by author:</dt>
<dd>Link</dd>
<dt>Contact:</dt>
<dd><a mailto="remy#blog.net"><img src="email-sprite.png"></a></dd>
</dl>
</header>
<section class="content">
<!-- article content goes here -->
</section>
</article>
As you can see when using the <dl> element for article meta information, we are free to wrap <address>, <a> and even <img> tags in <dt> and/or <dd> tags according to the nature of the content and it's intended function.
The <dl>, <dt> and <dd> tags are free to do their job -- semantically -- conveying information about the parent <article>; <a>, <img> and <address> are similarly free to do their job -- again, semantically -- conveying information regarding where to find related content, non-verbal visual presentation, and contact details for authoritative parties, respectively.
You can use
<meta name="author" content="John Doe">
in the header as per the HTML5 specification.
If you were including contact details for the author, then the <address> tag is appropriate:
http://dev.w3.org/html5/spec-author-view/the-address-element.html#the-address-element
But if it’s literally just the author’s name, there isn’t a specific tag for that. HTML doesn’t include much related to people.
How about microdata:
<article>
<h1>header<h1>
<time>09-02-2011</time>
<div id="john" itemscope itemtype="http://microformats.org/profile/hcard">
<h2 itemprop="fn">
<span itemprop="n" itemscope>
<span itemprop="given-name">John</span>
</span>
</h2>
</div>
My article....
</article>
You may use meta tag for this purpose, as follows:
<head>
<meta name="author" content="red bot">
</head>
I thought this would be an easy enough thing to find online but it seems not. I'm trying to find out what would be considered the correct way to mark up a list of testimonials - quotes with authors - on a page.
e.g.
"This is what I think"
- My Name, My Company
I'd imagine the quote should go in a blockquote. I've also seen some use of cite to shown where a quote comes from but the HTML reference seems to show that this should be used to give the URL of a web page that the quote comes from, not the name of the person.
Does anyone have any suggestions for how this should be marked up?
The "old" way:
I might be chiming in very late, but I think the following is the correct way to mark up a testimonial:
<figure>
<blockquote>
"This is what I think"
</blockquote>
<footer>
— <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
</footer>
</figure>
Per the W3C spec:
...the citation is contained within the footer of a figure element, this groups and associates the information, about the quote, with the quote...
.
.
.
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence)...
Update:
As #MCTaylor17 has pointed out, the best practice has changed in regards to citing a quote. Here's the new spec (as of December 2017): https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element
Now the <cite> element is expected anywhere you would expect Phrasing Content. This means that it should go within a <p>, <blockquote>, etc.
Example 17 in the spec demonstrates using a <cite> within a <blockquote>:
<blockquote>"Money is the real cause of poverty,"
<footer>
<cite id="baseref">The Ragged-Trousered Philanthropists, page 89.</cite>
</footer>
</blockquote>
To apply this to your own quote:
<blockquote>
"This is what I think"
<footer>
— <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
</footer>
</blockquote>
You are correct in your assumption that a quote is supposed to go into a blockquote element and that the cite attribute should be used for the URI. Personally I handle the author of the quote with a separate div or p at the bottom of the quote like so:
<blockquote cite="http://a.uri.com/">
<p>This is a really insightful sentence.</p>
<p class="quoteCite">Darko Z</p>
</blockquote>
Then I just use CSS to make it look nice. Pretty basic. You might want to go look at Microformats.org as well and search around for ideas.
Hope this helps
EDIT: Its late and it slipped my mind but you could also use the cite element
<blockquote cite="http://a.uri.com/">
<p>This is a really insightful sentence.</p>
<cite>Darko Z</cite>
</blockquote>
but im not a 100% sure how well its supported, to be honest
EDIT 2: According to the HTML 5 draft, cite shoudn't be an author name so for future proofing you probably shouldn't use cite for that purpose.
Things changed. I think a proper structure in this century should look like:
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<cite title="Source Title">
Bill Gates
</cite>
</footer>
</blockquote>
You may be interested in using the hReview format--Google is rumored to support it, and it's pretty much applicable to your situation, depending on whether you're only interested in the appearance, or whether you want to facilitate machine readability as well.
Following the Mozilla Developer API this is the correct way to mark up a testimonial:
<figure>
<blockquote>
"This is my testimonial"
</blockquote>
<figcaption>
— <cite class="author">My Name</cite>, <cite class="company">My Company</cite>
</figcaption>
</figure>
Here are two solutions based on the HTML Living Standard:
<blockquote>
<p>This is what I think</p>
</blockquote>
<p>- My Name, My Company</p>
<figure>
<blockquote>
<p>This is what I think</p>
</blockquote>
<figcaption>My Name, My Company</figcaption>
</figure>
As Darko Z. says in the edit of his answer you should not use <cite> for the author's name. This is because, according to the spec today, <cite> is for marking up the title of a work, not for naming the author. In WHATWG's own words:
The cite element represents the title of a work... A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.
The spec also says, that "attribution for the quotation, if any, must be placed outside the blockquote element."
If you are asking how this should be marked up semantically, yes, use a block quote, and yes, the cite attribute is for URL's. As for presentation, you could use whatever you want and style it accordingly.
Visitors will never see the difference unless they look at the source code, and I can't imagine that it would affect SEO either.
HTML5 includes a <figcaption> tag. To whit:
<figure>
<blockquote cite="http://example.com/page">
Nevermore
</blockquote>
<figcaption>
The Raven
</figcaption>
</figure>
A lot of comments here suggesting to use the cite element for the name of the person who wrote the review.
The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work.
The Citation element
<!DOCTYPE html>
<blockquote>
<p>Quote
</blockquote>
<p>Author
would be the most correct.