Press F for Fullscreen

1/8

REC

HTML Text Formatting Typography & Styling Content Presentation

Part 5: Mastering Text Formatting in HTML

Simegnew Destew

Senior Full-Stack Developer

Part 5: HTML Text Formatting

Headings & Paragraphs

Structural Text Elements

<h1>

Main Heading - Most Important

<h2>

Section Heading - Very Important

<h3>

Subsection Heading - Important

<h4>

Minor Heading - Some Importance

<h5>

Small Heading - Less Important

<h6>

Tiny Heading - Least Important

Paragraphs & Line Breaks

Paragraphs

The  tag defines a paragraph of text.

Browsers automatically add margin before and after paragraphs
Used for blocks of text content
Should contain related sentences and ideas
Essential for readability and content structure

This is a paragraph of text that contains multiple sentences and forms a complete thought or idea.

Line Breaks

The   tag creates a line break within text.

Empty element (no closing tag needed)
Useful for addresses, poetry, or forced line breaks
Not for creating space between paragraphs
Should be used sparingly and semantically

First line of text 
Second line of text 
Third line of text

Part 5: HTML Text Formatting

Basic Text Formatting

Emphasis and Styling Tags

&

Bold Text

 is for stylistic bold, while  indicates importance.

Bold Text vs Important Text

Bold Text vs Important Text

&

Italic Text

 is for stylistic italic, while  indicates emphasis.

Italic Text vs Emphasized Text

Italic Text vs Emphasized Text

Underlined Text

The  tag underlines text. Use sparingly as it can be confused with links.

Underlined Text

Underlined Text

Small Text

The  tag makes text one size smaller than the default.

Normal text Small text

Normal text Small text

SUB

Subscript Text

The  tag creates subscript text, commonly used in chemical formulas.

H2O

H₂O

SUP

Superscript Text

The  tag creates superscript text, commonly used in mathematical expressions.

x2 + y2

x² + y²

NOTE

Semantic Importance: Use  and  when you want to convey meaning, not just styling. Screen readers will emphasize these elements.

Part 5: HTML Text Formatting

Interactive Formatting Demo

See Formatting in Real-Time

HTML Editor

<h1>Welcome to Text Formatting</h1> This is a paragraph demonstrating various text formatting options. You can make text bold, italic, or underlined. Scientific notation: H2O and E=mc2 Small text for disclaimers

Live Preview

How to Use:

Select text in the editor
Click a formatting button to apply the tag
See the result instantly in the preview
Edit the HTML directly to learn the syntax

Part 5: HTML Text Formatting

Special Formatting Tags

Advanced Text Elements

🔖

Highlighted or marked text

Important information

This contains highlighted text for emphasis.

📄

<pre>

Preformatted text preserving spaces and line breaks

<pre>Text with multiple spaces</pre>

This text
  preserves   all
    spaces and
      line breaks

📍

<address>

Contact information for the author

<address>Contact: author@example.com</address>

Written by John Doe
Visit us at:
Example.com
Box 564, Disneyland
USA

🔄

<bdo>

Bi-directional override for text direction

<bdo dir="rtl">This text is reversed</bdo>

Normal: Left to Right
Reversed: Right to Left

❌

<del>

Deleted text (strikethrough)

<del>Old price: $100</del>

~~Old price: $100~~ New price: $75

➕

<ins>

Inserted text (underlined)

<ins>New content added</ins>

Original text with inserted content continues here.

Usage Tips:

for Search Results

Perfect for highlighting search terms in results

<pre> for Code

Ideal for displaying code snippets with proper formatting

<del> and <ins> for Revisions

Great for showing document changes and edits

<bdo> for Internationalization

Essential for languages with right-to-left writing

Part 5: HTML Text Formatting

Semantic vs Stylistic Formatting

Choosing the Right Tag

Tag	Type	Purpose	Example	When to Use
`<b>`	Stylistic	Visual bold without importance	Product names	When you want text to stand out visually
`<strong>`	Semantic	Indicates strong importance	Warning messages	When content is important for understanding
`<i>`	Stylistic	Visual italic without emphasis	Technical terms	For technical terms, foreign phrases, thoughts
`<em>`	Semantic	Indicates emphasized text	Key points	When you want to stress certain words
`<mark>`	Semantic	Highlights relevant content	Search results	For highlighting relevant content in context
`<small>`	Semantic	Side comments and fine print	Copyright info	For legal text, disclaimers, copyright

Accessibility Benefits of Semantic Tags:

🎯

Screen Readers

Semantic tags are announced with proper emphasis

🔍

Search Engines

Search algorithms understand content importance

🎨

Styling Consistency

CSS can style semantic elements appropriately

📱

Future Compatibility

Semantic HTML works better with new technologies

BEST PRACTICE

Always prefer semantic tags (, ) over stylistic tags (, ) when you want to convey meaning, not just appearance.

Part 5: HTML Text Formatting

Comprehensive Formatting Demo

Building a Formatted Article

Formatted Article Code

