HTML Text Formatting Tutorial: 8 Essential Semantic Tags Explained (Tutorial 02)

In this HTML text formatting and semantic tags tutorial, you’ll learn how to style text properly, create lists, add quotes, and use the semantic tags that help both users and Google understand your content better.

This is Tutorial 2 of 8 in our complete HTML series on Tutorials Ocean’s HTML category. If you haven’t already, check out Tutorial 1: HTML Structure & Tags before starting this one.

Bold, Italic & Underline in HTML

Every HTML text formatting and semantic tags tutorial starts with the basics: making text bold, italic, or underlined.

<p>This word is <strong>bold</strong> and important.</p>
<p>This word is <em>italic</em> for emphasis.</p>
<p>This text is <u>underlined</u>.</p>

Important tip: Always prefer <strong> over the old <b> tag, and <em> over <i>. They look the same visually, but <strong> and <em> carry real meaning for screen readers and search engines — this is a core part of any proper HTML text formatting and semantic tags tutorial.

HTML Lists: Ordered & Unordered

Lists are one of the most-used elements on the web — menus, steps, features, everything.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

• <ul> — unordered list (bullet points)
• <ol> — ordered list (numbered)
• <li> — each list item, used inside both

You can also nest lists inside each other for sub-items — just place a full <ul> or <ol> inside an <li>. For the full official spec, see the MDN documentation on HTML lists.

Blockquotes & Quotations

<blockquote>
    Code is like humor. When you have to explain it, it's bad.
</blockquote>

<p>As someone once said, <q>simplicity is the ultimate sophistication.</q></p>

• <blockquote> — for longer quoted content, usually shown indented
• <q> — for short inline quotes

Semantic Text Tags You Should Know

These are smaller tags but they matter a lot in a proper HTML text formatting and semantic tags tutorial, because they add real meaning to your content, not just style:

<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>small print/disclaimer text</small>.</p>
<p>Water is H<sub>2</sub>O.</p>
<p>This is x<sup>2</sup>.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is easy to learn.</p>

Practice Exercise

Open your index.html file from Tutorial 1 and add a new section below your existing content.

Requirements:

1. Add an <h2> titled “My Skills”
2. Create an unordered list of 3 skills you’re learning, with one skill wrapped in <strong>
3. Add an ordered list showing your 3-step learning plan
4. Add a <blockquote> with a quote that motivates you
5. Add a paragraph using <mark> to highlight your favorite skill
6. Add one <abbr> tag for any abbreviation of your choice (e.g., “CSS”, “API”)

Bonus challenge: Use <sub> or <sup> anywhere it makes sense — even just for fun, like writing your name with a trademark symbol.

Save your file, refresh your browser, and see how much more structured your page looks already.

What’s Next?

This completes Tutorial 2 of our HTML text formatting and semantic tags series. In Tutorial 3, we’ll cover HTML links, images, and media — how to connect pages together and embed visual content properly.

This HTML text formatting and semantic tags tutorial is part of the complete HTML series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.