MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Topic 3.2! 💬
Whenever you write a school essay, an English speech, or a history project, you often:
In HTML, we have dedicated Quotation and Citation Tags designed specifically for these situations. They help browsers, readers, and Google search understand who said what and where the information came from!
<blockquote>When you want to quote a long sentence or an entire paragraph from a speech, a book, or an external website, use the <blockquote> tag:
The browser automatically indents the entire block from the left and right margins with generous spacing. This makes the quoted text immediately stand out from regular paragraphs!
cite Attribute:
Inside <blockquote>, you can add a cite="https://..." attribute to specify the URL where the quote was taken from. It is invisible on screen, but search engines love it for source verification!<q>What if you just want to quote a short phrase inside a regular sentence? Use the <q> tag!
<q> Tag! ✨You do NOT need to type quotation marks (") on your keyboard!
The web browser automatically detects the <q> tag and inserts proper, stylish curly double quotation marks ("...") around your text.
⚠️ Beginner Mistake: Never type "..." yourself inside <q> tags, or the browser will show awkward double-double quotes like ""Be the change""!
<abbr> 💡In our daily studies, we use hundreds of short forms: ISRO, NASA, HTML, CPU, WHO, ATM.
The <abbr> (Abbreviation) tag allows you to write the short form while storing the complete full form inside the title attribute:
<cite> 📚When you mention the title of a creative work—such as a book, a poem, a movie, a song, a painting, or a scientific paper—wrap it inside the <cite> tag:
The browser automatically renders the title of the work in an elegant italic font.
<cite>:
The <cite> tag is meant for the Title of the Work (the book, movie, or song). It is NOT meant for the author's person name!
- ✅ Correct: <cite>Gitanjali</cite> by Rabindranath Tagore
- ❌ Wrong: Gitanjali by <cite>Rabindranath Tagore</cite><address> 📍The <address> element is used to supply contact details (author name, physical address, email, phone number, social media links) for the owner or author of the webpage:
<address> is automatically rendered in italics.<footer> at the bottom of a website.<bdo> (Bi-Directional Override) 🔄bdo stands for Bi-Directional Override. It is used to override the current text reading direction.
Most languages (like English and Hindi) are read Left-to-Right (dir="ltr"). Some languages (like Arabic and Urdu) are read Right-to-Left (dir="rtl").
You can use <bdo dir="rtl"> to flip English text completely backwards!
The browser displays:
It reads the letters backwards from right to left! It is a fun and powerful tool for multilingual websites.
| Tag | Tag Name | Browser Visual Effect | When to Use It |
|---|---|---|---|
<blockquote> | Block Quote | Indented block with left & right margins | Long quotes taken from another speech or document |
<q> | Inline Quote | Automatically adds double quotes ("...") | Short quotes embedded inside a regular sentence |
<abbr> | Abbreviation | Dotted underline + hover tooltip | Acronyms and short forms (ISRO, WHO, HTML) |
<cite> | Citation | Italic font style | Titles of books, poems, movies, or research papers |
<address> | Address | Italic font with semantic contact markup | Author or company contact details |
<bdo> | BDO | Flips text direction (LTR vs RTL) | Reversing text direction |
<q>:<p>Gandhi said, <q>"Truth is God."</q></p> (Shows: ""Truth is God."")<p>Gandhi said, <q>Truth is God.</q></p> (Shows: "Truth is God.")title Attribute in <abbr>:title="Full Form", the tooltip will not work! Always provide title.<cite> for a Person's Name:<cite> only for the book, song, or movie title, not the author's name.<blockquote> for long quotations; it automatically indents the text block.<q> for short inline quotes; the browser automatically adds "..." quotes.<abbr title="..."> to show full forms when users hover over acronyms.<cite> for creative work titles (books, songs, films); it renders in italics.<address> for author or organization contact information.<bdo dir="rtl"> to reverse text reading direction.Test your understanding with these multiple-choice questions:
<cite> tag used for?<address> element?index.html file.<body>, create an Inspiration & Tribute Card for Dr. APJ Abdul Kalam:<h1> heading: Tribute to Dr. A.P.J. Abdul Kalam.<abbr> tag for ISRO with its full form in the title attribute.<cite>Wings of Fire</cite>.<blockquote>.<q>.<address> tag with your name and school name.Ctrl + S) and view your tribute webpage live with Live Server! 🚀In the next lesson, we will continue your web development journey with HTML Entities, Symbols & Emojis (Text Formatting).
👉 Continue to Next Lesson: HTML Entities, Symbols & Emojis →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Text Formatting Elements | HTML Entities, Symbols & Emojis |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.