Show Notes:
Where we quote
- In testimonials for credibility and social proof.
- In blog comments for engagement.
- In "pull" quotes for style and highlighting.
- In articles to support our arguments.
The difficulty with semantic HTML
We have the <blockquote>, <q> and <cite> elements, but the specifications have changed over time and don’t entirely line up with our design patterns.
Michelle Barker's article I’ve Been Doing Blockquotes Wrong highlights how difficult HTML can be at times.
The official HTML specifications are with the Web Hypertext Application Technology Working Group (WHATWG). This tells us:
- Quote elements are for external sources only. Presumably to the page rather than the domain?
- The cite attribute is used to specify a URL source. This is invisible to humans and most screen readers.
- The visible cite element is for the title of a creative work only and should not be included in the quote element.
- A blockquote is a sectioning root. It marks a distinct part of the content, but not part of document's outline as with sectioning elements (such as aside, article, nav).
This means:
- We should not use quotation elements for (self quoting) pull quotes.
- We should not use cite elements for authors of quotes.
- The citation is orphaned from the quote. Not ideal accessibility.
It's hard to find consistent advice
Many expert sources have encouraged us to use blockquotes in ways that seem technically incorrect including platforms (code example).
-
Haydon Pickering suggests placing blockquotes and cites within <figure> and <figcaption> elements.
-
Adrian Roselli recommends against using figure as it's verbose for popular screen readers. However, his preferred approach breaks WHATWG rules as he uses cite within the blockquote and uses them for authors too.
-
The W3C design system uses a <footer> element to cite an author Unlike Adrian Roselli, they do not use the cite element because of the WHATWG specifications.
Design systems for local governments reveal many other variations. Probably due to changes in the original W3C documentation that was not carried forward to WHATWG. The W3C essentially defers to WHATWG's HTML Living Standard as the authoritative specification.
Our approach to the HTML
We don’t have the standing to influence specifications like Haydon Pickering, Adrian Roselli or Michelle Barker so we'll stick to WHATWG rules to be consistent from here on (until told otherwise).
Testimonials
The typical pattern is the external quote followed by the author's name sometimes with a link to their organisation and image of them (example).
For this we will use the W3C design systems approach of not using cite, but putting the author credentials in a footer element within the block quote.
If there is a URL we will add the invisible cite attribute.
If the testimonial contains a heading the markup would change depending on whether the heading was part of the original quote. If it was, we would add the heading as part of the quote.
If not, we'd use an <article> as below.
<article>
<h3>Review Title</h3>
<blockquote>
<p>The review content...</p>
<footer> — Reviewer Name</footer>
</blockquote>
</article>
Note: Google's review snippets can not be self-serving.
Comments (blog posts)
According to WHATWG
A blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Pull quotes
According to WHATWG
The aside element can be used for typographical effects like pull quotes or sidebars
Jeremy Keith set off debate in 2016 by asking Why do pull quotes exist on the web? It's a great question given it is a duplication of content that visually does not look impressive on small devices. It is also not easy to code with many employing JavaScript to achieve it.
Regular quotes
To keep things easier for both sighted and non-sighted users it seem to make sense to cite before the quote.
<p>In NAME's article/song/presentation
<cite>
<a href="https:/www.example/">NAME OF THE WORK
</a>
</cite>
s/he says:
</p>
<blockquote>
THE QUOTE
</blockquote>
<!-- or <q></q> if inline -->
Block or inline quotes?
Haydon Pickering points out that the term “block quotation” precedes the blockquote element. The Chicago Manual Of Style recommends block quotations are over 100 words. Some examples in the specification have very short quotes and so it remains unclear when (semantically) you should use one over the other.
Styling quotes
Please join us for part two where we look at adding styling with CSS (this is a video only episode).
Mentioned
Transcript
[00:00:06] Nathan Wrigley: Hello there and welcome to the No Script Show. This is the fourth in our series, looking at components that make up a website. Today we're looking at testimonials, block quotes, pull quotes, and the site elements and how these are most likely coded wrongly.
As with other episodes in this series, we'll be considering these from a technical design, accessibility, and SEO perspective, and we'll follow up this chat with a YouTube video looking at some coded examples. This time it is slightly different in that we will be focusing on the HT RL markup in this podcast, as there is a surprising amount to cover.
And CSS styling is what we'll cover in the follow up video only content. As always Joined by David Wamsley, who's over there? Hello, David? Hello? Hello? Nathan Wrigley. You're sporting a slightly different background.
[00:00:57] David Waumsley: Yes, I'm in London, usually I'm in India. but we're a bit closer. We were almost close actually.
Yeah. we nearly got to see each other. Yeah. It all happened in this time, but yes. anyway, let me move on to this. 'cause you were the one who really set me off on doing this topic a bit earlier. We would've done it anyway because you shared with me a video by Kevin Powell, called is HTML the Hardest Language, and he was demonstrating with his, followers and everything, how.
Everyone, he gave them a card component to code up and everybody did it in slightly different ways, which really asked you that's what is the semantic way. And this really reminded me of a post by or series by Hayden Pickering where he is looking at various, has HTML elements and. It really highlights the fact that there's a lot of confusion on how to do HTML and it really caught my attention, the block quote one that he did and the site element.
So it set me off experimenting about, how, 'cause we're trying to set up our own, if you like, design system and have a consistent way of marking things up. And yeah. So I went on a bit of a journey. Yeah, sorry
[00:02:13] Nathan Wrigley: about that. All of that. With me DMing you on blue sky and set you off on a complete, laundry list of things to cover.
So apologies about that, but hopefully there's some useful content in here. Should we switch to your screen? Do you wanna do that one? Yeah, let's do that. Okay. We've
[00:02:28] David Waumsley: got a lot of notes to get through actually here. I'd be largely reading these out I think, 'cause the research has been done. Yep. So let's talk about, so we called this one.
don't quote us on this, or I should mention as well. I'll put a little note. It actually is already in there that another reason for doing this is that the state of HTML 2025 is still open as a survey. I, haven't done it myself, but I will. No, I
[00:02:54] Nathan Wrigley: took a quick look at it. I didn't fill it out, but I will come back and fill it out.
It's not a long enterprise, it's fairly quick, but, obviously somebody somewhere needs to know where we're all at. and yeah. Useful to fill out. I would've thought so. We'll provide the link in the show notes,
[00:03:09] David Waumsley: Yeah, it's down there in my. So for those who are on YouTube, you will be able to follow along with our notes.
So I put first where we quote, where we use quotes. So in testimonials for credibility and social proof, we use, in blog comments for engagement, effectively where user submissions are a quote Yeah. Of some form. Yep. in pull quotes for style and highlighting. I'm not sure. do you know what?
When I say pull quotes, does that mean
[00:03:40] Nathan Wrigley: anything to you? Do you
[00:03:41] David Waumsley: have an expectation?
[00:03:42] Nathan Wrigley: No, I'm, basically imagining the, things that you've described previously. So to me, a pull quote is a block quote. I, genuinely wouldn't have known what the difference was.
[00:03:53] David Waumsley: Yeah, it's all, it's just interesting. We'll, move on to this one.
'cause there's an article by Andy Clark where his interpretation of a poll quote is different to what I think, I'm talking about here. But generally it's a self quote, I think, where we put it. Usually in an article where there's this big thing that gives you a, some styling, it gives you some highlight of text that's to come.
So it's a, okay. It's duplicate content. and we use it in articles, for, oh, I've made a. To support our arguments. Okay. often,
[00:04:25] Nathan Wrigley: it's fairly widely used throughout the web. I think the, place that I see it most is, comments on blogs and things like that are out of fashion, aren't they these days.
But I see it all over on testimonials. you, somehow want to, I don't know, link the words to the image or the person's name or something. And in order to do that, you adopt this different style and maybe some iconography around it. And,
[00:04:49] David Waumsley: yeah. Yeah, exactly. this is the interesting bit really of what we're gonna get stuck on, the difficulties with Symantec HTML.
So we have the block quote element, the Q element for inline quotations. We have the site element, which Haydon Pickering says really ought to be called citation rather than site, but, But the thing is with this, the specifications have changed over time and they don't entirely line up with the design patterns that we use.
And after reading Haydon Pickering's article, I also stumbled across Michelle Barker's article, which says what exactly what I experienced. I've been doing block quotes wrong. Through, listening to or reading his article, she realized that, and I've got it up over here. And there was quite a lot of, and this has helped me look into this more because there's a lot of comments here on that by some really.
quite clever people. She's a very clever person as well. She writes some of the M dms, we've mentioned her before. Yeah. Articles and, that was
[00:05:54] Nathan Wrigley: me saying comments or dad and Yeah. No, there's a load here. I, on this
[00:05:58] David Waumsley: topic. I think it's particularly popular. Yeah. and also she's actually using eleventy as well on that.
Oh, interesting. Add in our comments myself. Yeah. yeah, so that was quite interesting. But the, I think the, a lot of the changes due to the fact that the official HCML specifications are with the web hypertext, applications, technology working group. Easy for you to say no. What w what? What wg, I think, 'cause it's, the working group, so we'll call it what, I dunno how people say it, but we'll say what working group.
I think that's be easy. So what they tell us through their documentation, which I've got over here, is go back that quote elements are for external sources. Oh, so we should only be, so if we're using those, if we're using a block quote, it should be for someone else's comment, not our own, but presumably, because it's not spelt out.
This is to the page, at the page level rather than the domain level. But. I'm not sure that's unclear. Okay. the site attribute, attribute being the site equals quotation mark should be where you put a URL to that source of the quote. Okay. Okay. And it's invisible to humans and most screen readers, but the visible site element, the, one, the actual tag itself is for the title of Creative Works only.
and it, and there's another element of this, that the site element shouldn't be included in the quote element, so it shouldn't be within the tags of our block quote.
[00:07:44] Nathan Wrigley: So there's a lot more depth to this than I imagined. That's yes. rules upon rules, not rules as such recommendations, But nevertheless, I did not know that there was that level of granularity, so that's fascinating.
[00:07:57] David Waumsley: It is, and it's also quite confusing as well because it's some of this comes in, so this idea that it's only for the title of Creative Works only rather than an author comes only after HTML five. I know that's been around for a long time, so there has been changes over time and it's.
Disputed. I, think Jeremy Keith is one person who was trying to argue against that at the time. anyway, I'm going into things that we don't need to, and the last point that I got here is that the block quote is a section in route, so it marks a distinct. Of content, but is not part of the documents outlined in the way that section elements such as side or article or Nava.
So with screen readers, they will be able to look at different makeup of a page or something by looking to those section elements, but it is still something distinct. What I wrote down here is that it means that we should not use quotation elements for self quoting, pull quotes, and that's what I generally think.
A pull quote is something where you are referencing something within your own document to stylize it and say, here's a bit of a teaser of what's to come. So we shouldn't be using, the block quote tag really for our pulled quotes. we shouldn't use the site element for authors of quotes.
And the last point on is that citations are, or orphaned from the quote, which is not ideal for accessibility because again, it's Haydon Pickering, it picks up on how uncomfortable that is because it's a little bit, I think he does make this example, but it's a little bit like how, if you. Have on a blog archive page, these read more buttons that you have, which are separate to, or links separate to the description, then it's very difficult.
It's not, It's not, yeah, it's outta context with it. So I think that's a similar thing happening, but really that's what we're encouraged to do if we go with What wg
[00:10:00] Nathan Wrigley: have you managed to memorize that in your head now, such that if you were just writing out HTML and you were trying to deploy citations, block quotes and so on, have you got that cascade of things figured out or would you have to go back to that and say, which example does it fit into here?
I think I've got it sorted
[00:10:19] David Waumsley: out now. Yeah. But that's what I'm trying to do for this one. We can have something is, is the no script shows way of doing it, I think. But this is the next thing. I've put it on my notes here that, this is where it gets really difficult 'cause it's hard to find consistent advice.
So we have. Many expert sources and I've only actually put one in here and that is, lemme just go back here, is the HTML five doctor, which is supposed to be the place to really get, to learn all your stuff. it says different things Wow. To watch. Yeah. so that becomes a problem.
And we also have, as well, with WordPress as well, it is quite interesting because if we go to. press.com and it looks at it's, quote block there. So it works against it as well, because what it literally says is that you can use this, it will add in your citation will be the author, and there's nothing on that.
and the citation was in with the block quote. So technically according to what wg Yeah, what WordPress does on there. And there's a code example on here. it calls no problems for. and this will make sense for, there's an article here looking up the Block quotes by Amber Hines, who's a big accessibility person in WordPress.
And she sees no issue with how that does it. He thinks she's doing it semantic, and I think you'll understand why she doesn't see an issue with this one. Yeah, maybe she's not looked into it, but let's have a look. if we go here. So there is that side of it. So technically these. Experts there, and this platform is wrong according to the present specifications.
But also when we start to get to experts like Haydon Pickering in his article, what he suggests is a get around the fact with, lemme just go to his posts for those who can see, that one. Yeah. Yeah. So in terms of accessibility as a problem with the idea that you would put the citation. Separate to the quote, because it's not programably linked together.
Yep. Yep. So his way around this is to put everything in a figure. So you have a figure. Then a block quote, and then you have a fig caption, which contains your citation within there. Citations
[00:12:42] Nathan Wrigley: in there.
[00:12:43] David Waumsley: Yeah. So that's his approach. However, then we come to Adrian Ly, who's one of the big players when it comes to accessibility, who's gone and tested all the different ways that a screen reader will read these different ways of doing it.
Oh, interesting. Okay. Yep. Yeah. So his own approach is to not do that. What he recommends is because it's so verbose for screen readers, all the popular ones to read out, fig not to do that. Yeah. So he goes with block quote, and then he puts in a footer where he puts his citation and then closes the, block quote.
Yeah. So that's his way as an accessibility expert who doesn't, let me say that all of these people say this is how they've dealt with the situation. Not necessarily this is the way to do it. I don't think anybody feels confident in what rules we have at the moment, so, anyway, you could see a contradiction there.
So you can go two different routes on that. And let's see, gosh, what, it's really surprising. Open a hole. Disagree. I know.
[00:13:46] Nathan Wrigley: Isn't as fascinating. Yeah,
[00:13:47] David Waumsley: I think attention's going to H-D-M-L-A lot more at the moment. it's been on CSS, but yeah. But I think we need to get these fundamentals right. And finally, the one that I think we are effectively going to use is the W three C design system.
So if I just move on to this one, so it's similar to Adrian ly in the sense that there's no fig with this one. It's put in a block quote. Then it's adding a footer. Yeah. 'cause this is a section in route. It's perfectly fine to add in a footer element and, ending it with a block quote. So if you like, but what they, and they point out in the considerations.
They point out the fact that, and this is really where it all goes wrong, there's been some leniency when HTML was decided by the W three C itself on their own documentation. But since. I think 2019, this has gone to the Living Standards Working Group, which is the what wg. And not everything that has been changed there has transferred over.
So our official documentations may not be up to speed, if you like. This is where we get some of the confusion.
[00:14:59] Nathan Wrigley: Yeah, I was gonna say officially then. It's really confusing officially.
[00:15:03] David Waumsley: It's confusing. Officially. It's confusing. Yeah. Yeah. When you've got brilliant experts like that, but I think. I think the way for us to deal with it.
and again, I went and had a little search around just what people did well, interestingly enough to search around what some of the people say they do and what they actually do as well doesn't always match. So they've changed. Okay. They've changed over time. Like we, we will be changing over time and when we go and look round, there's not much in the way of the big design systems out there for this specifically, but there is a lot of sort of local government, Design systems out there. So if you go and look at them again, they're all different variations. Gosh. Yeah. It's a, spaghetti, isn't it? It is. And yeah, I, just think it is due to this. And in fact, there's a point that was made on Michelle Barker's, I've been doing. Block quotes wrong. I think the last quote on here.
Yes. This is by Amelia Bellamy Rhodes, and I know of her, she's on the working group for SVGs, I think so I've seen her name for this one, and that's it. How she's spelling it out how the three C spec was modified. If you allow two. Be a little bit more flexible to do what Jeremy Keith, I think years back wanted to do to be able to contain authors.
So when I was pointing out that sort of WordPresses basically got it wrong in terms of the official spec, you can understand why it's like that? Yeah, because, We were generally leaning towards that, although I think, it would be better if it did have a little footer to separate the citation within the block quote.
But, so that's really, I think, what we'll do, I think as we don't have the kind of standing and influence like people like Adrian Rosalli, Haydon Pickering, or Michelle Barker. I think we'll try and stick to the what WG rules. Okay. Just to get some consistency. Yeah.
[00:16:59] Nathan Wrigley: Yeah.
[00:16:59] David Waumsley: And, until we're told otherwise.
[00:17:02] Nathan Wrigley: Okay. Yeah. Until they've finished that bun fight and, sorted it out, frankly. Yeah. Okay. Testimonials now then, is it?
[00:17:10] David Waumsley: Yeah. So, rationalizing the code, so this took me some time to kinda work out, so exactly how we're laying things out. So a typical pattern, and I've got an example up here. On that sort of little demo site I made first, which we'll use at some point.
A typical pattern for a testimonial might be something where we have what someone said about us, maybe a picture of the author and their name, and maybe a link to their organization. Or one of the other. and that's a sort of common pattern here, That would be straightforward. What we're doing here with something like that is that we'd be putting it all in a block quote.
Yep. And using W three Cs and putting all of the stuff where their names, their image, their where they work, or their company or their t yeah. We would all go in that footer within a block quote, so that would be fine. there is the circumstance where. Sometimes you see with these, this pattern, you will see a header as well as the quote.
sometimes, there's just a sort of summary of what the quotation
[00:18:20] Nathan Wrigley: says. Oh, interesting. I'm trying to remember when I've seen that, but I, can't conjure it up. Okay.
[00:18:26] David Waumsley: I think sometimes if you're taking from a source, that does that some, reviews do allow you to put the title and then like a name, like a too long
[00:18:36] Nathan Wrigley: didn't read kind of thing where you summarize the quote.
Is that what you mean? Yeah. You might just, Yeah. Like, stunning.
[00:18:43] David Waumsley: And
[00:18:43] Nathan Wrigley: then the quote, which is, yeah. Okay.
[00:18:45] David Waumsley: Got it. they might just pull out the main, because we know people read titles and some of the review, things are set up, which is another point actually I should mention really. 'cause, just thinking about the SEO perspective on this one, when it comes to testimonials, we can't really use, that review markup, the rich.
Text or the schema for that one because it can't be self-serving, so we can't say something. You can't use other people's quotes about us. yeah. To self serve. So for testimonials that, that doesn't become an issue. Anyway, thi this did make me think about that pattern. So if it was a pattern where, the.
Header was part of the quote that was submitted by the user. Then I would just put a header three probably that would be the likely one, and then it would be the block quote. Okay. In the block quote, itself. Got it. but if it was one where we decided to sum up their block quote, then what I would do is wrap the whole thing in an article.
Okay. Yeah. Again, this is another one where it's another Hayden Pickering, topic where he talks about article, and I think it's from him that I got this idea. 'cause when I thought of article as a tag, I tended to think
[00:20:04] Nathan Wrigley: of just blog posts. Yeah. that's where my head goes. It, doesn't, in my head, it doesn't land as a container for more broad stuff, even though I know it should be.
[00:20:13] David Waumsley: Yeah, and I think if we look at the actual spec for it, I won't pull it up here at the moment, but it actually says it's any sort of standalone element that you could use on its own. Yeah. So an article would be right for this, and I think it was Haydon Pickering or something. It said, is, and I think this is that way of looking at it, and now I think of it as like an article of clothing.
[00:20:33] Nathan Wrigley: Oh, interesting. Okay. You do you know what
[00:20:35] David Waumsley: I mean? It's like a pair of gloves or something. They stand aside, but they're not the entire thing. And, because we can use, yeah, because I think it's any sort of standalone. So I think it would be suitable. So that would be the semantic way. And I've put the code here, sorry for those who are just listening, but basically it would be the surrounding, wrapper, if you like, would be the article tag within that, then I'd put our header, Because we're making that up ourselves in that would be the block quote with its footer, with the reviewer's name, and then it would close with the block quote, and then finally the article wrapper so that you got article
[00:21:11] Nathan Wrigley: with. Children of a heading and a block quote. And then inside the block quote, you've got your content paragraph, footer and so on.
Interesting. Okay. yeah.
[00:21:22] David Waumsley: I was wondering about comments as well. not that we've got them, but we're gonna have to get like blog
[00:21:26] Nathan Wrigley: posts, that kind of thing. Yeah. So
[00:21:28] David Waumsley: when we're inviting people to use a generated what, where they would fit in, and I think the official specification tells us this, what we can use, and that is a blog entry on a, this is.
Quoting from them, a blog entry on a site that accepts user submitted comments could be represented as could, sorry, could represent the comments as article elements nested within the article element for the blog entry. So I wouldn't be using blog quotes for that kind of quoting, and we would just stick them in nested articles.
Articles.
[00:22:05] Nathan Wrigley: So you'd have articles nested within articles. Within, an article.
[00:22:10] David Waumsley: Okay. Yeah. So I think that's how, it is interesting because I think later we'll try and put some form of commenting system on our own, site. So I think, it's interesting to see,
[00:22:22] Nathan Wrigley: yeah. Especially given the user submitted nature of things.
obviously with modern CMSs, you've got the capacity to, put things into a pending state, so they don't make it there. But if you're worried about SEO and things like that, then. User submitted content might really run against what you're trying to do, or I don't know, mention your commercial rivals with links and things like that, so there may be something there.
Yeah,
[00:22:46] David Waumsley: I did look, Michelle Barkers, I, because I was there, I thought I'd poke around at the code there and I noticed that her articles, which obviously she said to create the whole HTML for that one, we put in a block quote, which is seems appropriate. For it. but when you think about it, people just shove all sorts of stuff in there, which isn't necessarily a quote that might be quoting somebody else.
It wouldn't fit the quote. So I actually think, and, when I looked at examples of at least classic WordPress sites that I've seen, I think most people have marked it up in the way that, what WG would suggested by using the Raptors articles in the, okay. Okay. So I think that's what we would do in that case.
So pull quotes, Again, we've, what WG has given us, and I'm quoting here, is the aside element can be used for typographical effects, pull quotes or sidebars. So it literally mentions where we can use the aside. so as a sidebar,
[00:23:48] Nathan Wrigley: the aside being a side.
[00:23:51] David Waumsley: because they've spec specified pull quotes.
So if you like Paul quote, is that duplicate of content that we put on somewhere in style separately? It's an aside to our main article.
[00:24:02] Nathan Wrigley: Oh, that's pull quote. Is it? 'cause at the beginning we talked about, so a pull quote is where you. You literally are pulling something out of the article. It's duplicate from an SEO point of view.
Yes. But you wanna highlight it. So it's like when you're reading a newspaper sometimes, or a magazine, sometimes they'll just, I, don't know. It's eye catching, isn't it? They'll throw that, that one sentence, which kind of encapsulates the next two paragraphs. Yes. As a, as an easy way. It's almost like a heading, it's navigates you into what's coming or what has just been said.
Yes. Okay. Okay. I didn't know that.
[00:24:34] David Waumsley: Yeah. So block quote isn't appropriate. No. that's what people have used of course, because of the confusion. But an aside seems to be the thing to do. no one really knows, but that seems the most. But there is an interesting debate that goes back.
Jeremy Keefe set one off in 2016, got tons and tons of comments, asking the question, why do Paul quotes exist on the web? And it is a great question given that if your screen reader. And in his own post, it gives that example, if he was to read it with a screen reader, it's terrible because it's got this pull quote out and then it repeats the next thing you know.
Yeah. You're just hearing this constant re repetition. Yeah. With no visual clues to know what the heck is going on. Why is this article repeating itself? So there's that difficulty. There's the difficulty. Some people, although I don't think duplicate content is an issue for SEO, but some people have been conscious about that, but also, you do all this work.
To pull quotes. Generally they are pulling slightly out of the main body of content. You mean physically? they look, yeah. Physically. They usually pull to one side left. Yeah, Do that to the main content. Yeah. If you're
[00:25:44] Nathan Wrigley: a left to right reader, then it's slightly to the right.
[00:25:47] David Waumsley: Yeah. Yeah. And they're really, difficult to code.
We'll move on to that when we talk about CSS, but, a lot of people have had to employ JavaScript in order to make this thing that's outta the main body. Move to where you want it to do, and then it doesn't look all that impressive necessarily when you get down to smaller devices where you can't see that it's pulling out you, you've literally only got the room for your text.
Yeah. So yeah, so there is that. and, what did I put here for regular quotes? Okay. So our format, in. unless you disagree on any of these ones, I think to keep things easier for cited and non-sighted users, not non-sighted, as I've written here,
it, seems, I'll put an s in there later to make sense to cite before the quote. So I think when we're doing our articles, generally it's better to you'll have your paragraph that will be running, you'll put the name of the order. Author and then, reference their article, song, presentation, whatever it is, as the title of the work, with a link to that one, and that will be in the citation.
And then. he or she says, and then it will just be in the block quote doing it that way. So if you are put in as, I think most people when they were thinking about HTML spec, were thinking when you use a block quote, you're quoting generally, you might introduce it first. Yeah. Before you do the block quote.
So in. General, general blog posts. That would be my format. I think so
[00:27:26] Nathan Wrigley: I guess it's almost serving as a little signpost of Okay. This is why it's now, okay. It is out of the flow of the normal text, but here's a, flag saying this is what it is. This is, as you've written there, the name of the work.
It's like a mini title. It's alerting you to here's something different. Yes. Then the quote comes afterwards where if you had it the other way around. the site. At the end of it, after the block quote, then it would just go straight into that. It would feel like an ordinary part of text and then the name of the title would randomly come and you wouldn't know where that started or stopped.
Okay. Yeah. That's interesting. And I think that's presentation. you often see it. Differently, don't you? You'd see the, you'd see the quote first encapsulated in some container, which is, I don't know, a rectangle or something to differentiate it. Different color background or something. Then the person, let's go for person's name.
no. The name of the work might be at the bottom. In an old font or something like that. And, you can capture that 'cause you can see it all. But if you're doing it. With a screen reader that's all back to front. 'cause you need that indication at the beginning. Okay. Yeah.
[00:28:35] David Waumsley: Yeah. I think the pattern's different and I think most of the haste, this is my understanding of it, is that the, when writing out the spec there, they've generally been thinking of written text and articles where you might.
you'll introduce as part of your copy who the author and what work it's citing before you move to the block quote where it all gets thrown out. And we get into trouble is when we start to think about this design pattern of the testimonial, where we tend to put the quote up front. yeah.
And then the author after, and it doesn't work anyway, I think we've solved that. Yeah, there is, another interesting point again from Hayden Pickering on his article, and that is, when you use the, we've been talking about block quote all the time, but there's the, there's the Q tag, the inline, quote and.
For those reading the notes here, I will correct these later 'cause it says it's okay. yeah. He points out the, fact that, the term block quotation precedes the block quote element ever existing in HTML and the Chicago Manual of Style recommends that a block quotation is over a hundred words. There are some examples as he points out in the specifications, which have very short quotes and they use block quotes. So it still remains quite unclear when at least semantically you should be using block quote over the queue. Interesting.
[00:30:03] Nathan Wrigley: Yeah,
[00:30:04] David Waumsley: it's a visual thing in the end, doesn't it?
Ends up you say block quote because it's basically. Style wise, it's taken up the whole block where it's not in line. But, semantically, I don't know. There isn't any clear guidance on
[00:30:16] Nathan Wrigley: No.
[00:30:17] David Waumsley: Which you should be using.
[00:30:18] Nathan Wrigley: No. Interesting that, we reference things like the Chicago Manual of style. I love that.
that's Hayden. No, but just the fact that there. A Chicago manual of style. I think I need that in my life. I don't have enough style basically, and it's got to be over a hundred words. Oh, fascinating. Okay.
[00:30:38] David Waumsley: Alright. Yeah, so I, anyway, I guess that's this, our aim of our show was to try and simplify things and I think I've just made things as about as complex as they, no, you highlighted
[00:30:49] Nathan Wrigley: complexity that all of us have ignored, basically.
we, I think it would've been fair to say that most of that, nobody's pricing off the. The lid to appear inside that jar just because you rely on, especially in the WordPress world, you rely on a block increasingly to just take this work for you. Yes, you put a block, quote, block in, and you assume it's doing everything correctly, whereas in fact, perhaps you need to roll your own or certainly be thinking about the context in which you're using it, be it a block quote, a quote, a testimonial, a citation, whatever it may, be.
There's a lot more to it, honestly. Way more to that than I thought, so that's fascinating.
[00:31:26] David Waumsley: Yeah. And I would be really interested, if anybody does have any thoughts or, they spot anything that I've completely missed on this or want to change our mind, then I'd love to hear on that one. But I think what we've decided to do on this as a design system sort to make sense 'cause we're not, breaking any rules.
I think the interesting thing is about the site element. It really, it doesn't seem to have any purpose. It's there for semantics. Yeah. But it's not read out by screen readers. Certainly, when we're using that as the attribute, nobody sees it. So what's it? Therefore it's, the, full use of this isn't in place.
But perhaps one day if we all do the right thing, maybe it might be useful.
[00:32:11] Nathan Wrigley: Is there any more on that, page that you want to go? No. You just got some links there at the bottom, styling quotes, part two and what have you. So are we. Are we a wrap? Wrap? Wrap? It's a wrap. Wrap as they said.
Yeah. We'll just move
[00:32:23] David Waumsley: on. And this will be quick, I think, just part two because we've talked all about the HTML and said, we'll just quickly talk about how we might. Go about styling some of these.
[00:32:33] Nathan Wrigley: Okay, so in which case, if you want to follow along with the show notes that David's been displaying there, including typographical corrections, you can go and find those as well.
Then head to no script show. And then this episode is 24 so slash 24, the numerals two four. Go and check that out. And then there will be a corresponding episode in which, this is demonstrated. David gives it a bash, and that is no script show slash learn. 15 1 5. So those two things will correspond and overlap.
So we will, see you then. So shall I, shall I, hit stop on this recording and yeah, we'll go into the next.
[00:33:16] David Waumsley: Alright, see you
[00:33:16] Nathan Wrigley: soon.
[00:33:17] David Waumsley: Thanks Nathan. Bye.