Inline Text Semantic Elements

Learn about HTML inline text semantic elements that define meaning and structure for small chunks of content like text, code, emphasis, and formatting.

Loading...
Inline Text Semantic Elements

HTML Inline Text Semantic elements help define the purpose, meaning, or formatting of small chunks of content within text blocks. These elements are important for accessibility, SEO, and clean content structure.

They don't break the flow of content like block-level elements, making them ideal for highlighting, linking, quoting, or styling parts of text.

Common elements:

a

The <a> (anchor) HTML element, with href attribute, defines a hyperlink, which is used to link a web page to another web page, email address, a particular section in the same web page, or any other URL.

The href attribute indicates the link's destination.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <a href="https://google.com">Google</a>
  <a href="mailto:html@example.com">Email</a>
  <a href="tel:9876543210">Phone</a>
 </body>
</html>

If the <a> tag has no href attribute, then it will only be a placeholder for the hyperlink.

The linked page in the href attribute will display in the same browser window if you don't specify another target.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <!-- Opens the linked document in a new window or tab -->
  <a href="https://google.com" target="_blank">Google</a>
 
  <!-- Opens the linked document in the parent frame, tab, or window (if there are any nested windows). If there is no parent frame, then the page will display in the current window. -->
  <a href="https://google.com" target="_parent">Google</a>
 
  <!-- Opens the linked document in the same page (this is the default) -->
  <a href="https://google.com" target="_self">Google</a>
 
  <!-- Opens the linked document as top window in the browser window (if there are any nested windows) -->
  <a href="https://google.com" target="_top">Google</a>
 
  <!-- Opens the linked document in the named iframe -->
  <a href="https://google.com" target="framename">Google</a>
 </body>
</html>

The <a> HTML element includes both opening (<a>) and closing (</a>) tags.

Note: You can use CSS to style the hyperlink in your style.

abbr

The <abbr> HTML element represents an abbreviation or acronym of a phrase or longer word, for example, HTML, CSS, etc.

This tag can be used with the title attribute (optional), and the value of the title attribute will be shown when the mouse hovers over the content written between the <abbr> tag.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <abbr title="Hyper Text Markup Language">HTML</abbr>
 </body>
</html>

The <abbr> HTML element includes both opening (<abbr>) and closing (</abbr>) tags.

b

The <b> (bold) HTML element displays the text in bold format.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>This is used to write text in <b>bold</b> format. </p>
 </body>
</html>

The <b> HTML element includes both opening (<b>) and closing (</b>) tags.

strong

The <strong> HTML element is used to display text in bold.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>This text is <strong>important</strong>!</p>
 </body>
</html>

The <strong> HTML element includes both opening (<strong>) and closing (</strong>) tags.

b vs strong

Tag Meaning Purpose Accessibility
<b> Bold Visual styling only No emphasis
<strong> Strong importance Emphasizes importance semantically Screen readers give vocal emphasis

Use <strong> when the content is important or urgent.

bdi

The <bdi> (Bi-Directional Isolation) HTML element isolates the text written in it from its surrounding text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>This is <bdi>فقرة</bdi></p>
 </body>
</html>

You can style the <bdi> element as you want using CSS.

The <bdi> HTML element includes both opening (<bdi>) and closing (</bdi>) tags.

bdo

The <bdo> (Bi-Directional Override) HTML element is used to override the direction of the current text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <bdo dir="ltr">This text will go left to right. </bdo>
  <bdo dir="rtl">This text will go right to left. </bdo>
 </body>
</html>

dir is an HTML attribute that defines the direction. ltr means left to right, and rtl means right to left.

The <bdo> HTML element includes both opening (<bdo>) and closing (</bdo>) tags.

cite

The <cite> HTML element is used to specify the title of a creative work, such as quoted content, books, websites, paintings, etc.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <cite>This is cite element text.</cite>
 </body>
</html>

Note: A person's name is not the title of a work.

The <cite> HTML element includes both opening (<cite>) and closing (</cite>) tags.

code

