Skip to content
HTML&CSS

Text Formatting and Semantics

Welcome to the fourth section of our HTML and CSS course! In the previous section, we established the core structure of an HTML document and learned about basic elements like headings and paragraphs. Now, we’re going to dive deeper into how to format your text to convey specific meanings and how to use more advanced HTML5 elements to give structure and significance to your web page content.

Play

Video For This Section | Text Formatting and Semantics

HTML isn’t just about putting text on a page; it’s about giving that text meaning. This “meaning” is called semantics. When you use the correct HTML tag for a piece of content, you’re telling the browser, search engines, and assistive technologies (like screen readers for visually impaired users) what that content is, not just what it looks like.

Text Formatting Elements: Adding Meaning to Text

These elements allow you to highlight or modify text in ways that convey importance, emphasis, or other specific purposes.

Strong Importance: <strong>

The <strong> tag is used to indicate that its content has strong importance. Browsers typically render this text as bold.

This is normal text, but this part is important.

 
<p>This is normal text, but this part is <strong>important</strong>.</p>
  • Technical Detail: The <strong> element indicates that its content has strong importance, seriousness, or urgency. It’s a semantic element, meaning it conveys meaning rather than just visual presentation. While it typically renders as bold, its purpose is to mark content with higher semantic weight than <b> (which is purely for bold presentation).
  • Simple Words: Use <strong> when you want to tell the browser, “Hey, this word or phrase is really, really important!” It usually looks bold.

Emphasis: <em>

The <em> tag is used to add emphasis to text. Browsers typically render this text as italic.

I really want to learn web development!

 
<p>I <em>really</em> want to learn web development!</p>
  • Technical Detail: The <em> element represents stress emphasis of its content. Like <strong>, it’s a semantic element. While it usually renders as italics, its purpose is to convey a change in the meaning or tone of the sentence, rather than just visual styling (which <i> is used for).
  • Simple Words: Use <em> when you want to put a little extra “voice” or stress on a word, like when you’re speaking. It usually looks italic.

Underline: <u> (Generally Avoided for Text)

The <u> tag is used to underline text.

This is some underlined text.

 
<p>This is some <u>underlined text</u>.</p>
  • Why it’s Generally Avoided: While <u> exists, it’s generally discouraged for regular text on the web. Why? Because underlined text is the universal visual cue for a hyperlink (a clickable link). If you underline text that isn’t a link, users might mistakenly try to click it, leading to a confusing experience. If you just want a visual underline for decorative purposes, it’s better to use CSS.
  • Technical Detail: The <u> element historically represented text that should be stylistically offset, typically by being underlined. In HTML5, its primary use case is to represent a span of inline text which should be rendered in a way indicating that it has a non-textual annotation, such as labeling a misspelled word or a proper name in Chinese. For simple visual underlining, CSS text-decoration: underline; is preferred.
  • Simple Words: This draws a line under text. Be careful though! On the internet, anything underlined usually means it’s a clickable link, so avoid using this just for decoration on regular words.

Strikethrough: <s> or <del>

Both <s> and <del> can be used to display text with a strikethrough effect, meaning a line through the text.

  • <s>: Used for content that is no longer accurate or relevant but should not be deleted.
  • <del>: Used for content that has been deleted from the document. Often used with <ins> (inserted text) to show changes.

The old price was $20, now it's just $15!

Original text: This is the original sentence. This part was deleted. This part was inserted. 

<p>The old price was <s>$20</s>, now it's just <strong>$15</strong>!</p>
<p>
  Original text: This is the original sentence.
  <del>This part was deleted.</del>
  <ins>This part was inserted.</ins>
</p>
  • Technical Detail: The <s> element indicates that its content is no longer accurate or relevant. The <del> element represents a range of text that has been deleted from a document. Both typically render with a strikethrough, but <del> carries stronger semantic meaning of a removal from the document and can be paired with an optional cite attribute and datetime attribute for more detail on the change.
  • Simple Words: Both draw a line through text. Use <s> if the text is just outdated or wrong. Use <del> if the text was actually removed from a document and you want to show that change.

Blockquotes: <blockquote>

The <blockquote> element is used for content that is quoted from another source. It typically indents the quoted text.

The only way to do great work is to love what you do.

— Steve Jobs
 
<blockquote>
  <p>The only way to do great work is to love what you do.</p>
  <footer>— Steve Jobs</footer>
</blockquote>
  • Technical Detail: The <blockquote> element indicates that the enclosed text is an extended quotation. Browsers typically render blockquotes with indented margins, but this is a default style and can be changed with CSS. It implicitly implies a break from the surrounding text.
  • Simple Words: Use this for longer quotes that stand out from your regular text, like a famous saying or a paragraph copied from a book. It usually makes the text appear indented.

Code: <code> and <pre>

These elements are used for displaying code snippets.

  • <code>: Used for a short fragment of computer code within a paragraph.
  • <pre>: Used for preformatted text, preserving spaces and line breaks exactly as typed. Often used in conjunction with <code> for longer code blocks.

To declare a variable in JavaScript, you can use `let myVariable = 10;`.


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

<p>To declare a variable in JavaScript, you can use `let myVariable = 10;`.</p>


<pre><code>
function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("World");
</code></pre>
  • Technical Detail: The <code> element represents a short fragment of computer code. By default, browsers render it in a monospace font. The <pre> element represents preformatted text. Text within <pre> elements is typically displayed exactly as written in the HTML source code, preserving whitespace and line breaks, and usually renders in a monospace font. Combining <pre> and <code> provides a semantic and visually distinct way to display blocks of code.
  • Simple Words: Use <code> for small bits of code, like a single command, right in your sentence. Use <pre> if you have a bigger chunk of code where you want all the spaces and lines to look exactly like you typed them.

Superscript/Subscript: <sup> and <sub>

  • <sup>: Renders text as superscript (smaller, raised text).
  • <sub>: Renders text as subscript (smaller, lowered text).

The chemical formula for water is H2O.

In mathematics, x2 means x squared.

 
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>In mathematics, x<sup>2</sup> means x squared.</p>
  • Technical Detail: The <sup> element renders text with a raised baseline, commonly used for footnotes, exponents, or ordinal indicators. The <sub> element renders text with a lowered baseline, typically used for chemical formulas, mathematical variables, or scientific notations.
  • Simple Words: <sup> puts text tiny and above the line (like numbers in math). <sub> puts text tiny and below the line (like numbers in chemistry).

Next Step: Let’s dive into Semantic Layouts: Semantic HTML Layout