Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Quotation marks can of course be added using your keyboard, but smarter quotes are available using the q element. Let's go ahead and a make a working copy of quotes.html and name that quotes-working.html, and I'll go ahead and open that in my text editor, and you can see I have a little bit of CSS up here at the top and I'll talk about that in a couple of minutes. And otherwise, we've some Lourem ispum down here in a couple paragraphs, bring this in smaller, and turn on wrapping, and we will go ahead and open this in the browser as well. So you'll notice here I've this q element right there, and over here in the browser you see we have these quote marks for it, and I can't even select it with my cursor, because it's not actually selectable. You see the cursor selection goes around it, but these are smarter quotes. You see we have the curly left quote and the curly right quote, and what's interesting here is if I come in here in the middle and I put another q around just this word here, it uses nested quote rules to use single quotes for that. So there is the 'quis' word and you see it's got single quotes and we've got the double quotes around the outside. How these quotes are presented is controlled by this stylesheet up here, and it's notable that if I didn't have the stylesheet up here, different browsers work in different ways. Firefox will use the smart curly quotes, Chrome and Safari and the other WebKit browsers will use straight quotes; different browsers do this in different ways. And so by specifying it in your CSS like this, then you can control how the quotes happen. So for example, if I come in here and this paragraph and I set the language to French, say and now when I reload this in the browser, you notice that my quotes are now French style quotes. I have the angle quotes around the outside and I've got the curly quotes around the inside, and I can actually control that inside of here. If I set the language to de for German, I save that and come over here and reload, you see now we have the low quote at the beginning and the high quote at the end, and they are also backwards of your American English, and we have the single version of that on the inside quotes. If I set it for British English, I say en-gb; you notice I've that defined up here. In Britain, they use single quotes for the outer quotes and double quotes for the inner quotes, and this is all controlled here in this CSS. You'll also notice I've a block quote element down here. Block quote as its name implies is a block level quote and it for quoting blocks of text. And most browsers will just indent that on both sides, some of them will also put them in italics, and again, you can control that behavior in CSS as well. So HTML5 has a lot of options for quotes, especially when combined with CSS. Both the Q element and the block quote element are available for in line and block oriented quotes respectively.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98339 Viewers
61 Video lessons · 85635 Viewers
71 Video lessons · 69576 Viewers
56 Video lessons · 101906 Viewers
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.