I element

As explained in Design for Developers

The HTML i element marks text set apart from the surrounding text without asserting added emphasis or importance.

The HTML i element marks text set apart from surrounding content without adding emphasis or importance. Use it for an alternate voice or mood, or for idiomatic, technical, or taxonomical text. section 8.1.3

Choose the markup according to the text’s purpose:

• Use em when italics communicate emphasis. section 8.1.3
• Use i when the text is distinct in voice or meaning, such as technical or taxonomical language. section 8.1.3
• Use a generic HTML element and CSS font-style: italic when italics are purely decorative. section 8.1.3

Figure 8.10 Italics aren’t just slanted; they have design elements added that make the slant feel more cursive and natural.

Compare true italics with simple slanted text before choosing a typographic treatment. section 8.1.3

How Design for Developers covers it

How deep it goes

Explains the semantic distinction from em and CSS styling, stopping short of implementation detail beyond the basic declaration.

Examples

Uses alternate moods or voices, idiomatic expressions, technical terms, and taxonomical text as examples.

What it assumes

Teaches the distinction between emphasis, semantic separation, and visual styling without assuming typography vocabulary.

What you can do after

Apply semantic HTML or CSS according to whether italics convey meaning or serve a purely stylistic purpose.

How it connects

Connects semantic HTML with emphasis, accessibility, italics, oblique styles, and CSS.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Build a Website with ChatGPTThe i element is an HTML element that marks text set apart from the surrounding prose by a different voice, mood, or semantic role.

Compare how 2 books explain i element →

Related concepts

• em elementcontrasts with · The em element is an HTML element that semantically marks text for emphasis or stress, conventionally rendered in italics by browsers.
• alt-textimplements · Alt text is a text alternative associated with non-text content that conveys its meaningful content or purpose to people who cannot perceive it visually or access it directly.
• italicsproduces · Italics are a typographic style with slanted letterforms used to emphasize or visually distinguish text.
• text-level elementkind of · A text-level element is an inline HTML element that marks semantics or presentation for a span of text.
• HTML tagequivalent to · An HTML tag is angle-bracket-delimited markup that identifies, structures, or marks the boundary of an element in an HTML document.

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.