Stage 2: Frontend Fundamentals

HTML · Lesson 02

Text Elements

Emphasis, quotations, code and other inline elements that give written content meaning.

HTML4 min readFree lesson

Learn the various text tags that make writing richer and more meaningful.

1. Emphasis Tags

strong - Strong Emphasis (Semantic Importance)

<p>You must take this medicine <strong>3 times a day</strong>.</p>
<p><strong>Warning:</strong> This information is very important.</p>
  • Browsers display it in bold.
  • It is not just about looking bold; it carries the meaning that the content is important.
  • Screen readers (tools for people with visual impairments) read it with emphasis.

em - Emphasis (Intonation, Stress)

<p>I am <em>really</em> hungry.</p>
<p>That is not something <em>I</em> did.</p>
  • Browsers display it in italic.
  • It means giving a specific word the stress of spoken intonation.

b and i - Visual Presentation (No Meaning)

<p>This is <b>bold text</b>, but it has no particularly important meaning.</p>
<p>This is <i>italic text</i>, but it carries no meaning of emphasis.</p>
Tag Visual Effect Semantic Importance
<strong> Bold Yes (important content)
<b> Bold No (styling only)
<em> Italic Yes (stress/emphasis)
<i> Italic No (technical terms, foreign words, etc.)

Recommendation: Where possible, use <strong> and <em> rather than <b> and <i>.
Writing meaningful HTML is better for SEO and accessibility.

2. Quotation Tags

blockquote - Block Quotation

Represents a long quotation taken from another source. It is a block-level element.

<blockquote cite="https://www.example.com">
  <p>
    "Education is not the filling of a pail, but the lighting of a fire."
  </p>
</blockquote>
  • cite attribute: specifies the URL of the quotation's source (not visible on screen)
  • Browsers display it with indentation.

cite - Title of a Work / Source

Represents the title of a creative work such as a book, movie, or song.

<p>
  <cite>Harry Potter and the Sorcerer's Stone</cite> is a novel written by J.K. Rowling.
</p>

<blockquote>
  <p>"And yet it moves."</p>
  <footer>— <cite>Galileo Galilei</cite></footer>
</blockquote>

q - Inline Quotation

Used when a short quotation appears inside a sentence.

<p>The teacher said, <q>if you work hard, you will surely succeed</q>.</p>
  • Browsers automatically add quotation marks (" ").

code - Inline Code

<p>When declaring a variable, use <code>let</code> or <code>const</code>.</p>
<p>In HTML, a paragraph uses the <code>&lt;p&gt;</code> tag.</p>
  • Mainly used to express a single line of code, such as a tag name, function name, or variable name.
  • Browsers display it in a monospace font.

pre - Preformatted Text Block

<pre>
  function greet(name) {
    console.log("Hello, " + name + "!");
  }

  greet("John Doe");
</pre>
  • Spaces and line breaks are preserved exactly as entered.
  • It is usually used together with <code> to represent a block of code.
<pre><code>
  def hello():
      print("Hello, World!")

  hello()
</code></pre>

4. Line Breaks and Dividers

br - Line Break

<p>
  123 Teheran-ro<br>
  Gangnam-gu, Seoul<br>
  Suite 401, 4th Floor
</p>
  • It is an empty tag with no closing tag.
  • Used when you need a simple line break rather than a new paragraph.
  • Avoid overuse: Using <br> several times to create space between paragraphs is not a good idea. Use CSS instead.

hr - Horizontal Rule (Topic Separation)

<p>This is the content of the first section.</p>

<hr>

<p>This is the content of the second section. The hr tag above visually separates the two sections.</p>
  • Indicates a change of topic or a separation between paragraphs.
  • It is an empty tag.

5. Superscript and Subscript

sup - Superscript

<p>The chemical formula for water is H<sub>2</sub>O, and carbon dioxide is CO<sub>2</sub>.</p>
<p>Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>It is also used to mark a footnote reference<sup>1</sup>.</p>

sub - Subscript

<p>Molecular formula of water: H<sub>2</sub>O</p>
<p>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

6. Other Useful Tags

mark - Highlighter Effect

