HTML Text & Formatting: Semantic vs. Styling

Text Formatting Elements

1. Bold Text

Visual Styling Approach:

html

<b>This text is bold (visual only)</b>

• Purpose: Purely visual - makes text bold

• No semantic meaning: Doesn't indicate importance

• Use case: Stylistic emphasis without meaning

Semantic Meaning Approach:

html

<strong>This text is strongly emphasized</strong>

• Purpose: Indicates strong importance or urgency

• Visual: Usually renders as bold (but can be styled differently)

• Use case: Critical information, warnings, important content

• Accessibility: Screen readers may announce with different tone

Example Comparison:

html

<p>Open <b>Monday-Friday</b> from 9am-5pm.</p>
<!-- 'Monday-Friday' is bold for visual emphasis -->

<p><strong>Warning:</strong> This area is restricted!</p>
<!-- 'Warning:' has semantic importance -->

2. Italic Text

Visual Styling Approach:

html

<i>This text is italic (visual only)</i>

• Purpose: Purely visual - makes text italic

• No semantic meaning: Just presentation

• Use case: Technical terms, foreign words, thoughts

Semantic Meaning Approach:

html

<em>This text is semantically emphasized</em>

• Purpose: Indicates emphasis that changes meaning

• Visual: Usually renders as italic

• Use case: Stress emphasis in a sentence

• Accessibility: Screen readers may change intonation

Example Comparison:

html

<p>The <i>HMS Victory</i> is a famous ship.</p>
<!-- Ship name in italic (visual convention) -->

<p>You <em>must</em> complete this form.</p>
<!-- 'must' has semantic emphasis (obligation) -->

3. Underlined Text

The <u> Element:

html

<u>This text is underlined</u>

• Purpose: Originally for purely visual underlining

• Modern use: Indicate text that should be stylistically underlined

• Examples: Proper names in Chinese, misspelled words, annotation

Important Note: Avoid using <u> for links (use <a> instead)

Modern Semantic Alternatives:

html

<!-- For marking edits -->
<ins>This text was inserted</ins>

<!-- For misspellings (with proper spelling available) -->
<p>This is <u>speled</u> <span class="correction">spelled</span> wrong.</p>

<!-- Using CSS instead for pure styling -->
<span style="text-decoration: underline;">Styled underline</span>

Special Text Formatting Examples:

html

<p>
    <b>Visual bold</b> vs <strong>semantic strong</strong><br>
    <i>Visual italic</i> vs <em>semantic emphasis</em><br>
    <u>Underlined text</u> for specific purposes
</p>

<!-- Practical mixed example -->
<p>
    The term <i>photosynthesis</i> is <em>extremely important</em> 
    in biology. <strong>Remember:</strong> it converts light energy 
    into chemical energy. This process was <u>discovered</u> in 1779.
</p>

Superscript and Subscript

1. Superscript (<sup>)

html

<p>Einstein's formula: E = mc<sup>2</sup></p>
<p>Today is 14<sup>th</sup> January</p>
<p>Water is H<sub>2</sub>O</p>
2. Subscript (<sub>)
html

<p>Water: H<sub>2</sub>O</p>
<p>Carbon dioxide: CO<sub>2</sub></p>
<p>Chemical formula: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

Practical Examples:

html

<!-- Mathematical -->
<p>(x + y)<sup>2</sup> = x<sup>2</sup> + 2xy + y<sup>2</sup></p>

<!-- Scientific -->
<p>Avogadro's number: 6.022 × 10<sup>23</sup> mol<sup>-1</sup></p>

<!-- Footnotes -->
<p>
    The study concluded significant results<sup>1</sup> that 
    contradict previous findings<sup>2</sup>.
</p>

<!-- Chemical equations -->
<p>
    2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O
</p>

<!-- Dates and ordinal numbers -->
<p>
    The meeting is on January 21<sup>st</sup>, 2024.<br>
    World War II ended in 1945<sup>†</sup>.
</p>

Semantic vs. Styling: The Core Concept

Styling Elements (Presentation Only)

html

<b>Bold - Just makes text bold</b>
<i>Italic - Just makes text italic</i>
<u>Underline - Just underlines text</u>
<big>Bigger text (deprecated - use CSS instead)</big>
<small>Smaller text (has semantic use too)</small>

Semantic Elements (Meaning + Presentation)

html

<strong>Important text</strong>
<em>Emphasized text</em>
<mark>Highlighted/relevant text</mark>
<cite>Title of a work</cite>
<code>Computer code</code>
<small>Legal text, fine print</small>

Complete Semantic Text Formatting Reference

Common Semantic Elements:

html

<!-- Mark/highlight text -->
<p>Search results for <mark>HTML formatting</mark></p>

<!-- Code snippets -->
<p>Use <code>console.log()</code> for debugging.</p>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl + S</kbd> to save.</p>

<!-- Variables -->
<p>Let <var>x</var> represent the unknown value.</p>

<!-- Sample output -->
<p>The program will display: <samp>Success! File saved.</samp></p>

<!-- Abbreviations -->
<p><abbr title="HyperText Markup Language">HTML</abbr> is awesome!</p>

<!-- Citations -->
<p>According to <cite>The Great Gatsby</cite> by Fitzgerald...</p>

<!-- Definitions -->
<p>The <dfn>semantic web</dfn> is about meaningful data.</p>

