FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Basics

Intermediate

HTML Formatting

Learn HTML Formatting as a practical HTML text lesson with syntax, examples, common mistakes, accessibility notes and a live code lab.

HTML text basics

Formatting elements add meaning inside a sentence.

HTML has inline elements for important words, emphasized words, code, keyboard input, abbreviations and highlighted text. These elements do more than change how text looks.

The important distinction is meaning versus style. Strong means important. Em means emphasized. Code means code. CSS can make any of them look however you want.

Older elements such as b and i still exist, but they should be used carefully. If the text has real importance or emphasis, choose strong or em instead.

strong

Important text. Browsers usually render it bold, but the meaning is importance.

em

Emphasized text. Browsers usually render it italic, but the meaning is stress emphasis.

mark

Highlighted text that is relevant in the current context.

code

A short piece of computer code inside normal text.

kbd

Keyboard input, such as Ctrl + S or Command + K.

abbr

An abbreviation with an optional title explaining the full phrase.

Syntax and meaning

Choose inline elements by meaning first.

Formatting elements are normally used inside paragraphs, list items, table cells, buttons or other text content.

Semantic inline formatting

<p>
  Press <kbd>Command</kbd> + <kbd>S</kbd> to save.
  Use <code>&lt;strong&gt;</code> for <strong>important</strong> words.
  The <abbr title="Document Object Model">DOM</abbr> is created by the browser.
</p>

Visual-only thinking

<p>
  Press <b>Command + S</b> to save.
  Use <i>random italic text</i> because it looks nice.
  <span class="bold">Important warning</span>
</p>

Practical rules

Use the element for meaning first, then polish it with CSS.

These rules are the part that saves time in real projects. If the HTML meaning is clean, CSS, JavaScript, accessibility checks and search optimization become easier to reason about.

Use strong for importance

Do not use strong only because you want bold text.

Use em for stress

Em changes the tone of a sentence, not just the appearance.

Use code for code

Inline code should be marked as code so it can be styled consistently.

Use mark sparingly

Highlight only text that is relevant to the current task or search.

Explain abbreviations

Use abbr with a title when the abbreviation may not be obvious.

Do visual styling in CSS

If the only goal is color, size or weight, CSS is usually the right layer.

Production thinking

Small text decisions affect accessibility, SEO and maintainability.

Why does this matter?

Text markup matters because browsers and assistive technology do not only see letters. They also read structure, emphasis, quotes, code and relationships between pieces of text.

Accessibility

Semantic inline elements can give assistive technology better context than anonymous spans with classes.

Production note

Build a small typography system for inline code, keyboard input, marks and abbreviations so lessons and articles stay consistent.

SEO note

Formatting elements are not magic SEO buttons. They help when they clarify real content, not when every keyword is made bold.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change one tag, attribute or text value in the example.
  • Run the preview and describe exactly what changed.
  • Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

  1. Change one meaningful part of the HTML, not only the visible text.
  2. Run the preview and check whether the result still makes semantic sense.
  3. Explain why the element or attribute you changed belongs in this exact place.

Try it yourself

Format text with meaning

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?