In this lesson, we will explore two important HTML elements used for displaying quoted text and preformatted text. Understanding how to use these elements will help you present text content more effectively on your web pages.
Blockquotes
What is a Blockquote?
A blockquote is used to indicate that the enclosed text is an extended quotation. It is typically displayed as an indented block of text.
Syntax
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockquote Example</title>
</head>
<body>
<h1>Famous Quote</h1>
<blockquote>
"The only limit to our realization of tomorrow is our doubts of today."
- Franklin D. Roosevelt
</blockquote>
</body>
</html>Explanation
- The
<blockquote>tag is used to define a block of text that is a quotation. - The browser typically renders this text with an indentation to distinguish it from the rest of the content.
Practical Exercise
Task: Create an HTML page that includes a blockquote from your favorite author.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Favorite Quote</title>
</head>
<body>
<h1>Favorite Quote</h1>
<blockquote>
"It is our choices, Harry, that show what we truly are, far more than our abilities."
- J.K. Rowling
</blockquote>
</body>
</html>Preformatted Text
What is Preformatted Text?
Preformatted text is used to display text exactly as it is written in the HTML code, preserving spaces, line breaks, and other whitespace characters.
Syntax
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preformatted Text Example</title>
</head>
<body>
<h1>Code Snippet</h1>
<pre>
function greet() {
console.log("Hello, World!");
}
greet();
</pre>
</body>
</html>Explanation
- The
<pre>tag is used to define preformatted text. - The text inside this tag is displayed in a fixed-width font, and whitespace is preserved.
Practical Exercise
Task: Create an HTML page that includes a preformatted text block showing a simple HTML structure.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Structure</title>
</head>
<body>
<h1>HTML Structure</h1>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</body>
</html>Summary
In this lesson, we covered two important HTML elements:
- Blockquotes (
<blockquote>): Used to display extended quotations with indentation. - Preformatted Text (
<pre>): Used to display text exactly as it is written, preserving whitespace and line breaks.
Understanding and using these elements will help you present text content more effectively on your web pages. In the next lesson, we will delve into creating hyperlinks in HTML.
HTML Course
Module 1: Introduction to HTML
- What is HTML?
- Setting Up Your Environment
- Basic HTML Structure
- HTML Tags and Elements
- Creating Your First HTML Page
Module 2: HTML Text Formatting
- Headings and Paragraphs
- Text Formatting Tags
- Lists: Ordered and Unordered
- Blockquotes and Preformatted Text
Module 3: HTML Links and Media
Module 4: HTML Tables
Module 5: HTML Forms
- Creating a Basic Form
- Form Elements: Input, Textarea, and Select
- Form Attributes and Validation
- Submitting Forms