HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
  • Insights
  • Verify Certificate
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML5andCSS3.org helps developers learn modern frontend skills with practical tutorials, production-ready snippets, and fast web tools built for everyday coding.

Quick Links

  • About Us
  • Contact Us
  • Privacy Policy
  • Copyright
  • Disclaimer

Top Tools

  • Try It Editor
  • JSON Formatter
  • CSS Minifier
  • HTML Minifier
  • Base64 Encoder / Decoder

Contact

  • business@html5andcss3.org
Newsletter

Learn at your own pace, practice with useful tools, and build websites you're proud of.

© 2011-2026 html5andcss3.org. All rights reserved.

How to Use

HTML Tags

HTML Tags

HTML <!DOCTYPE> TagHTML <html> TagHTML <head> TagHTML <title> TagHTML <body> TagHTML <base> TagHTML <link> TagHTML <meta> TagHTML <style> TagHTML <script> TagHTML <h1 to h6> TagHTML <hgroup> TagHTML <p> TagHTML <br> TagHTML <wbr> TagHTML <hr> TagHTML <pre> TagHTML <b> TagHTML <strong> TagHTML <i> TagHTML <em> TagHTML <mark> TagHTML <small> TagHTML <del> TagHTML <ins> TagHTML <sub> TagHTML <sup> TagHTML <u> TagHTML <blockquote> TagHTML <q> TagHTML <cite> TagHTML <abbr> TagHTML <address> TagHTML <bdo> TagHTML <bdi> TagHTML <a> TagHTML <nav> TagHTML <ul> TagsHTML <menu> TagHTML <ol> TagHTML <dl> TagHTML <img> TagHTML <figure> TagHTML <figcaption> TagHTML <audio> TagHTML <video> TagHTML <source> TagHTML <track> TagHTML <embed> TagHTML <object> TagHTML <param> Tag (Obsolete)HTML <picture> TagHTML <canvas> TagHTML <map> TagHTML <area> TagHTML <table> TagHTML <caption> TagHTML <thead> TagHTML <tbody> TagHTML <tfoot> TagHTML <tr> TagHTML <th> TagHTML <td> TagHTML <col> TagHTML <colgroup> TagHTML <form> TagHTML <input> TagHTML <textarea> TagHTML <button> TagHTML <select> TagHTML <selectedcontent> TagHTML <option> TagHTML <optgroup> TagHTML <label> TagHTML <fieldset> TagHTML <legend> TagHTML <datalist> TagHTML <output> TagHTML <meter> TagHTML <progress> TagHTML <header> TagHTML <footer> TagHTML <article> TagHTML <section> TagHTML <aside> TagHTML <main> TagHTML <search> TagHTML <details> TagHTML <summary> TagHTML <dialog> TagHTML <time> TagHTML <noscript> TagHTML <slot> TagsHTML <template> TagHTML <shadow> Tag (Obsolete)HTML <center> TagHTML <font> TagHTML <big> TagHTML <strike> TagHTML <tt> TagHTML <acronym> TagHTML <applet> TagHTML <frame> TagHTML <frameset> TagHTML <noframes> TagHTML <marquee> TagHTML <blink> TagHTML <s> TagHTML <var> TagHTML <kbd> TagHTML <samp> TagHTML <code> TagHTML <dfn> TagHTML <div> TagHTML <span> TagHTML Comment TagHTML <data> TagHTML Ruby Annotations: <ruby>, <rt> and <rp>HTML <svg> TagHTML <basefont> Tag
  1. Home
  2. /
  3. Tutorials
  4. /
  5. HTML Tutorial
  6. /
  7. HTML <i> Tag

HTML Tags

HTML <i> Tag

The <i> tag in HTML is used to display text in italic style.
Unlike <em>, which emphasizes text semantically, <i> is generally used for stylistic purposes such as foreign words, technical terms, or titles of works.
It is an inline element.

Syntax

html

<i>Italic text here</i>

Attributes

AttributeDescription
classAssigns one or more class names for styling.
idAssigns a unique identifier to the element.
styleAdds inline CSS styles to customize appearance.
titleProvides additional information as a tooltip.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>I Tag Example</title>
  <style>
    .italic-text {
      color: #2c3e50;
      font-style: italic;
      background-color: #f0f8ff;
      padding: 2px 4px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>HTML <i> Tag Example</h1>
  <p>
    This is an example of <i class="italic-text" id="foreign-word" title="Italicized Text">italic text</i> in a paragraph.
  </p>
  <p>
    Example: The Latin phrase <i>Carpe diem</i> means "Seize the day."
  </p>
</body>
</html>

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

The <i> tag displays text in italic style for stylistic purposes without semantic emphasis.

Notes

  • <i> is an inline element and does not start a new line.
  • It is best used for technical terms, foreign words, or titles rather than emphasis.
  • For semantic emphasis, use <em> instead of <i>.
  • CSS can further style <i> text with color, background, or font size.

Conclusion

The <i> tag is a stylistic tag used to italicize text in HTML.
It provides visual distinction without implying importance, making it ideal for stylistic purposes like foreign words or technical terms.

PreviousHTML <strong> TagNextHTML <em> Tag