HTML Text Semantics

Basic

HTML text semantics let you describe what words, phrases, quotations, code, dates, annotations, and line breaks mean instead of using visual formatting as a substitute for meaning. The right element gives the content a purpose that browsers, assistive technology, developers, and other software can understand.

1. Start with meaning, not appearance

HTML has several elements that may look similar in a browser but communicate different meanings. For example, <strong> marks strong importance, <em> marks stress emphasis, and <b> draws attention without adding importance. Their default appearance is not the reason to choose them.

<p>Read the <strong>important</strong> warning.</p>
<p>Please read <em>this</em> word with stress.</p>
<p>Search results highlight the <b>matching</b> term.</p>

<p><?>Do not delete this file.</strong></p>

The specification, translated

The HTML Standard describes these elements by the meaning they add to text, not by the way browsers usually draw them. That is the key to the whole family: choose the element because of what the words are doing in the document, then use CSS if you need a different visual treatment.

A useful way to read the specification is to ask three questions: What does this element mean? What kind of content can it contain? What special attributes or relationships change that meaning? For example, <strong> means strong importance, <em> means stress emphasis, <mark> marks text as relevant in the current context, <q> marks a short quotation, and <time> identifies temporal content that can also have a machine-readable value.

Some rules are deliberately narrower than their visual appearance suggests. <small> means a side comment or small print, not simply text that should be smaller. <b> draws attention without adding importance. <i> marks text set apart for a reason such as a technical term or alternate voice, not merely text that should be italic. <sub> and <sup> are for typographical conventions that contribute to meaning, not for making text look lower or higher.

The specification also distinguishes human-readable text from machine-readable data. <data> pairs visible content with a machine-readable value, while <time> is the specialized choice for dates, times, durations, and related temporal values. The important authoring rule is simple: the markup should describe the content's meaning, not the browser's default styling.

CSS can make any of these elements look different. Changing the visual treatment does not change the underlying HTML meaning, so do not choose an element merely because its default stylesheet happens to look right.

2. Strong importance, emphasis, and attention

<strong> communicates strong importance, seriousness, or urgency. It can be nested when the content contains different levels of importance. <em> communicates stress emphasis; nesting <em> can express a further level of emphasis.

<b> is different: it draws attention to content without saying that the content is especially important. It is useful for things such as keywords or other text that needs attention without the meaning of <strong>.

<p><strong>Do not delete this file.</strong></p>
<p>I said <em>this</em> value, not the other one.</p>
<p>The search result contains the <b>exact</b> phrase.</p>

?

3. Italic, marked, small, and no-longer-relevant text

<i> represents text set apart from the surrounding prose for a reason such as a technical term, taxonomic name, idiomatic phrase, or another alternate voice. It does not simply mean “italic text.”

<mark> marks text because it is relevant to the reader in the current context, such as a search match. <small> represents side comments or small print, such as legal or copyright text. <s> represents information that is no longer accurate or relevant; it is not the element for recording a document edit.

<p>The species name is <i>Homo sapiens</i>.</p>
<p>Search found <mark>semantic HTML</mark> in this paragraph.</p>
<p><small>Copyright information appears here.</small></p>
<p>The old price was <s>$49</s>; the current price is $39.</p>

4. Annotations are not the same as edits

Use <u> when the text carries a non-textual annotation, such as marking a proper name or a spelling-related annotation according to the surrounding convention. It is not a general-purpose underline element.

For actual document edits, use <del> for content that has been deleted and <ins> for content that has been inserted. These elements can also use datetime information to describe when the change occurred.

<p>Please review the <u>unfamiliar term</u> in this example.</p>
<p>The old value was <del>10</del>; the new value is <ins>12</ins>.</p>

5. Quotations and cited works

Use <q> for a short inline quotation. Use <blockquote> for an extended quotation that forms its own block of quoted content. A quotation can carry a cite attribute containing a URL for its source, but that attribute is not a substitute for visible attribution when readers need to know who said something.

<cite> identifies the title of a creative work, such as a book, film, article, song, or other work. It does not mean “the person who wrote this” or “the URL where I found this.”

<p>She described semantic HTML as <q>meaning before styling</q>.</p>

<blockquote cite="https://example.com/source">
  <p>Quoted material can form its own extended passage.</p>
</blockquote>

<p><cite>HTML and CSS</cite> is the title of a work.</p>

6. Code and computer-related text

HTML has a family of elements for different kinds of computer-related text. Use <code> for a short fragment of code, <pre> for preformatted text where whitespace is significant, <kbd> for user input, <samp> for sample output from a program, and <var> for a variable or placeholder in a mathematical or programming context.

<p>Run <code>npm test</code> from the project directory.</p>

<pre><code>const total = price * quantity;</code></pre>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The program prints <samp>Build complete.</samp></p>
<p>The formula uses <var>n</var> items.</p>

When source code is shown in a <pre> block, placing <code> inside it makes the intended code semantics explicit. Preserve the source text itself rather than inserting visual spacing with repeated HTML elements.

7. Definitions, abbreviations, and machine-readable values

<dfn> marks the term being defined in its surrounding definition context. <abbr> marks an abbreviation or acronym and can provide its expanded form through the title attribute when that is useful to the reader.

<data> connects human-readable content with a machine-readable value. For dates and times, prefer <time>, because it has semantics specifically designed for temporal values.

<p><dfn>Semantic HTML</dfn> uses elements according to their meaning.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> defines document structure.</p>
<p><data value="sku-1842">Foxipa Keyboard</data></p>

8. Dates and times belong in <time>

Use <time> for a specific period in time, such as a date, time, duration, or another value that can be represented in the element’s supported datetime format. The visible text can be written for people while the datetime attribute provides a machine-readable value.

<p>Published on <time datetime="2026-09-22">September 22, 2026</time>.</p>
<p>The meeting starts at <time datetime="14:30">2:30 PM</time>.</p>

Do not add <time> merely because text contains a number. Use it when the content actually represents a temporal value.

9. Subscripts and superscripts

<sub> and <sup> are for text that is conventionally displayed as subscript or superscript for typographical reasons. They are useful for mathematical notation, chemical formulas, ordinal notation, and similar content when the typographic position itself is part of the meaning.

<p>Water is H<sub>2</sub>O.</p>
<p>The area is x<sup>2</sup>.</p>

10. Bidirectional text and Ruby annotations

<bdi> isolates a span of text from the surrounding bidirectional text algorithm. This is especially useful when text such as a user name or other dynamically supplied value may have a direction different from the surrounding sentence.

<bdo> explicitly overrides the text direction for its contents. Use it only when an intentional direction override is required; ordinary multilingual text is usually better handled with the document or element direction and appropriate language information.

<ruby> represents ruby annotations, often used for pronunciation or other annotations alongside East Asian text. The <rt> element contains the annotation itself. The browser can then represent the base text and annotation as a related unit instead of treating the annotation as unrelated prose.

<p>Welcome, <bdi>علي</bdi>.</p>
<p><bdo dir="rtl">هذا النص يعرض من اليمين إلى اليسار.</bdo></p>
<p><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby></p>

11. Line breaks and thematic breaks

<br> creates a line break within the same flow of text. It is appropriate when the line division itself matters, such as in poetry or an address. It is not a general spacing mechanism.

<hr> represents a thematic break between paragraphs or other pieces of content. It communicates a change of topic, scene, or other thematic boundary; it is not simply a decorative horizontal rule.

<wbr> marks a word-break opportunity. It tells the browser where it may break a long word or token if normal line-breaking rules would not otherwise provide a suitable opportunity.

<p>12 Market Street<br>Alexandria<br>Egypt</p>
<hr>
<p>The next section changes topic.</p>
<p>VeryLong<wbr>IdentifierThatMayNeedToBreak</p>

12. Use generic <span> only when no better meaning exists

<span> is a generic inline container. It has no inherent semantic meaning. Use it when you genuinely need to group phrasing content for a purpose such as styling, scripting, or sharing attributes and no more specific HTML element describes the content.

<p>Use a semantic element when one exists: <strong>important</strong> rather than <span class="bold">important</span>.</p>

13. Choosing between similar elements

• Need strong importance? Use <strong>. Need stress emphasis? Use <em>.

• Need attention without importance? Consider <b>.

• Need text that is no longer relevant? Use <s>. Need an actual document edit? Use <del> or <ins>.

• Need a short quotation? Use <q>. Need an extended quotation? Use <blockquote>.

• Need the title of a creative work? Use <cite>.

• Need a short code fragment? Use <code>. Need preserved whitespace for preformatted material? Use <pre>, commonly with <code> for source code.

• Need a machine-readable date or time? Use <time>. Need another machine-readable value associated with visible content? Consider <data>.

• Need a generic inline wrapper because no semantic element fits? Use <span>.

14. Semantics and CSS work together

Semantic HTML does not prevent visual design. The semantic element communicates what the content means; CSS controls typography, spacing, color, borders, and layout. This separation lets the same meaning remain useful when the presentation changes, when styles are unavailable, or when assistive technology exposes the document structure.

<p class="lead"><strong>Important:</strong> semantic markup and visual design are separate concerns.</p>

15. A practical text-semantics checklist

• Choose elements according to meaning rather than their default appearance.

• Use CSS when the change is purely visual.

• Use <strong>, <em>, and <b> for their distinct meanings rather than as typography shortcuts.

• Keep quotations, edits, code, dates, annotations, and machine-readable values semantically identifiable.

• Use <br> only when a line break is part of the content, not as a spacing tool.

• Use <hr> for a thematic boundary, not as decoration.

• Use <span> only when no more meaningful inline element fits.

• Check multilingual and bidirectional content with the appropriate language and direction semantics.

Once these distinctions become familiar, HTML text stops being a collection of formatting tags and becomes a vocabulary for describing content. That vocabulary is the foundation on which accessibility, search, browser behavior, and maintainable styling can build.