Skip to Main Content

Writing Meaningful Web Content with Semantic HTML

Typically, in a word document, writers bold or italicize text to add emphasis to the copy.

When producing web content, HTML elements define the structure, purpose and intended meaning of a page's web content.

Main Takeaways

  • Use HTML elements to define the structure and meaning of a web page's content to make it easier for users to understand.
  • Know the purpose of each element to understand when to use it and to ensure the content can be accessed by assistive technologies.
  • Use the correct element to ensure the content communicates the intended meaning.

Here are some benefits of using semantic HTML:

  • It allows UX writers and developers to add meaning to content so search engines, screen readers and web browsers can understand it.
  • It improves user experience. It's easier for engineers to understand and to develop with.
  • It helps create faster, responsive, and better mobile user experiences. It's easier to make responsive, have reduced file size, and load faster.
  • It helps web pages get better rankings. Search engines give more importance to those that have them.

Table of Contents

HTML Elements

HTML elements wrap content and describe meaning, structure, or context to web browsers, developers, and assistive technologies.

For more information, visit Mozilla's Developer Documentation - HTML elements.

As a UX Writer, it's important to:

  • Understand what is the purpose of the enclosed text.
  • Know what element to use depending on the purpose of the text.
  • Ensure we are communicating the intended meaning of the enclosed text to the users.

Creating Elements Using Tags

Use HTML tags to create an element. These tags represent the start and end of a piece of content.

An element consists of three main parts:

  • An opening tag that represents the start of the paragraph element.
  • Content within the tags.
  • A closing tag that represents where the element ends.

Example

<p>Download the Rocket Homes mobile application on your mobile device to start looking for your dream home.</p>
  • The opening tag <p>represents the start of the paragraph element.
  • The content is the enclosed text inside <p></p> paragraph the tags: "Download the Rocket..."
  • The closing tag </p> represents where the paragraph element ends.

Common HTML Elements

As a general rule, avoid using bold or italic elements because they do not add semantic meaning.

  • The strong element <strong></strong>, gives extra importance to the element's contents.
  • The emphasis element <em></em>, gives a stressed emphasis to the element's contents.
  • The bold element <b></b> , draws attention to the element's contents, without extra importance.
  • The italic or idiomatic text element <i></i>, defines a part of text in an alternate voice or mood.

Semantic Elements

When web elements are meaningful and contextual, that means it's semantic. Semantic elements inform assistive technologies such as screen readers of an emphasis that might not be visually accessible to all users.

Do not rely on HTML to create a visual change, collaborate with developers to correctly emphasize content.

Use the strong and the emphasis elements to add semantic meaning.

To view a list of all the HTML elements available to add semantic meaning to copy, refer to MDN’s Semantic element list.

The Strong Element

The strong element indicates strong importance, seriousness, or urgency of the enclosed text inside the <strong></strong> tags.

By default web browsers, render the contents inside strong tags in bold type.

Usage

  • Referencing the name of a page
  • Representing strong importance of it's contents
  • Adding importance or urgency to pieces of a sentence

Examples

  • Check your To Do List items for new tasks.
    • Check your <strong>To Do List</strong> items for new tasks.
  • You can change your communication preferences on My Profile.
    • You can change your communication preferences on <strong>My Profile</strong>.
  • Your payment is due on September 22, 2021.
    • <strong>Your payment is due</strong> on September 22, 2021.
  • Remember to bring your driver’s license to your closing appointment.
    • Remember to bring your <strong>driver’s license</strong> to your closing appointment.

Strong vs Bold vs CSS Styling

The bold element, italic element and CSS styling are purely presentational.

  • Use the strong element <strong></strong> to communicate importance or urgency.
  • Use the bold element <b></b> to bring attention to text without indicating that it's more important.
    • Use for:
      • Drawing the reader's attention to the elements contents, which aren't of special importance
      • Keywords in a summary and for product names in a review
  • Use CSS (Cascade Styling Sheet) to style or decorate text. CSS styling does not add semantic meaning to content, unlike the strong element.

The Emphasis Element

Use the emphasis element to give "stressed emphasis" to the enclosed text inside the <em></em> tags, in the same way verbal stress works.

  • By default, web browsers render the contents inside the emphasis tags as italic type.

  • A screen reader will pronounce the words inside the emphasis element <em></em> tags with an emphasis, using verbal stress.

As a UX Writer, it is important to know when to apply emphasis to text because it can change the meaning of the sentence.

Usage

  • Words that have a stressed emphasis compared to surrounding text.
    • For example: Our family loves spending summers on the beach.
  • Changing the meaning of a sentence.
    • For example: We found the perfect house, let's put an offer now !
  • Referencing a specific instance of microcopy within the web page that users can take action on.
    • For example: Find Brokers Near Me to connect with a broker in your community.

Examples

  • Sort by Submitted to see the loans you’ve already completed.
    • Sort by <em>Submitted</em> to see the loans you’ve already completed.
  • Select I don’t have a preference from the dropdown if you change your mind.
    • Select <em>I don’t have a preference </em> from the dropdown if you change your mind.

Emphasis vs Italic

  • Use the emphasis element <em></em> to indicate stress emphasis.
  • Use the italic element <i></i> for text that is set off from the normal prose, like an alternate tone or mood.
    • Use for:
      • Technical terms
      • Transliterations
      • Taxonomical designations, like: "Homo Sapiens"

Accessibility

Use semantic HTML to ensure digital experiences are inclusive to all users and accessible by assistive technologies.

Our guides are not all-inclusive. Refer to the Web Content Accessibility Guidelines (WCAG 2.1, Level AA)- Semantic Elements for more insights.