The <code> HTML element displays a short fragment of computer code. By default, the monospace font style is used to display the text of the <code> element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>
   The HTML <code>code element</code> displays a short fragment of computer code.
  </p>
 </body>
</html>

The <code> HTML element includes both opening (<code>) and closing (</code>) tags.

data

The <data> HTML element links a given piece of content with a machine-readable translation. This element must include the value attribute. Without the value attribute, it would not be machine-readable.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <ul>
   <li><data value="200">Ok</data></li>
   <li><data value="404">Page not found</data></li>
   <li><data value="500">Internal server error</data></li>
  </ul>
 </body>
</html>

The <data> HTML element includes both opening (<data>) and closing (</data>) tags.

dfn

The <dfn> (definition) HTML element is used to represent the term that is defined within the context of a definition phrase or sentence in an HTML document. The nearby text is the definition of the term contained in the <dfn> element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p><dfn>HTML</dfn> is a markup language.</p>
 </body>
</html>

The <dfn> HTML element includes both opening (<dfn>) and closing (</dfn>) tags.

em

The <em> (emphasis) HTML element is used to display the text in Italic font-style.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>This is <em>emphasized</em> text.</p>
 </body>
</html>

The <em> HTML element includes both opening (<em>) and closing (</em>) tags.

i

The <i> (Idiomatic text) HTML element is used to display the text (such as a technical term, alternative mood or voice, a thought, etc.) in Italic font-style.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>This is <i>content</i> of i tag</p>
 </body>
</html>

The <i> HTML element includes both opening (<i>) and closing (</i>) tags.

i vs em

Tag Meaning Purpose Accessibility
<i> Italic Visual styling only (e.g. terms, thoughts) No emphasis
<em> Emphasis Indicates stress/emphasis in meaning Screen readers emphasize it

Use <em> for semantic emphasis.

kbd

The <kbd> HTML element defines a keyboard input.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text for Windows.</p>
   <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text for Mac OS.</p>
 </body>
</html>

The <kbd> HTML element includes both opening (<kbd>) and closing (</kbd>) tags.

mark

The <mark> HTML element is used to mark or highlight text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>This is a <mark>marked</mark> text.</p>
 </body>
</html>

The <mark> HTML element includes both opening (<mark>) and closing (</mark>) tags.

q

The <q> HTML element is used to define a short quotation.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>
   Lorem ipsum dolor sit amet. <q>This is a quotation.</q> Lorem ipsum dolor sit amet.
  </p>
 </body>
</html>

The <q> HTML element includes both opening (<q>) and closing (</q>) tags. The attribute for this element is cite.

rp