<!-- Quotations -->
<p>He said, <q>This is an inline quote.</q></p>
<blockquote>
    This is a block quotation that spans multiple lines.
</blockquote>

<!-- Deleted/Inserted text -->
<p>
    Price: <del>$99.99</del> <ins>$79.99</ins>
</p>

Practical Examples: When to Use What

Example 1: Scientific Paper

html

<article>
    <h1>Chemistry Research</h1>
    
    <p>
        The reaction between H<sub>2</sub> and O<sub>2</sub> produces 
        H<sub>2</sub>O. <strong>Important:</strong> This reaction is 
        exothermic, releasing 286 kJ/mol<sup>[1]</sup>.
    </p>
    
    <p>
        As noted by Smith <cite>et al.</cite> in their 2020 study:
        <blockquote>
            The combustion process must be carefully controlled 
            to prevent explosive reactions.
        </blockquote>
    </p>
    
    <p>
        <mark>New finding:</mark> The reaction rate increases by 
        15% at higher pressures<sup>*</sup>.
    </p>
    
    <footer>
        <small>© 2024 Chemistry Journal. All rights reserved.</small>
    </footer>
</article>

Example 2: Product Page

html

<div class="product">
    <h2>Wireless Headphones</h2>
    
    <p>
        <del>Original price: $149.99</del><br>
        <strong>Sale price: $99.99</strong>
    </p>
    
    <p>
        <mark>Limited time offer!</mark> These headphones feature 
        <em>noise-cancelling technology</em> that users 
        <q>can't live without</q>.
    </p>
    
    <p>
        Battery life: 30 hours<sup>*</sup><br>
        Charging time: 2 hours for full charge
    </p>
    
    <p>
        <small>
            *Battery life may vary based on usage and settings.
        </small>
    </p>
</div>

CSS Styling vs. HTML Semantics

The Modern Approach:

html

<!-- Bad: Using HTML for styling -->
<p><b><i><u>Important notice!</u></i></b></p>

<!-- Better: Semantic HTML + CSS -->
<p class="important-notice">
    <strong>Important notice!</strong>
</p>

<style>
    .important-notice strong {
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        color: #d00;
    }
</style>

CSS Reset/Enhancement:

html

<style>
    /* Style semantic elements appropriately */
    strong { 
        font-weight: bold; 
        color: #000; 
    }
    
    em { 
        font-style: italic; 
    }
    
    sup, sub {
        font-size: 0.75em;
        line-height: 0;
        position: relative;
    }
    
    sup { top: -0.5em; }
    sub { bottom: -0.25em; }
    
    mark {
        background-color: #ff0;
        padding: 0.1em 0.2em;
    }
</style>

Best Practices Summary

Do:

html

<!-- Use semantic elements for meaning -->
<p><strong>Warning:</strong> Hot surface!</p>
<p>The word <em>literally</em> is often misused.</p>
<p>Water = H<sub>2</sub>O</p>
<p>E = mc<sup>2</sup></p>

<!-- Use <mark> for highlights -->
<p>Search for <mark>semantic HTML</mark> tutorials.</p>

<!-- Use <small> for fine print -->
<footer><small>© 2024 Company Name</small></footer>

Don't:

html

<!-- Avoid presentational elements for structure -->
<p><b><i><u>Everything emphasized</u></i></b></p>

<!-- Don't use <u> for links -->
<p>Click <u>here</u> to continue.</p>  <!-- BAD -->
<p>Click <a href="#">here</a> to continue.</p>  <!-- GOOD -->

<!-- Don't nest too many formatting elements -->
<p><b><i><u>This is hard to read and maintain</u></i></b></p>

Complete Example: Formatted Article

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Text Formatting</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; }
        .chemical { color: #0066cc; }
        .important { background-color: #fffacd; padding: 5px; }
    </style>
</head>
<body>
    <article>
        <header>
            <h1>The Science of Water</h1>
            <p><small>Published: January 15, 2024</small></p>
        </header>
        
        <section>
            <h2>Chemical Composition</h2>
            
            <p>
                Water is a chemical substance with the formula 
                H<sub>2</sub>O. <strong>Important fact:</strong> 
                Each molecule contains one oxygen and two hydrogen 
                atoms connected by covalent bonds.
            </p>
            
            <p>
                The chemical reaction for water formation is:
                <br>
                2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O
            </p>
            
            <p class="chemical">
                <mark>Note:</mark> This is an exothermic reaction 
                releasing 572 kJ/mol<sup>[1]</sup>.
            </p>
        </section>
        
        <section>
            <h2>Physical Properties</h2>
            
            <p>
                Water is liquid at standard temperature and pressure, 
                but it <em>often</em> exists on Earth in all three 
                states: solid, liquid, and gas.
            </p>
            
            <p>
                The boiling point is 100°C (212°F) at sea level, 
                but decreases at higher altitudes<sup>†</sup>.
            </p>
        </section>
        
        <footer>
            <hr>
            <p>
                <small>
                    References: 
                    <cite>Chemistry Fundamentals, 5th Edition</cite>
                </small>
            </p>
            <p>
                <small>
                    † This is due to decreased atmospheric pressure.
                </small>
            </p>
        </footer>
    </article>
</body>
</html>

Quick Reference Cheat Sheet: