HTML Blockquote Tag: Enhancing Webpage Quotes

Introduction

In HTML, we use the <blockquote> tag to display quotations on a webpage with the author's name or source. The tag is used as a block-level element and is displayed as a separate paragraph. In this lab, you'll learn how to create a blockquote using HTML <blockquote> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/quotes("`Quotations`") subgraph Lab Skills html/basic_elems -.-> lab-70714{{"`HTML Quoted Text Block`"}} html/head_elems -.-> lab-70714{{"`HTML Quoted Text Block`"}} html/text_head -.-> lab-70714{{"`HTML Quoted Text Block`"}} html/quotes -.-> lab-70714{{"`HTML Quoted Text Block`"}} end

Add the HTML structure

Create an HTML file named index.html and open it in a code editor.

Add the HTML structure as shown below:

<!doctype html>
<html>
  <head>
    <title>HTML Blockquote Tag</title>
  </head>
  <body>
    <h1>HTML Blockquote Tag</h1>

    <!-- Add the blockquote -->
  </body>
</html>

Add the Blockquote Tag

Add the blockquote tag to your HTML code using the following syntax:

<blockquote>
  Your quote comes here...
  <cite>- Author Name</cite>
</blockquote>

Note: The cite tag is added inside the blockquote tag to provide the name of the author or the source of the quotation.

Add CSS Styling

Add CSS styling to the blockquote tag using the following code snippet:

<style>
  blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    color: #555;
    padding: 5px 20px;
    border-left: 5px solid #ccc;
  }
</style>

Note: This code sets some basic styling to the blockquote tag. The border-left property adds a left border to the blockquote tag.

Add the quote you want to display in the web page replacing Your quote comes here....

Save the HTML file and open it in a web browser to see the blockquote displayed on the webpage.

Summary

In this lab, you learned about the <blockquote> tag to display a quote in a separate block on a web page. You also learned about the attributes that can be used with the tag and how to style it using CSS. With the blockquote tag, you can display quotes on your web page with ease!

HTML Quoted Text Block