The <rp> (ruby parentheses) HTML element is used to provide fallback parentheses for browsers that do not support the display of ruby annotations using the <ruby> HTML element.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <ruby>
    こんにちは <rp>(</rp><rt>Kon'nichiwa</rt><rp>)</rp> 世界<rp>(</rp><rt>Sekai</rt><rp>)</rp>
  </ruby>
 </body>
</html>

The <rp> HTML element includes both opening (<rp>) and closing (</rp>) tags.

rt

The <rt> (ruby text) HTML element is used in conjunction with the <ruby> element to specify the pronunciation or phonetics of East Asian characters. This is commonly used in languages such as Japanese, Chinese, or Korean, where characters have multiple pronunciations or meanings.

The <rt> element is often used with the <rp> element, which specifies what to show when the browser does not support ruby annotations.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <ruby>
    こんにちは <rp>(</rp><rt>Kon'nichiwa</rt><rp>)</rp> 世界<rp>(</rp
><rt>Sekai</rt><rp>)</rp>
  </ruby>
 </body>
</html>

The <rt> HTML element includes both opening (<rt>) and closing (</rt>) tags.

ruby

The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <ruby>
   こんにちは <rp>(</rp><rt>Kon'nichiwa</rt><rp>)</rp> 世界<rp>(</rp
><rt>Sekai</rt><rp>)</rp>
  </ruby>
 </body>
</html>

The <ruby> HTML element includes both opening (<ruby>) and closing (</ruby>) tags.

s

The <s> HTML element is used to specify a text that is no longer correct, accurate, or relevant. The text will be displayed with a line through it.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>
   <s>30% off</s>
  </p>
  <p>20% off</p>
 </body>
</html>

The <s> HTML element includes both opening (<s>) and closing (</s>) tags.

samp

The <samp> HTML element is used to define a sample output from a computer program.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>Message:</p>
   <p><samp>Error: 404 Not found</samp></p>
 </body>
</html>

The <samp> HTML element includes both opening (<samp>) and closing (</samp>) tags.

small

The <small> HTML element is used to define a smaller text, such as copyright, side comments, and legal notices.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>This is normal text.</p>
   <small>This is smaller text.</small>
 </body>
</html>

The <small> HTML element includes both opening (<small>) and closing (</small>) tags.

span

The <span> HTML element is an inline container that marks up a part of a text or a part of a document. This element can easily be styled by CSS or manipulated with JavaScript using the class or id attribute. 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
  <style>
    span {
     color: red;
    }
  </style>
 </head>
 <body>
   <p>This text is <span>red</span> coloured.</p>
 </body>
</html>

The <span> HTML element includes both opening (<span>) and closing (</span>) tags.

sub

The <sub> HTML element is used to define a subscript text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>This text is <sub>subscript</sub> text.</p>
 </body>
</html>

The <sub> HTML element includes both opening (<sub>) and closing (</sub>) tags.

sup

The <sup> HTML element is used to define a superscript text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>This text is <sup>superscript</sup> text.</p>
 </body>
</html>

The <sup> HTML element includes both opening (<sup>) and closing (</sup>) tags.

time

The <time> HTML element is used to define a specific time.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>Open from <time>9:00</time> to <time>22:00</time> everyday.</p>
 </body>
</html>

The <time> HTML element includes both opening (<time>) and closing (</time>) tags. You can use the datetime attribute with this element to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar.

u

The <u> HTML element is used to display text that is different from normal text.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>This is <u>different</u> from normal text.</p>
 </body>
</html>

The <u> HTML element includes both opening (<u>) and closing (</u>) tags.

Tip: Avoid using the <u> element as it appears the same as a hyperlink, which can confuse the users.

var

The <var> HTML element is used to define a variable in programming or in a mathematical expression.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
  <p>
    The circumference of a circle is: 2 <var>π</var> <var>r</var>, where <var>r</var> is the radius of the circle.
  </p>
 </body>
</html>

The <var> HTML element includes both opening (<var>) and closing (</var>) tags.

wbr

The <wbr> (Word Break Opportunity) HTML element is used to specify a line break opportunity within an HTML document when the text is too long.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Elements</title>
 </head>
 <body>
   <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
necessitatibus dolore velit nostrum accusa maiores <wbr /> voluptates
error nihil atque iusto necessitatibus! Minus, nihil ab! Voluptatibus
laborum enim a tempora magni repellat dolore vel non corporis, voluptatem perferendis, cupiditate dicta numquam cumque reprehenderit deleniti eveniet nemo quam sunt? Perspiciatis ipsam quod distinctio consectetur quisquam delectus quo totam aut quas, itaque laboriosam <wbr /> ad. Exercitationem animi quia dolorem rem accusantium, eveniet quasi aperiamesse. Tempora atque in nostrum repellendus pr dolorem quis, voluptates veritatis obcaecati inventore veniam, tempore fugiat! Sit alias, sunt nesciunt perferendis magni, error temporibus ratione aliquam aperiam quisquam <wbr /> molestiae nulla vel hic quod soluta corrupti beatae oloribus nobis numquam nemo eligendi.voluptatum dolorum commodi numquam neque ea ducimus enim minima suscipit, sequi itaque hic!
   </p>
 
   <!-- You have to resize the browser window to check the effect of wbr -->
 
 </body>
</html>

The <wbr> HTML element does not include a closing tag.