Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you read a magazine or newspaper, you will from time to time see offset quotes that are lifted out of the overall context of the page. These are sometimes called pull quotes and they are used to drag the reader's attention toward a particular quote in the text or to emphasize that this is a quote rather than just a regular part of the text. In HTML, we find the same type of elements in the blockquotes tag. When you build a web page, the blockquote element is used to indicate a quotation. It's usually used when you quote something off someone else's website or if you write an article that has a quote in it and you want to pull attention to it.
The blockquote is good for accessibility because it clearly separates a quote from the rest of the text, so that when you read the text, you can clearly either see or hear that this text does not belong in with the rest of the text in terms of who wrote it. And this is really important, because if you want to communicate that this is not what you wrote, this is what someone else wrote, you will use the blockquote. The SEO benefit of the blockquote is directly linked to this. Search engine rankings depend on a lot of different factors, two of which are the validity of your content and also the linking out to other sources.
So when you make a quote and you attribute it properly to the source, usually with a link attached to a name, then you tell the search engine, look, I am presenting you with proper content and here is where I got it from. So you are being transparent about it, and that's something that search engines like. Adding a blockquote to your text means to add the blockquote tag around some content. So I will go to my project site and open into my browser to find some content I want to wrap. And when I read it, I see that the fourth paragraph under Heading 2 looks like a quote, so I will just wrap this in the blockquote so you can see what happens.
I will open my file in Notepad and I will find the section I want to change.
It starts here with I daresay, so I'll just go and simply change the , which
and save it.
Now when I reload the page, you will see that the blockquote appears quite
differently from the rest of text, and here's something important.
The reason why it appears differently is because that's how I styled it, so if I
right-click on this content, select Inspect Element, and look at the styles in
the site here, you will see that I have a style called blockquote that controls
the display of this content.
, whichis the paragraph, to blockquote. Then I will end with the same thing
You will see that the font size is 1em, it's italicized, there is a bigger line-height, and there are more margins. Just like with the emphasized and the strongly emphasized content, the blockquote tag itself has nothing to do with how it's displayed. It's a semantic tag telling the browser what's going on with the content inside it. How you display that content varies depending on how you want to design it, and this is an important point. In the past, people tended to use the blockquote element to indent content. It was really used as an indentation function rather than a quote function.
This is not what it's for. The blockquote is for presenting block quotes, texts that are quoted either from a person, from within the text itself, or from a different source. If used correctly, the blockquote is a powerful tool telling the browser and the user that this content comes from elsewhere and is quoted. Combined with the right citation and a link to the originator, it can be an even more helpful tool both for the visitor in finding the original source, and you, in lending validity to your content.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.