<p>The exam covers <mark>chapters 3 through 5</mark>.</p>

del - Deleted Text

<p>Price: <del>$50.00</del> → $35.00 (special discount)</p>

ins - Inserted Text

<p>Meeting date: changed from <del>March 5</del> to <ins>March 7</ins>.</p>

abbr - Abbreviation

<p><abbr title="HyperText Markup Language">HTML</abbr> is the foundational language of the web.</p>
  • Write the full form of the abbreviation in the title attribute.
  • It is shown as a tooltip when the mouse hovers over it.

Summary

Tag Description Block/Inline
<strong> Emphasizes important content (bold) Inline
<em> Emphasizes stress (italic) Inline
<b> Bold (no meaning) Inline
<i> Italic (no meaning) Inline
<blockquote> Block quotation Block
<q> Inline quotation Inline
<cite> Title of a work/source Inline
<code> Inline code Inline
<pre> Text block with preserved formatting Block
<br> Line break Inline
<hr> Horizontal rule/topic separation Block
<sup> Superscript Inline
<sub> Subscript Inline
<mark> Highlighter emphasis Inline
<del> Deleted text Inline
<ins> Inserted text Inline
<abbr> Abbreviation Inline

Next Steps

  • View the Example - a blog post format example
  • Check the Assignment - create a book/movie review page
  • Next lesson: Links and Images

Example files

Complete, runnable files used in this lesson. Copy them into your project and experiment.

article.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Post - HTML Text Elements Example</title>
</head>
<body>

  <h1>Getting Started with Web Development: What Is HTML?</h1>

  <p>Published: May 10, 2026 | Author: John Doe</p>

  <hr>

  <h2>Introduction</h2>

  <p>
    The very first thing people encounter when they start web development is <strong>HTML</strong>.
    <abbr title="HyperText Markup Language">HTML</abbr> is the language that defines the structure and content of web pages,
    and it is the <em>starting point</em> of all web development.
  </p>

  <p>
    In this article, I will explain <strong>in detail</strong> what HTML is, why it matters,
    and how you can get started with it.
  </p>

  <hr>

  <h2>What Is HTML?</h2>

  <p>
    HTML stands for <b>HyperText Markup Language</b>.
    As the name suggests, HTML is <em>not a programming language</em> but a markup language.
    That is, rather than performing logical calculations or conditional processing,
    it is a language that <strong>marks up</strong> the structure and meaning of a document with tags.
  </p>

  <h3>A Brief History of HTML</h3>

  <p>
    HTML was first created in <time datetime="1991">1991</time> by Tim Berners-Lee.
    The version we use today is <strong>HTML5</strong>,
    which was standardized in <time datetime="2014">2014</time> by the <abbr title="World Wide Web Consortium">W3C</abbr>.
  </p>

  <hr>

  <h2>Why Should You Learn HTML?</h2>

  <p>
    If you want to become a web developer, HTML is <mark>absolutely essential</mark>.
    No matter how well you know CSS and JavaScript, you cannot build a web page without HTML.
  </p>

  <blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/HTML">
    <p>
      "HTML is the most basic building block of the Web.
      It defines the meaning and structure of web content."
    </p>
    <footer>— <cite>MDN Web Docs</cite></footer>
  </blockquote>

  <p>
    Many developers say <q>you can learn HTML in a day</q>,
    but using it <em>correctly</em> takes steady practice.
  </p>

  <hr>

  <h2>A Look at HTML Code</h2>

  <p>
    The most basic HTML document looks like this.
    It starts with <code>&lt;!DOCTYPE html&gt;</code> and
    consists of the <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>, and <code>&lt;body&gt;</code> tags.
  </p>

  <pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello!&lt;/h1&gt;
    &lt;p&gt;This is my first HTML document.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
  </code></pre>

  <p>As shown here, HTML tags always start with <code>&lt;tag-name&gt;</code> and end with <code>&lt;/tag-name&gt;</code>.</p>

  <hr>

  <h2>Using HTML in Math and Chemistry</h2>

  <p>
    With HTML's superscript (<code>&lt;sup&gt;</code>) and subscript (<code>&lt;sub&gt;</code>) tags,
    you can also express mathematical formulas and chemical formulas.
  </p>

  <h3>Mathematical Formulas</h3>
  <p>Pythagorean theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
  <p>Einstein's equation: E = mc<sup>2</sup></p>

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

  <hr>

  <h2>An HTML Learning Roadmap</h2>

  <p>Here is the order in which to learn HTML properly:</p>

  <p>
    <del>At first I tried to memorize every tag</del>,
    but in practice knowing only the 20 to 30 tags used most often is enough.
    What matters is <ins>the ability to look things up when you need them</ins>.
  </p>

  <h3>A Step-by-Step Learning Plan</h3>

  <p>
    <strong>Step 1</strong>: Understand the basic structure of HTML<br>
    <strong>Step 2</strong>: Learn the text-related tags<br>
    <strong>Step 3</strong>: Use links and images<br>
    <strong>Step 4</strong>: Build tables and forms<br>
    <strong>Step 5</strong>: Structure pages with semantic HTML
  </p>

  <hr>

  <h2>Wrapping Up</h2>

  <p>
    HTML may feel difficult at first,
    but with steady practice it <mark>becomes second nature</mark>.
  </p>

  <p>
    The most important thing is <em>writing code yourself</em>.
    Don't stop at reading this article—open your editor right now and create an HTML file!
  </p>

  <blockquote>
    <p>
      "A journey of a thousand miles begins with a single step."
    </p>
    <footer>— <cite>Korean Proverb</cite></footer>
  </blockquote>

  <hr>

  <p>
    <i>This article is a blog post written as an example for an HTML lesson.</i><br>
    <small>© 2026 John Doe. All rights reserved.</small>
  </p>

