MY CARTHow to Apply Italics in HTML – Instructions
How to Apply Italics in HTML: Video
This video lesson, titled “Emphasizing Text (Bold and Italic),” shows how to bold text in HTML and also how to apply italics in HTML using CSS. This video lesson is from our complete HTML5 and CSS3 training, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.”
Overview of How to Apply Italics in HTML
How to Apply Italics in HTML Using CSS
This tutorial shows you how to apply italics in HTML. To apply italics in HTML, you should use a CSS style rule and the “font-style” property. You can apply the CSS style using either inline, internal, or external CSS, as needed, although inline is usually not recommended. The “font-style” property is also dependent on the “font-family” CSS property that is currently set, as the fonts to italicize must have italics available. However, if they don’t, you can also attempt to style the fonts in italics using the oblique value.
The font-style CSS property uses the text values of “italic,” “oblique,” or “normal.” To apply italics to fonts that have an italic variation, use the italic value. To simulate the appearance of italics for fonts that don’t have an italic variation, you can use the oblique value. The oblique value attempts to slant fonts without a defined italic variation. To specify a normal font face, instead, use the normal value.
To apply italics in HTML using CSS, place your insertion mark cursor at the location in the external, internal, or inline CSS style where you want to add the font-style property. Then type the property name of font-style. Then type a colon symbol. Finally, type either the text value “italic” if the font-family to italicize has italics available or type “oblique” if the font-family to italicize doesn’t have italics available.
The following examples show you how to apply italics in HTML by applying the font-style property as an inline CSS style to the paragraph tag and the span tag. The paragraph tag example uses the font-style “italic” text value. The span example uses the font-style “oblique” text value.
| Property: | font-style |
| Value: | Either “italic,” “oblique,” or “normal” |
| Example 1: | <p style = “font-family:sans-serif; font-style:italic”>This is a sans-serif font paragraph with italics applied.</p> |
| Example 2: | <p style = “font-family:monospace, monospace;”>This is a sentence in a monospace font paragraph with <span style = “font-style:oblique”> italics </span> applied to a single word.</p> |
| Result 1: |
This is a sans-serif font paragraph with italics applied. |
| Result 2: |
This is a sentence in a monospace font paragraph with italics applied to a single word. |
A picture showing how to apply italics in HTML using an inline CSS style.
How to Apply Italics in HTML Using the Italic Tag
Alternatively, you can use the older HTML italic tags of <i> and </i> to denote italic text in HTML, which most web browsers still interpret correctly. Technically, this tag is now called the idiomatic text tag. In HTML5, you can use the <i> and </i> tag set to show offset text within normal text. For example, you could use this to show a technical name, foreign language idiom, or thought within a normal sentence.
To apply italics using the italic tag in HTML, type the paragraph text. Then type the tag <i> where you want to begin the italicized text. Next, type the text to italicize. Then type the tag </i> where you want the italics to stop. Then continue typing the normal sentence text. The following example shows an example of using the older italic tags in HTML to note the scientific name of a plant.
| Start Tag: | <i> |
| End Tag: | </i> |
| Example: | <p style = “font-family:sans-serif;”>The scientific name of the dandelion is <i>Taraxacum officinale</i>.</p> |
| Result: |
The scientific name of the dandelion is Taraxacum officinale. |
How to Apply Italics in HTML Using the Emphasis Tag
Alternatively, to emphasize the text to italicize in HTML, it is better to use the emphasis tag set of <em> and </em>. These tags apply the visual italic style but also indicate to web browsers to stress the importance of the text. Screen readers emphasize the text indicated by the emphasis tags when reading it aloud.
To apply italics using the emphasis tag in HTML, type the paragraph text. Then type the tag <em> where you want to begin the emphasized text. Next, type the text to emphasize. Then type the tag </em> where you want the emphasis to stop. Then continue typing the normal sentence text. The following example shows how to use the emphasis tag to show the person speaking the sentence emphasized the word “do” when saying it aloud.
| Start Tag: | <em> |
| End Tag: | </em> |
| Example: | <p style = “font-family:sans-serif;”>What <em>do</em> you want?</p> |
| Result: |
What do you want? |
Instructions on How to Apply Italics in HTML
Instructions on How to Apply Italics in HTML Using CSS:
- To apply italics in HTML using CSS, place your insertion mark cursor at the location in the external, internal, or inline CSS style where you want to add the font-style property.
- Then type the property name of font-style.
- Then type a colon symbol.
- Finally, type either the text value “italic” if the font-family to italicize has italics available or type “oblique” if the font-family to italicize doesn’t have italics available.
Instructions on How to Apply Italics in HTML Using the Italic Tag:
- Alternatively, to apply italics using the italic tag in HTML, type the paragraph text.
- Then type the tag <i> where you want to begin the italicized text.
- Type the text to italicize.
- Then type the tag </i> where you want the italics to stop.
- Then continue typing the normal sentence text.
Instructions on How to Apply Italics in HTML Using the Emphasis Tag:
- To apply italics using the emphasis tag in HTML, type the paragraph text.
- Then type the tag <em> where you want to begin the emphasized text.
- Next, type the text to emphasize.
- Then type the tag </em> where you want the emphasis to stop.
- Then continue typing the normal sentence text.
