Syntax
<strong>Important text</strong>
<em>Emphasized text</em>
<mark>Highlighted text</mark>Examples
Semantic Emphasis
Using strong and em for meaningful emphasis within a sentence.
<p>This step is <strong>absolutely required</strong> before continuing, and you should <em>really</em> double-check it.</p>Visual-Only Styling
Using b and i when bold/italic styling is needed without implying importance.
<p>The ship <i>Titanic</i> set sail in 1912. Its name was later used for <b>Titanic</b>, the 1997 film.</p>Highlighting Search Results
Using mark to highlight matched text, and small for a disclaimer.
<p>Results for "closures": JavaScript <mark>closures</mark> let inner functions access outer scope.</p>
<p><small>Prices shown do not include tax.</small></p>Best practices
- Use <strong>/<em> when the emphasis is semantically meaningful; use <b>/<i> for purely visual styling with no added meaning
- Do not use these elements just to make text bold or italic for decoration — prefer CSS font-weight/font-style for pure styling
- Use <mark> sparingly, for content that is genuinely relevant to what the user is currently looking for
- <small> is for fine print and side comments, not for making arbitrary text visually smaller
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<span>
The <span> element is an inline container used to group and style specific portions of text or inline elements. Unlike <div>, which is block-level, <span> doesn't break the flow of content. It's perfect for applying styles or manipulating specific words or phrases within a paragraph without affecting the surrounding content.<h1> - <h6>
The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.<br>, <hr>
These are two simple void (self-closing) elements for controlling text flow. <br> inserts a single line break within text, forcing the next content onto a new line without starting a new paragraph. <hr> represents a thematic break between paragraph-level content — visually rendered as a horizontal line, but semantically indicating a shift in topic, such as a scene change in a story or a new section.
The <span> element is an inline container used to group and style specific portions of text or inline elements. Unlike <div>, which is block-level, <span> doesn't break the flow of content. It's perfect for applying styles or manipulating specific words or phrases within a paragraph without affecting the surrounding content.<h1> - <h6>
The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.<br>, <hr>
These are two simple void (self-closing) elements for controlling text flow. <br> inserts a single line break within text, forcing the next content onto a new line without starting a new paragraph. <hr> represents a thematic break between paragraph-level content — visually rendered as a horizontal line, but semantically indicating a shift in topic, such as a scene change in a story or a new section.