</body>
</html>

Assignment

Lesson 02 Assignment — Create a Page Reviewing Your Favorite Book or Movie

Assignment Goal

Using the various text tags you learned in this lesson,
create a review page for your favorite book or movie.

Requirements Checklist

Basic Structure

  • Write the basic HTML5 structure (DOCTYPE, html, head, body)
  • Put the review page title in <title> (e.g., "My Favorite Book Review")
  • Use <h1> for the book/movie title

Using Emphasis Tags

  • Use the <strong> tag at least twice (emphasize important content)
  • Use the <em> tag at least twice (express stress)
  • Highlight key content with the <mark> tag

Using Quotation Tags

  • Quote a famous line or passage from the book/movie with <blockquote>
  • Indicate the book/movie title or the author/director with <cite>
  • Use at least one short quotation with <q>

Using Code/Formatting Tags

  • Use <br> line breaks appropriately (addresses, poems, etc.)
  • Separate sections with <hr> (at least 2)

Other Tags

  • Use the <del> or <ins> tag (e.g., a revised rating, changed information)
  • Use the <sup> or <sub> tag (footnote numbers, chemical formulas, etc.)

Content to Include on the Review Page

Write the page including all of the following items:

  1. Basic Book/Movie Information

    • Title, author (director), publication year (release year), genre

  2. Plot Summary (written with p tags)

    • Summarize in 2–3 paragraphs without spoilers

  3. Memorable Lines or Passages (use blockquote)

  4. My Review

    • What I liked, what was disappointing
    • Star rating (e.g., ★★★★☆ - 4 out of 5)

  5. Who This Is For

    • The people you would recommend this book/movie to

Hints

Hint 1: Expressing a star rating 
<!-- Footnote-style star rating using the sup tag -->
<p>My rating: ★★★★☆ (4 out of 5<sup>*</sup>)</p>
<p><sup>*</sup> This may vary depending on personal taste.</p>

<!-- Expressing a rating change with del and ins -->
<p>Original rating: <del>3 stars</del> → <ins>4 stars</ins> (rating revised after a rewatch)</p>
Hint 2: Using blockquote correctly 
<blockquote>
  <p>"Write the most memorable sentence from this book here."</p>
  <footer>
    — <cite>Book Title</cite>, Author Name, p. 123
  </footer>
