HTML Formatting Tags and Quotations: Episode 5 Complete Tutorial (Updated June 2026) (Updated June 2026)

Episode 5 of our HTML series is where your web pages start to communicate with emphasis, clarity, and visual hierarchy. HTML formatting tags let you bold important words, italicize titles, strike through outdated information, highlight key phrases, and mark deleted or inserted text — all with semantic meaning baked in. Quotation elements like blockquote, q, and cite help you properly attribute quoted content, which matters both for UX and for SEO. Here's the thing — NASSCOM and Deloitte have forecast that India needs 1.25 million AI and digital tech professionals by 2027. Web development is central to that demand, and being able to write clean, semantically correct HTML is what professional employers look for beyond just functional code. What most people don't realize is that HTML has two categories of formatting tags: semantic tags that carry meaning (strong means important, em means stressed emphasis), and presentational tags that only affect visual style (b, i). Choosing the right one matters for accessibility, SEO, and code quality. In Episode 5, I walk you through both categories, explain when to use which tag, and cover the quotation elements that most beginners skip entirely. Let's get into it.

HTML Text Formatting Tags: The Complete List Explained

HTML provides a rich set of formatting tags that let you control how text appears and what meaning it carries. The bold tag (b) makes text visually bold with no semantic meaning attached. The strong tag wraps text that is semantically important — screen readers may add vocal emphasis to strongly-tagged content. The italic tag (i) makes text visually italic and is used for technical terms, foreign phrases, or titles. The em (emphasis) tag marks text with stressed emphasis — semantically meaningful. The underline tag (u) underlines text, though it's used sparingly since users associate underlined text with hyperlinks. The mark tag highlights text with a yellow background by default, used to draw attention to a specific phrase. The del tag strikes through text to indicate deleted content (like a price revision), while ins marks inserted or replacement text. The small tag renders text at a smaller font size, often used for fine print or copyright notices. Sub and sup create subscript (H₂O) and superscript (x²) text respectively — essential for chemistry and mathematics content. Learning all of these tags and when each one is appropriate is a foundational skill for any frontend developer.

Semantic vs Presentational Formatting: Why the Difference Matters

This distinction is one of the most important conceptual leaps in HTML, and most beginners skip past it. Semantic tags carry meaning beyond their visual effect. When you wrap text in strong, you're telling the browser, screen readers, and search engines that this content is especially important. When you wrap text in em, you're expressing stressed emphasis — the difference between saying "I didn't say she stole it" vs "I didn't say she stole it." Screen readers for visually impaired users can change tone or speed when they encounter strong or em, making your content more accessible. Presentational tags like b and i only affect how content looks — they carry no inherent meaning. This matters for SEO too: Google's indexing algorithms weigh semantically tagged content more heavily for relevance scoring. The practical rule is simple: use strong when the content is genuinely important in context, and b when you only want visual emphasis without implying importance. Use em for genuine stress or distinction, and i for technical terms, foreign words, or titles. Following this distinction is the hallmark of professional, accessible HTML.

Tag	Type	Default Effect	Use When
<strong>	Semantic	Bold	Content is genuinely important (warnings, key terms)
<b>	Presentational	Bold	Visual emphasis only, no added importance
<em>	Semantic	Italic	Stressed emphasis that changes meaning
<i>	Presentational	Italic	Technical terms, titles, foreign words
<mark>	Semantic	Yellow highlight	Highlighted/relevant text in search results or annotations
<del>	Semantic	Strikethrough	Deleted or obsolete content (old price, correction)
<ins>	Semantic	Underline	Inserted or replacement content
<blockquote>	Semantic	Indented block	Long quotes attributed to an external source

HTML Quotation Elements: blockquote, q, cite, and abbr

HTML quotation elements handle attributed content — text you're quoting from external sources, speech, or documents. The blockquote element is for long quotations from external sources. Browsers visually indent blockquote content by default, and the cite attribute can reference the source URL. The q element is for short, inline quotations within a sentence — browsers automatically add quotation marks around q content. The cite element marks the title of a referenced creative work (book, article, film, website). Note the distinction: the cite attribute inside blockquote references a URL, while the cite element is a standalone tag marking a title as a reference. The abbr tag marks abbreviations and acronyms and accepts a title attribute with the full expansion — when a user hovers over the abbreviation, they see the full meaning in a tooltip. For example: NASSCOM. The bdo element controls text direction (right-to-left for Arabic or Hebrew), and address marks contact information. These quotation and reference elements are particularly important for content-heavy websites, news sites, blogs, and educational platforms where attribution and accessibility are key concerns.