<article> <h1>The Science of Web Development</h1> Web development combines technical skills with creative design to build amazing digital experiences. <h2>Core Technologies</h2> The foundation of web development rests on three pillars: <ul> <li>HTML for structure</li> <li>CSS for presentation</li> <li>JavaScript for behavior</li> </ul> <h3>Chemical Inspiration</h3> Just as H2O forms the basis of life, these three technologies form the basis of the web. The formula for success is: Great Website = HTML + CSS + JavaScript <h3>Mathematical Foundation</h3> The complexity of a website can be expressed as C = f(HTML2, CSS3, JSn) where n represents interactive features. <hr> Article last updated: January 2024 <address> Written by Web Dev Team Email: team@devvoltz.com Website: www.devvoltz.com </address> </article>

Article Preview

The Science of Web Development

Web development combines technical skills with creative design to build amazing digital experiences.

Core Technologies

The foundation of web development rests on three pillars:

HTML for structure
CSS for presentation
JavaScript for behavior

Chemical Inspiration

Just as H₂O forms the basis of life, these three technologies form the basis of the web. The formula for success is:

Great Website = HTML + CSS + JavaScript

Mathematical Foundation

The complexity of a website can be expressed as C = f(HTML², CSS³, JSⁿ) where n represents interactive features.

Article last updated: January 2024

Written by Web Dev Team
Email: team@devvoltz.com
Website: www.devvoltz.com

Formatting Techniques Used:

<h1>-<h3> Headings Importance Emphasis Highlighting Subscript Superscript Fine Print <address> Contact Info <hr> Horizontal Rule

COMPLETE

Formatting Mastered!

You've Learned HTML Text Formatting

What We Covered in Part 5:

📊

Headings

h1-h6 for content hierarchy

📝

Paragraphs & Breaks

p for content, br for line breaks

🔠

Basic Formatting

bold, italic, underline, small

🔢

Scientific Notation

sub and sup for formulas

🎯

Special Tags

mark, pre, address, bdo

🔄

Edits & Changes

del and ins for revisions

Practice Exercise:

Create a Formatted Product Page

Build an HTML page for a product with:

Proper heading structure
Formatted product description
Price with old and new prices using del/ins
Technical specifications with sub/sup
Contact information in address
Highlighted key features

Text Formatting Best Practices:

🎯

Use Semantic Tags

Prefer strong/em over b/i for meaning

📐

Maintain Hierarchy

Use headings in proper order (h1 → h6)

🎨

Don't Overformat

Use formatting sparingly for emphasis

♿

Consider Accessibility

Screen readers interpret semantic tags

Next: Learn about ordered/unordered lists, definition lists, and creating tables

Presenter Notes - Video 5

Intro Slide: Emphasize that text formatting is essential for readability, accessibility, and user experience. Good formatting makes content scannable and understandable.

Headings & Paragraphs: Demonstrate the visual hierarchy of headings. Show how screen readers use heading structure for navigation.

Basic Formatting: Live demonstration of each formatting tag. Show the difference between b/strong and i/em with screen reader if possible.

Interactive Demo: Let students experiment with the editor. Show how to select text and apply formatting. Demonstrate common mistakes.

Special Tags: Show real-world use cases for each special tag. Demonstrate how pre preserves formatting for code examples.

Semantic vs Stylistic: Emphasize the importance of semantic HTML for accessibility and SEO. Show examples of when to use each type.

Comprehensive Demo: Walk through the article code. Point out how different formatting techniques work together to create readable content.

Recap: Summarize key formatting tags. Assign the product page exercise. Preview lists and tables for next video.

HTML Text Formatting Typography & Styling Content Presentation

Simegnew Destew

Headings & Paragraphs

Main Heading - Most Important

Section Heading - Very Important

Subsection Heading - Important

Minor Heading - Some Importance

Small Heading - Less Important

Tiny Heading - Least Important

Paragraphs & Line Breaks

<p> Paragraphs

<br> Line Breaks

Basic Text Formatting

<b> & <strong>

<i> & <em>

<u>

<small>

<sub>

<sup>

Interactive Formatting Demo

How to Use:

Special Formatting Tags

<mark>

<pre>

<address>

<bdo>

<del>

<ins>

Usage Tips:

<mark> for Search Results

<pre> for Code

<del> and <ins> for Revisions

<bdo> for Internationalization

Semantic vs Stylistic Formatting

Accessibility Benefits of Semantic Tags:

Screen Readers

Search Engines

Styling Consistency

Future Compatibility

Comprehensive Formatting Demo

The Science of Web Development

Core Technologies

Chemical Inspiration

Mathematical Foundation

Formatting Techniques Used:

Formatting Mastered!

What We Covered in Part 5:

Headings

Paragraphs & Breaks

Basic Formatting

Scientific Notation

Special Tags

Edits & Changes

Practice Exercise:

Create a Formatted Product Page

Text Formatting Best Practices:

Use Semantic Tags

Maintain Hierarchy

Don't Overformat

Consider Accessibility

Presenter Notes - Video 5