diff --git a/curriculum/challenges/english/blocks/lecture-working-with-text-and-time-semantic-elements/672995c9e6f69436dbcccc79.md b/curriculum/challenges/english/blocks/lecture-working-with-text-and-time-semantic-elements/672995c9e6f69436dbcccc79.md index a0d89bf0cb5..55476190857 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-text-and-time-semantic-elements/672995c9e6f69436dbcccc79.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-text-and-time-semantic-elements/672995c9e6f69436dbcccc79.md @@ -5,22 +5,28 @@ challengeType: 19 dashedName: how-do-block-and-inline-quotes-work-in-html --- -# --description-- +# --interactive-- In HTML, quoted elements are used to distinguish quoted text from the surrounding content. This gives the quoted text a format that is easy to identify. You should use the block quotation element for representing a section quoted from another source. It's mainly used for extended quotations. If the source of the quote has an address, you can cite it with the `cite` attribute. The value of this attribute should be a valid URL. This is an example of a quote within a block quotation element: +:::interactive_editor + ```html
"Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"``` +::: + This element has a `cite` attribute. The value of the `cite` attribute is the URL of the source. While this attribute doesn't change the presentation of the block quote, it's very helpful for giving screen readers and search engines more information about the quote. In the browser, you'll see that the text is slightly indented. If you want to start and end the block quote with quotation marks, you may need to write them explicitly within the text. You can write the text directly within the block quotation element, like I just did, or wrap it within one or more paragraph elements. This is helpful when the text has multiple paragraphs, but you want to keep them within the same block quote. Here's an example with four paragraphs: +:::interactive_editor + ```html
``` +::: + All the paragraphs are contained within the same block quotation element, so they are part of the same quotation. You can see that the element has a `cite` attribute with the URL of the source. In the browser, you'll see that the four paragraphs are aligned relative to each other, but they are indented relative to their container. So far I've been using the `cite` attribute to attribute the source of the quotation, but the attribute doesn't really show the source to the user. It only works behind the scenes. If you want to attribute the source visually, you can add a citation element, `cite`, outside of the block quotation element. This is different from the `cite` attribute. The citation element is an HTML element that you can use to mark up the title of a referenced creative work like a book article, song, film, website, or research paper. Here's an example: +:::interactive_editor + ```htmlBuild your projects. Show them to your friends. Build projects for your friends.
@@ -30,12 +36,16 @@ If you want to start and end the block quote with quotation marks, you may need
@@ -45,6 +55,8 @@ If you want to attribute the source visually, you can add a citation element, `c
As Quincy Larson said, @@ -62,6 +76,8 @@ That's exactly what the inline quotation element is for. It's for short inline q
``` +::: + You can see a paragraph element that contains text. Part of the text is an inline quote, because it's within the inline quotation element. You can also add a `cite` attribute to attribute the source. This works exactly the same as it did with the block quotation element. There won't be any visual changes, but it will give screen readers and search engines more information about the quote.