To make text italic, put the i tag before the text and the closing i tag after it. You can also use the CSS rule font-style: italic. Both work in every browser.
Italic text with the i tag
Put the opening tag before the text and the closing tag after it.
<i>Some text</i>This shows up as Some text in italics. The tag is short, and every browser understands it.
Italic text with CSS
You can also set italics in your style sheet. Add this rule.
.your-css {
font-style: italic;
}Then wrap the text in a tag that uses the rule. Every element with that class now shows in italics.
Use the class in your HTML
This is how the page uses the CSS rule above.
<div class="your-css">Some text</div>If you change the rule once, every italic part changes with it. That saves time on a large site.
The i tag and the em tag
HTML has two tags that look the same on screen. The <em> tag marks a word you stress when you read the sentence aloud. Screen readers can pass that stress on to visitors who cannot see the page.
The <i> tag only changes the look. A good web designer uses it for book titles, foreign words and technical terms. Use <em> for words you want stressed.
The CSS rule is the better choice when many parts of your site share one style. A tag is the better choice for a single word in one sentence.
What to do if the italics do not show
First, check that you closed the tag. A missing closing tag can turn the rest of the page italic. Look for the slash in the closing tag.
Next, check your CSS. A later rule can set font-style: normal; and cancel your italics. Also check the class name. A small typo means the rule never applies.
Some fonts have no true italic style. The browser then slants the letters for you. The result is fine for most pages.
Italics in headings and links
You can use italics inside a heading, but keep it short. Links are already underlined or colored, so italics add little there.
If you only want to change one word, use a small tag around it rather than a new class.
Remove italics when you do not want them
Sometimes text turns italic by default, such as a quote or an address block. To turn it off, use font-style: normal; in your CSS. That rule cancels the slant.
Test the change on your phone as well as your computer. Small screens can make slanted text harder to read.
Use italics with care
Use italics sparingly. A whole paragraph in italics is hard to read on a screen. We write plain, useful text first and add italics only where they help you read.
A common mistake is to use italics for emphasis everywhere. When everything is stressed, nothing stands out. Pick one or two words per paragraph at most.
Do you want a site that looks right without coding? Our Omaha web design team builds a new website for $300 in 3 to 5 days. That includes up to 5 pages and a contact page.
In WordPress, you can press the italic button in the editor toolbar. It adds the tags for you. If you want help with your pages, call us at 402-813-4034 or use our contact page.
AboutRod and Tami Atwood
Rod and Tami Atwood and other Websnoogie contributors write the Websnoogie blog. Rod has built websites since 2004 and founded Websnoogie, LLC in Omaha in 2012. Tami is co-owner, content editor and billing expert. Call us at 402-813-4034 or write to staff@websnoogie.com.