When to Use HTML Formatting vs CSS for Styling Text

Here's a question I get often from students: if I can just use CSS to make text bold, italic, or highlighted, why use HTML formatting tags at all? The answer is about separation of concerns and semantic layer. CSS controls presentation; HTML provides structure and meaning. When you use a span tag with CSS font-weight: bold, you get the visual effect but no semantic signal. When you use strong, you get both the visual effect (via default browser styles) and the semantic signal that search engines and screen readers interpret. In practice, the rule is: use HTML semantic tags when the formatting carries meaning (strong for important warnings, em for stressed phrases, del for obsolete prices, ins for corrections), and use CSS classes or inline styles when you want purely visual formatting changes (different font size, color, or weight for brand identity). For example, a sale price shown in a styled span with red color is purely presentational — there's no semantic meaning in the color. But del on the original price carries the semantic meaning that this price is no longer valid.

HTML Formatting and Web Developer Skills That Employers Value

Web employers in 2026 expect frontend developers to write clean, accessible, and semantically correct HTML. Job descriptions at TCS, Infosys, Wipro, Mphasis, and fast-growing product startups mention accessibility compliance (WCAG 2.1), semantic HTML, and core web vitals as explicit requirements. India's government websites are also increasingly being audited for accessibility, creating a growing demand for developers who understand how screen readers interpret HTML markup. What most people don't realize is that knowing semantic HTML — including formatting and quotation elements — directly impacts how well your web pages rank on Google. Google's crawler assigns semantic weight to strong and em tags when assessing relevance, and properly attributed blockquote content can appear in featured snippets. These are practical, measurable career advantages. NASSCOM and Deloitte project India will need 1.25 million digital tech professionals by 2027 — developers who understand HTML deeply, not just at the surface level, will always stand out.

Start Your Web Development Journey at ABC Trainings

ABC Trainings' web development curriculum covers HTML from fundamentals through advanced topics — including semantic markup, accessibility, and all the elements covered in this Episode 5 tutorial. Our free YouTube series (this is Episode 5) is matched by our live, hands-on classroom training in Pune (Wagholi, Hadapsar), Aurangabad/Sambhajinagar (CIDCO, Osmanpura), and Sangli. Students build real projects from the first week — not toy examples, but actual website layouts that go into their portfolios. Our placement support includes resume building, GitHub portfolio reviews, technical interview coaching, and referrals to IT companies in Pune's Hinjewadi and Magarpatta, as well as IT startups across Maharashtra. Under the CMYKPY stipend scheme, eligible Maharashtra students can earn ₹6,000–₹10,000 per month during their internship. Call +91 7039169629 or WhatsApp 7774002496 to enroll in the next HTML-to-full-stack batch.

Under the Chief Minister Yuva Karya Prashikshan Yojana (CMYKPY), Maharashtra students enrolled in approved IT and web development training programs can receive a monthly stipend of ₹6,000–₹10,000 during their internship period. This scheme reduces the financial burden of upskilling and is available for courses at approved centers like ABC Trainings. Ask our admission team about CMYKPY eligibility.

FAQs

What is the difference between strong and b in HTML?

Both strong and b make text appear bold visually. The difference is semantic: strong signals that the content is important or urgent — screen readers may change tone, and search engines assign more weight to strongly-tagged terms. The b tag is purely presentational — it makes text bold without implying importance. Use strong when the content truly matters (warnings, key terms, critical information) and b for visual styling only.

What is the difference between em and i in HTML?

Both em and i make text appear italic. The em tag carries semantic stress emphasis — it changes the meaning of a sentence the way vocal stress does. The i tag is presentational and is used for technical terms, foreign words, publication titles, or stylistic italics where no specific emphasis is intended. Screen readers may express em with different vocal stress, making it important for accessibility when the emphasis is meaningful.

When should I use blockquote vs q in HTML?

Use blockquote for long quotations from external sources — it renders as an indented block by default and can include a cite attribute pointing to the source URL. Use q for short inline quotations within a paragraph — browsers automatically add language-appropriate quotation marks around q content. Both are semantically meaningful and help search engines and screen readers understand that the content is attributed material, not your own words.

Where can I learn HTML formatting and web development in Pune?

ABC Trainings offers structured HTML and full-stack web development courses at centers in Pune — Wagholi and Hadapsar — as well as Aurangabad/Sambhajinagar (CIDCO, Osmanpura) and Sangli. The curriculum covers HTML fundamentals through CSS, JavaScript, and full-stack frameworks. Courses are NSDC and Skill India affiliated. Call +91 7039169629 or WhatsApp 7774002496 to know about the next batch starting near you.