Chapter 4: Text Formatting and Semantic HTML

Overview

Text formatting is essential in HTML to enhance the readability and structure of content. HTML5 also introduces several semantic elements that provide meaning to the structure of a webpage, making it more accessible and SEO-friendly.

Text Formatting Elements

HTML provides a variety of elements to format text, making it bold, italic, underlined, etc.

Bold Text

• <b>: Used to make text bold. It does not carry any semantic meaning.
• <strong>: Used to indicate strong importance, seriousness, or urgency. Text is displayed in bold.

<b>This text is bold.</b> <strong>This text is strong.</strong>

Italic Text

• <i>: Used to italicize text. It does not carry any semantic meaning.
• <em>: Used to emphasize text. Text is displayed in italics and has semantic meaning, indicating emphasis.

<i>This text is italic.</i> <em>This text is emphasized.</em>

Underlined Text

• <u>: Underlines text. It is generally avoided for regular text because underlining is often reserved for links.

<u>This text is underlined.</u>

Strikethrough Text

• <s>: Used to indicate that the text is no longer relevant or accurate (e.g., old prices).
• <del>: Represents deleted or removed content.

<s>This text is struck through.</s> <del>This text is deleted.</del>

Small Text

• <small>: Decreases the font size of the text, often used for fine print.

<small>This text is smaller.</small>

Superscript and Subscript

• <sup>: Raises text slightly above the baseline, commonly used for footnotes or exponents.
• <sub>: Lowers text slightly below the baseline, commonly used for chemical formulas or mathematical indices.

E = mc<sup>2</sup> H<sub>2</sub>O

Semantic HTML Elements

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way. These elements help improve the structure, accessibility, and SEO of a webpage.

<header>

Defines the header of a document or section. It typically contains introductory content, such as the logo, navigation links, and search forms.

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<nav>

Defines a set of navigation links. It is used to group links for easy navigation across the site.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section>

Represents a standalone section of content, which typically has its own heading. It is used to group related content together.

<section>
  <h2>About Us</h2>
  <p>We are a company that values excellence.</p>
</section>

<article>

Represents a self-contained piece of content, such as a blog post, news article, or forum post. Each <article> can be distributed independently of the rest of the content.

<article>
  <h2>Breaking News</h2>
  <p>This is an article about breaking news.</p>
</article>

<aside>

Defines content that is related to the main content but is tangential, such as sidebars, advertisements, or related links.

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#link1">Link 1</a></li>
    <li><a href="#link2">Link 2</a></li>
  </ul>
</aside>

<footer>

Defines the footer of a document or section. It typically contains information about the author, copyright details, and links to related documents.

<footer>
  <p>&copy; 2024 My Website</p>
  <p><a href="#privacy">Privacy Policy</a></p>
</footer>

<main>

Represents the main content of the document. Only one <main> element is allowed per document, and it should be unique and central to the document's purpose.

<main>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of the webpage.</p>
</main>

<figure> and <figcaption>

• <figure>: Represents self-contained content, such as images, diagrams, or code snippets.
• <figcaption>: Provides a caption for the content within the <figure> element.

<figure>
  <img src="image.jpg" alt="An example image" />
  <figcaption>Figure 1: An example image.</figcaption>
</figure>

Example: Semantic Layout

Here's an example of how these semantic elements can be combined to create a structured webpage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Semantic HTML Example</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section>
        <h2>Welcome</h2>
        <p>Welcome to my website where you can learn about various topics.</p>
      </section>

      <article>
        <h2>Latest Article</h2>
        <p>
          This is the latest article on our website. Stay tuned for more
          updates!
        </p>
      </article>

      <aside>
        <h3>Related Articles</h3>
        <ul>
          <li><a href="#article1">Article 1</a></li>
          <li><a href="#article2">Article 2</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Explanation:

• <header>: Contains the main heading and navigation for the site.
• <main>: Contains the primary content of the page, including sections and articles.
• <aside>: Provides additional related content or links.
• <footer>: Contains the footer information, such as copyright details.