HTML Text Formatting

Historically, developers used the <b> (bold) and <i> (italic) tags to format text. However, these tags are purely visual—they tell the browser how to render the text, but they convey zero meaning to assistive technologies or search engines.

Modern web architecture demands semantic rigor. Instead of <b>, you must use the <strong> tag to indicate that a piece of text has critical, urgent importance. Instead of <i>, use the <em> tag to indicate stress emphasis. Screen readers actively change their vocal intonation when they encounter these tags. Using semantic formatting is the difference between a page that merely looks right and a page that actually works for all users.

When documenting software or referencing specific data, you need specialized modifiers. The <code> tag is explicitly designed to distinguish actionable computer code from conversational prose. The browser will natively render this using a monospace typeface.

Additionally, the <mark> tag is used to highlight text for contextual relevance—imagine using a yellow highlighter in a textbook. This is aggressively used in search interfaces to instantly draw the user's eye to their query term within a large block of text. These tags provide immediate clarity without forcing you to write complex CSS.

When data changes, you shouldn't just delete the old text. By using the <del> (deleted) and <ins> (inserted) tags, you programmatically document the revision history of the page. Browsers natively strike through the deleted text and underline the inserted text, providing instant transparency for price drops or corrected information.

Similarly, when importing external data, the <blockquote> element is mandatory for extended quotations. It explicitly links the borrowed text to a source and structurally distances it from your own prose.

Introduction to Semantic Formatting. Formatting text in modern web development is not merely about visual aesthetics; it is about conveying structural emphasis and meaning. While CSS should always be used to handle how things 'look', HTML provides specialized tags to give your text extra semantic weight. These Semantic Text Modifiers ensure that your content is not only visually distinct on the screen but also programmatically meaningful to screen readers and search engine indexing algorithms.

Importance and Emphasis. Historically, developers used <b> (bold) and <i> (italic) to format text. However, these tags are purely visual. Modern architecture dictates the use of <strong> and <em>. The <strong> tag indicates that a piece of text has critical, urgent importance. The <em> tag indicates 'stress emphasis', subtly altering the meaning of a sentence just as vocal inflection would. Screen readers actually change their audible intonation when they encounter these specific semantic markers.

Checkpoint: Accessibility is a core responsibility for developers. If you have a warning label that requires 'critical importance' and needs to be forcefully announced by assistive technologies, which semantic tag should you use instead of the purely visual <b> tag?

• →<b>
• →<em>
• →<strong>
• →<important>

Technical Code Snippets. When documenting technical instructions, you must differentiate conversational prose from actionable code. The <code> tag is designed specifically for this. It informs the browser that the enclosed text represents a fragment of computer code. By default, browsers will render this using a monospace typeface (like Courier), creating an immediate, universally recognized visual distinction between the standard paragraph text and the technical command the user needs to execute.

Visual Highlighting with Mark. The <mark> tag represents text that has been highlighted for reference or relevance in another context—much like using a yellow highlighter pen in a physical textbook. This tag is exceptionally useful when building search interfaces, allowing you to dynamically highlight the specific search term within a larger block of returned results, immediately drawing the user's eye to the relevant data payload.

Checkpoint: It is important to know the difference between structural importance and vocal stress. True or False? The <em> tag is used to add 'stress emphasis' to a word, which structurally alters the precise meaning of a sentence, and is typically rendered by browsers in italics.

• →True (It alters vocal stress)
• →False (It is only for visual italics)

Documenting Deleted Text. Sometimes you need to show that information has been removed or updated without completely erasing it from the page, such as a price drop or a corrected spelling. For this, HTML provides the <del> (deleted) tag. When the browser encounters <del>, it natively applies a visual strikethrough effect. More importantly, it programmatically informs screen readers and search engines that this specific data is no longer accurate.

Documenting Inserted Text. Working as the counterpart to <del>, the <ins> (inserted) tag is used to denote text that has been newly added to a document. This is highly useful in wikis, edit histories, or when tracking changes over time. By default, browsers will render <ins> text with an underline. By pairing <del> and <ins>, you create a semantically rich log of document revisions that both humans and automated bots can understand.

Checkpoint: If you are building an e-commerce site and want to show the original price of an item crossed out because it is on sale, which semantic tag should you use to indicate that the old price is no longer valid?

• →<del>
• →<strike>
• →<s>
• →<old>

Quoting and Citation. When citing external sources or presenting long quotations, the <blockquote> element provides both semantic meaning and a distinct visual presentation. It indicates to the browser and assistive technologies that the enclosed text is an extended quotation. For shorter, inline quotes within a standard paragraph, you should use the <q> tag instead. Browsers natively handle the visual formatting for both, indenting blockquotes and adding quotation marks to inline quotes.

Checkpoint: What semantic tag should you use to enclose a long quotation that needs to be visually set apart from the surrounding text?

• →<blockquote>
• →<q>
• →<cite>
• →<quote>

Text Formatting Mastered. Text formatting mastery is officially complete! You have elevated your markup from purely visual decoration to rich, semantic architecture. By utilizing <strong>, <em>, <code>, and <mark>, you ensure that your content is highly accessible, machine-readable, and structurally precise. Up next, we will explore 'HTML Lists'—the primary tools for organizing related data into logical, readable sequences.

Up Next: Data Organization. With our text semantically formatted, we must now learn how to structure grouped information. In our next module, we will master HTML Lists. We will explore unordered structures, sequential ordered logic, and how to nest these tags to build complex, professional document hierarchies and navigation menus.

Add Semantic Emphasis. <strong> marks strong importance; <em> marks stressed emphasis — both carry real semantic meaning.