Tutorials - HTML - Basic Formatting

By now, you are probably wondering how you can add some more formatting to your pages. HTML provides a lot of tags which will help you add formatting within your text. You can make text bold, italic, superscript, subscript and more. These tags are all simple tags which open and close around the section of the content you would like to add formatting to. These tags should be used sparingly; if you want to add formatting across a large area of content we would recommend waiting until you have completed the CSS tutorials, and using these CSS to style large sections.

This is an example of <b>bold</b> text. <br />
This is an example of <i>italic</i> text. <br />
This is an example of <code>code</code> text. <br />
This is an example of <sup>superscript</sup> text. <br />
This is an example of <sub>subscript</sub> text. <br />
This is an example of <del>strikethrough</del> ("deleted") text. <br />
This is an example of <em>emphasized</em> text. <br />
This is an example of <strong>strong</strong> text. <br />

This is an example of bold text.
This is an example of italic text.
This is an example of code text.
This is an example of ^superscript text.
This is an example of _subscript text.
This is an example of ~~strikethrough~~ ("deleted") text.
This is an example of emphasized text.
This is an example of strong text.

What's the difference between italic and emphasized, bold and strong?

The  and  tags are purely presentational, and (should) only affect the presentation of your content on the screen. They have no semantic meaning in the HTML specification. In contract,  and  are designed to provide "semantic meaning" to the content they surround. This means that accessibility devices (such as screen-readers for the blind) should act differently when they encounter a  or  element, but should not make any changes when they encounter a  or  element.

Which should I use?

Which to use is completely up to you. If you expect your content to be commonly accessed by people using accessibility devices, and your formatting actually adds meaning to the pages (section markers, definitions etc.) you should use  and , but remember to use them sparingly to ensure people's screen readers don't shout at them. On the other hand, if your formatting is purely for styling purposes and doesn't add anything to the page beyond aesthetics, you should stuck with  and  tags.

What is the br tag?

Check out our next tutorial on line breaks to understand the   tag used in the example above.

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.