How to Add Style to HTML Code

By Nikhil Abraham

HTML has basic capabilities to style content. Here, you learn how to do some basic text formatting in HTML, such as adding text characteristics like boldface and how to add super- and subscript.

Highlighting with bold, italics, underline, and strikethrough

HTML allows for basic text styling using the following elements:

  • strong marks important text, which the browser displays as bold.

  • em marks emphasized text, which the browser displays as italicized.

  • u marks text as underlined.

  • del marks deleted text, which the browser displays as strikethrough.

The underline element is not typically used for text because it can lead to confusion. Hyperlinks, after all, are underlined by default.

To use these elements, start with the element’s opening tag, followed by the affected text, and then a closing tag, as follows:

<element name>Affected text</element name>

Some examples:

image0.jpg

Grace Hopper, <strong> a US Navy rear admiral </strong>, popularized the term "debugging."
Bill Gates co-founded a company called <em>Microsoft</em>.
Stuart Russell and Peter Norvig wrote a book called <u>Artificial Intelligence: A Modern Approach</u>.
Mark Zuckerberg created a website called <del>Nosebook</del> Facebook.
Steve Jobs co-founded a company called <del><em>Peach</em></del> <em>Apple</em>

You can apply multiple effects to text by using multiple HTML tags. Always close the most recently opened tag first and then the next most recently used tag. For an example, look at the last line of code and the tags applied to the word Peach.

Raising and lowering text with superscript and subscript

Reference works like Wikipedia, and technical papers often use superscript for footnotes and subscript for chemical names. To apply these styles, use the elements

  • sup for text marked as superscript

  • sub for text marked as subscript

To use these elements, start with the element’s opening tag, followed by the affected text, and then a closing tag as follows:

<element name>Affected text</element name>

Two examples:

<p>The University of Pennsylvania announced to the public the first electronic general-purpose computer, named ENIAC, on February 14, 1946.<sup>1</sup></p>
<p>The Centers for Disease Control and Prevention recommends drinking several glasses of H<sub>2</sub>0 per day.</p>

When using the superscript element to mark footnotes, use an <a> anchor tag to link directly to the footnote so the reader can view the footnote easily.

image1.jpg