Skip to content
HTML&CSS

Text Formatting and Semantics

Got it! Let’s continue with the next section on “Text Formatting and Semantics,” maintaining the same clear, professional, and easy-to-understand style, including technical explanations and simple analogies.

Here’s the document for the next section:

4. 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.

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 very important.

 
<p>This is normal text, but this part is <strong>very 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).

Semantic HTML5 Elements: Adding Structure and Meaning

Historically, developers often used generic <div> (division) elements for almost everything to create sections on a page. While <div> is still useful, HTML5 introduced new, more semantic elements that describe the purpose of the content they contain.

What is Semantic HTML? Semantic HTML means using HTML tags that convey the meaning or purpose of the content they enclose, rather than just how they should look. For example, using a <p> tag for a paragraph tells the browser, “this is a paragraph of text,” which is more meaningful than just styling a <div> to look like a paragraph.

  • Technical Detail: Semantic HTML elements provide context and meaning to their content, allowing user agents (browsers, search engines, screen readers) to better understand the structure and purpose of the page. This improves accessibility, SEO, and maintainability compared to using non-semantic elements like <div> and <span> exclusively for layout.
  • Simple Words: It’s like building a house and labeling each room: “This is the kitchen,” “This is the bedroom.” Instead of just having a bunch of unlabeled boxes, you give meaning to different parts of your webpage.

Here are some important semantic HTML5 elements:

  • <header>:
    • Purpose: Represents introductory content, usually containing a group of navigational aids or a company logo, title, and tagline. It’s often at the top of a page or a section.
    • Simple Words: The top part of your webpage or a specific section, like the banner at the top of a website with the logo and main menu.
  • <nav>:
    • Purpose: Contains navigation links, usually for major sections of the website.
    • Simple Words: Where you put all your main website links (like “Home,” “About Us,” “Contact”).
  • <main>:
    • Purpose: Represents the dominant content of the <body> of a document. There should only be one <main> element per document, and it should contain content that is unique to that document (i.e., not repeated headers, footers, sidebars).
    • Simple Words: This is the most important, unique content on your page – the main reason someone visited that specific page.
  • <article>:
    • Purpose: Represents a self-contained composition in a document, page, application, or site that is independently distributable or reusable. Examples include a forum post, a blog post, a news story, or a comment.
    • Simple Words: A complete, standalone piece of content, like a single blog post or news article.
  • <section>:
    • Purpose: Represents a standalone section of a document, typically with a heading. It’s a generic sectioning element when there isn’t a more specific semantic element to use (like <article> or <nav>).
    • Simple Words: A general grouping of related content within your page, usually with its own heading.
  • <footer>:
    • Purpose: Represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about its section, like authorship, copyright data, or related links.
    • Simple Words: The bottom part of your webpage or a specific section, often containing copyright info, contact details, or small links.
  • <aside>:
    • Purpose: Represents a portion of a document that is tangentially related to the content around it, often presented as a sidebar or pull-quote.
    • Simple Words: Content that’s related to the main topic but could stand alone, often appearing as a sidebar (like related articles or ads).

Why use them instead of just <div> for everything?

Using these semantic HTML5 elements offers significant advantages:

  1. Accessibility: Screen readers and other assistive technologies can better understand the structure of your page and convey that structure to users, making your site more usable for everyone. For example, a screen reader can tell a user, “You are now entering the main navigation area.”
  2. Search Engine Optimization (SEO): Search engines (like Google) use these semantic tags to better understand the content and hierarchy of your page, which can help improve your search ranking.
  3. Maintainability: Your code becomes much easier to read and understand for other developers (or your future self!). When you see <nav>, you immediately know it’s for navigation, rather than having to guess what a <div> with a generic class name might be.
  4. Developer Experience: It encourages better coding practices and makes your HTML cleaner and more organized.

While the visual appearance of these semantic elements might not be different from a <div> by default, their meaning is fundamentally different. Always choose the most semantically appropriate tag for your content. Use <div> only when no other semantic element accurately describes the content’s purpose.

That wraps up our discussion on text formatting and the crucial concept of semantic HTML. You now have a solid understanding of how to give meaning to your text and structure your pages intelligently. In the next section, we’ll learn how to add the fundamental building blocks of almost any website: links and images!

Next Step: Ready to make your pages interactive and visually rich? Click here to go to the next section: Link to Section 5: Links and Images (Placeholder)