Welcome to the Complete HTML Course. In this lesson, you move from writing basic HTML to writing clean, meaningful, and SEO-friendly markup. This is where your code starts looking professional.
Lessons 7 to 9 focus on how content is understood by users, search engines, and accessibility tools. These concepts are extremely important in real-world projects.
Info!
Good HTML is not about how it looks.
It is about what the content means.
Lesson 7: HTML Text Formatting (Deep Explanation)
Text formatting tags are used to highlight importance, emphasis, and meaning inside content. They should never be used only for styling purposes.
<b> vs <strong>
Both tags make text bold visually, but they serve different purposes.
- <b> is purely visual
- <strong> adds importance and meaning
SEO Tip!
Search engines treat <strong> as important content,
not <b>.
<i> vs <em>
Similar to bold tags, these tags differ in meaning.
- <i> shows italic style only
- <em> represents emphasis
Warning!
Do not use formatting tags for layout or design.
Use CSS instead.
Other Useful Formatting Tags
Formatting Tags with Live Examples
Now let’s understand these formatting tags with real, editable examples so you can practice directly.
<mark> – Highlight Important Text
The <mark> tag highlights important text,
similar to a highlighter pen.
Tip!
Use <mark> only to highlight meaning, not for visual styling.
<small> – Less Important Text
The <small> tag is used for secondary or less important text.
Warning!
Do not hide important information using <small>.
Search engines still read it.
<del> – Deleted Content
The <del> tag represents content that has been removed or replaced.
Use case:
Best for price updates, corrections, and changes.
<ins> – Inserted Content
The <ins> tag shows newly added or updated content.
Best Practice:
Use <ins> with <del> to show content changes clearly.
<sup> – Superscript Text
The <sup> tag places text above the normal line.
Common uses:
Math formulas, powers, footnotes.
<sub> – Subscript Text
The <sub> tag places text below the normal line.
Tip!
Use <sub> for chemistry and scientific notation.
Lesson 8: Semantic HTML (Critical for SEO)
Semantic HTML uses tags that clearly describe what type of content they contain. This helps search engines and assistive technologies understand your page structure.
Why this matters
Google uses semantic structure to understand
which part of the page is most important.
Non-Semantic vs Semantic HTML
Non-Semantic (Avoid This)
Semantic (Best Practice)
Important Semantic Tags
<header>page or section header<nav>navigation links<main>primary page content<section>grouped content<article>standalone content<aside>side content<footer>footer information
Warning!
Never wrap the entire page inside <section>.
Use <main> for that.
Lesson 9: HTML Best Practices (Developer Habits)
These rules are followed by professional developers in production websites.
- Use only one
<h1>per page - Write clean and consistent indentation
- Use lowercase tag names
- Add meaningful alt text to images
- Avoid unnecessary
<div>elements
Tip!
Readable HTML is easier to debug and maintain.
Your future self will thank you.
Common Beginner Mistakes
- Using formatting tags for styling
- Ignoring semantic HTML
- Messy indentation
- Overusing div elements
What You Learned in Beginner Post #3
- Correct use of HTML formatting tags
- Semantic HTML structure
- Professional coding habits
You’ve successfully completed Beginner Post #3. Consistency is what turns beginners into pros. Practice daily, then move ahead with confidence.
Next Beginner Post
🚀 Level Up: Next HTML Lesson: Lists, Media & HTML5 Basics →
