freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 3.3 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Bold, emphasis, and text formatting

In this lesson

  • strong vs b, em vs i
  • Highlighting with mark and side notes with small
  • sup, sub, code, and abbr
  • Quotes with blockquote and q, and HTML entities

Short answer

Use <strong> for important text and <em> for stressed emphasis. Both carry meaning that screen readers and search engines can notice. <b> and <i> only change the look, so save them for things like product names or foreign words. Other inline tags handle highlights, fine print, code, quotes, and special characters.

strong vs b, em vs i

TagMeaningExample use
<strong>Strong importanceWarning: the road is closed.
<em>Stress emphasisI said Tuesday, not Thursday.
<b>Draw attention, no extra importanceProduct names in a review
<i>Alternate voiceForeign words like pasalubong

Both pairs look the same by default, bold and italic. The difference is meaning, which is the heart of semantic HTML.

Other inline formatting

<p><mark>Sale ends Sunday</mark></p>
<p><small>Prices include VAT.</small></p>
<p>Water is H<sub>2</sub>O. Area is 25 m<sup>2</sup>.</p>
<p>Type <code>Ctrl + S</code> to save.</p>
<p><abbr title="Department of Trade and Industry">DTI</abbr> registered.</p>
<p>Was <del>₱500</del> now <ins>₱399</ins>.</p>

Quotes

<blockquote cite="https://example.com/review">
  <p>Best pili tarts in Albay!</p>
</blockquote>
<p>She said, <q>See you at the plaza.</q></p>

<blockquote> is for longer quotes in their own block, like a customer testimonial. <q> adds quotation marks around a short quote inside a sentence.

HTML entities

Some characters have special meaning in HTML. To show them as text, use entities:

CharacterEntity
<&lt;
>&gt;
&&amp;
©&copy;
non-breaking space&nbsp;

With UTF-8 you can type ₱ and ñ directly, so you only need entities for the first three and for nbsp.

Try it: format a promo

Make the deadline strong, highlight the discount with mark, strike the old price with del, and put the fine print in small.

Live preview

Quick quiz

1. Which tag marks strong importance?
2. Which tag fits a foreign word?
3. How do you show a less than sign as text?
4. Which tag fits a customer testimonial block?

Common mistakes

  • Bolding everything. If everything is strong, nothing stands out.
  • Using em just for italics. Use em only when stress changes the meaning.
  • Using u for emphasis. Underlined text looks like a link. Avoid it.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<strong>
Text with strong importance.
<em>
Text with stress emphasis.
<mark>
Highlighted text.
<blockquote>
A block quotation from another source.
HTML entity
A code like &lt; that displays a reserved character.
Inline element
An element that sits inside a line of text, like strong or a.

Questions beginners ask

Does strong help SEO?

Barely. Use it for readers, not for ranking.

Is <b> deprecated?

No. It is valid in modern HTML with a narrower meaning.

How do I show HTML code on a page?

Wrap it in <code> or <pre><code> and escape < as &lt;.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.