</blockquote>
Hint 3: Using line breaks correctly 
<!-- br is a simple line break. Suitable for poems, addresses, etc. -->
<p>
  Publisher: Penguin Books<br>
  Publication year: 2020<br>
  Number of pages: 384<br>
  Genre: Fiction, Science Fiction
</p>

<!-- The correct way to separate a new paragraph is with the p tag -->
<p>First paragraph</p>
<p>Second paragraph</p>
Hint 4: Example review page structure 
<h1>[Book Title]</h1>

<p>Author: ... | Publication year: ... | Genre: ...</p>

<hr>

<h2>Plot</h2>
<p>Content...</p>

<hr>

<h2>Memorable Passages</h2>
<blockquote>
  <p>"Famous quote..."</p>
  <footer>— <cite>Book Title</cite></footer>
</blockquote>

<hr>

<h2>My Review</h2>
<h3>What I Liked</h3>
<p>...</p>
<h3>What Was Disappointing</h3>
<p>...</p>
<p>Rating: ★★★★☆</p>

<hr>

<h2>Recommended For</h2>
<p>...</p>

File Name

Save it as article.html.

Grading Criteria

Item Points
Basic HTML structure 10 points
Correct use of strong and em 15 points
Use of blockquote, cite, q 20 points
At least 2 of mark, del, ins 15 points
Appropriate use of br and hr 10 points
Use of sup or sub 10 points
Substantive content (all 5 review items included) 20 points
Total 100 points
Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

article.htmlHTML
<!DOCTYPE html>
<!-- HTML5 document declaration -->
<html lang="en">
<!-- lang="en": tells search engines and screen readers that this is an English document -->

<head>
  <meta charset="UTF-8">
  <!-- UTF-8: character encoding setting that keeps text from breaking -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Little Prince Review - A Book I Love</title>
  <!-- title: the name shown on the browser tab -->
</head>

<body>

  <!-- ====== Page main title ====== -->
  <h1><cite>The Little Prince</cite> - A Fairy Tale Every Adult Should Read</h1>
  <!-- h1: the most important heading on the page -->
  <!-- cite: used to indicate the title of a book (displayed in italics) -->

  <!-- ====== Basic information (line breaks with br) ====== -->
  <p>
    Author: Antoine de Saint-Exupéry<br>
    <!-- br: a simple line break, not a new paragraph. Suitable for addresses and list-style information -->
    Original title: <i>Le Petit Prince</i><br>
    <!-- i: used to express foreign words or technical terms (not semantic emphasis) -->
    Publication year: 1943<br>
    Genre: Novel, fairy tale, philosophy<br>
    Number of pages: about 96
  </p>

  <!-- hr: a horizontal rule that visually separates a change of topic -->
  <hr>

  <!-- ====== Plot ====== -->
  <h2>Plot</h2>

  <p>
    A pilot who crash-lands in the Sahara Desert meets a <em>mysterious boy</em>.
    <!-- em: expresses stress or intonation. Especially emphasizes "mysterious boy" -->
    The boy was the <strong>little prince</strong>, who said he came from a small star called B-612.
    <!-- strong: means the content is important. Emphasizes the protagonist's name -->
  </p>

  <p>
    Leaving his own star, the little prince travels to several stars, where he meets
    a <em>king</em>, a <em>vain man</em>, a <em>drunkard</em>, a <em>businessman</em>, a <em>lamplighter</em>, and a <em>geographer</em>.
    <!-- em: emphasizes each character as they are listed -->
    At the end of that journey he arrives on Earth, where a fox teaches him the meaning of <strong>"taming"</strong>.
  </p>

  <p>
    On the surface this story is a fairy tale,
    but in reality it carries a deep philosophical message about
    <mark>the purity and the essential things that adults have lost sight of</mark>.
    <!-- mark: emphasizes the core theme as if highlighting it -->
  </p>

  <hr>
  <!-- hr: divider for the second section -->

  <!-- ====== Memorable passage ====== -->
  <h2>Memorable Passage</h2>

  <p>The most famous line in this book is, without a doubt, what the fox says:</p>

  <blockquote cite="https://www.example.com/little-prince">
    <!-- blockquote: a long quotation taken from another source -->
    <!-- cite attribute: the URL of the quotation's source (not displayed on screen) -->
    <p>
      "What is essential is invisible to the eye.<br>
      You can only see it clearly with your heart."
    </p>
    <footer>
      — <cite>The Little Prince</cite>, the fox's words, Saint-Exupéry
      <!-- footer: used to indicate the source within a blockquote -->
      <!-- cite: indicates the title of a work -->
    </footer>
  </blockquote>

  <p>
    When the pilot first met the little prince,
    he heard the words <q>Please draw me a sheep</q>.
    <!-- q: a short inline quotation. The browser adds quotation marks automatically -->
    That simple request was the beginning of this great story.
  </p>

  <hr>

  <!-- ====== My review ====== -->
  <h2>My Review</h2>

  <!-- Expressing a change from the original rating after rereading -->
  <p>My rating: <del>★★★★☆ (4 stars)</del> → <ins>★★★★★ (5 stars)</ins> (rating revised after rereading)</p>
  <!-- del: shows deleted or previous information with a strikethrough -->
  <!-- ins: shows newly added or revised information with an underline -->

  <p>A footnote<sup>1</sup> explains the reasoning behind this rating in more detail.</p>
  <!-- sup: superscript. Used to mark footnote numbers -->

  <h3>What I Liked</h3>

  <p>
    The greatest strength of this book is its <strong>short but deeply resonant</strong> impact.
    The message packed into fewer than 100 pages is so rich
    that you discover a new meaning every time you read it.
  </p>

  <p>
    In particular, the explanation of <mark>the concept of "taming"</mark> is an insight that pierces to the essence of relationships.
    As the fox says, a true relationship means becoming <em>special to each other</em>.
  </p>

  <h3>What Was Disappointing</h3>

  <p>
    The first time I read it, I honestly thought, <q>Why is this so famous?</q>
    But when I read it again a few years later, it felt like a completely different book.
    <!-- q: a short inline quotation (quoting my own past thought) -->
  </p>

  <p>
    What is disappointing is that it contains many <em>rather philosophical and abstract</em> expressions,
    which may make it hard for children to fully understand.
    This is a book whose depth you can only feel once you read it as an adult.
  </p>

  <hr>

  <!-- ====== Who this is for ====== -->
  <h2>Recommended For</h2>

  <p>
    I strongly recommend this book <strong>to the following people</strong>:
  </p>

  <ul>
    <li>Adults who are worn out by daily life and want to reconsider <em>the meaning of life</em></li>
    <li>Those who want to encounter complex philosophy through <strong>simple, beautiful sentences</strong></li>
    <li>Those looking for a <mark>short but deep book</mark> they can read in an hour</li>
    <li>Those who want an introduction to French literature</li>
  </ul>

  <hr>

  <!-- ====== Chemistry/math examples (using sub and sup) ====== -->
  <h2>Science Lessons from the Book</h2>

  <p>
    The <strong>asteroid B-612</strong> where the little prince lives has volcanoes.
    The volcanoes mainly erupt sulfur dioxide (SO<sub>2</sub>) and carbon dioxide (CO<sub>2</sub>).
    <!-- sub: subscript. Used to express chemical formulas -->
  </p>

  <p>
    If the asteroid's radius is r, its surface area is 4πr<sup>2</sup> and its volume is (4/3)πr<sup>3</sup>.
    <!-- sup: superscript. Used to express exponents in mathematical formulas -->
  </p>

  <hr>

  <!-- ====== Footnote ====== -->
  <h2>Footnote</h2>
  <p><sup>1</sup> On my first reading I gave it 4 stars, but when I reread it five years later I came to understand the book's depth better and revised my rating to 5 stars. This is a special book that reads differently depending on the reader's life experience.</p>
  <!-- sup: marks the footnote number reference -->

  <hr>

  <p>
    <i>This review is an example solution for the Lesson 02 text elements assignment.</i>
    <!-- i: used for supplementary explanations or technical terms -->
  </p>

</body>
</html>

Learn this lesson with a mentor

Work through the Build Your Homepage series on your own, or join a guided cohort at our Pitampura campus and online.

Enroll nowStage overview
Call NowEnroll Now