HTML Basics

It's easy to format HTML with simple tags like <strong> for Bold, <em> for Italics or <small> for notations.

HTML provides basic text formatting, and each browser will apply standard text styles. These styles can be customised further using cascading stylesheets (CSS).


Bold

There’s two ways to make text bold using HTML.

Both have the same effect on normal web browser rendering engines, however are rendered differently for visually impaired and older mobile phones.

<b>Visual style for text, with a heavier font weight.
<strong>Semantic description of how the text should be understood, perfect for screen readers and other devices for visually impaired. On some older mobile phones, this may be displayed with an underline.
<!DOCTYPE html> 
<html> 
<head> 
    <title>Make it strong</title> 
</head> 
<body> 

    <!--Normal-->
    <p>This text is normal.</p> 

    <!--Bold-->
    <p><b>This text is rendered bold.</b></p> 

    <!--Strong-->    
    <p><strong>This text is strong, usually rendered bold.</strong></p> 

</body> 
</html> 

Emphasis

Similarly, there’s two ways to give text emphasis using HTML.

<i>Italicise – Visual style for text, with a sloping typeface.
<em>Emphasis – semantic description of how the text should be understood, perfect for screen readers and other devices for visually impaired.
<!DOCTYPE html> 
<html> 
<head> 
    <title>Give it emphasis</title> 
</head> 
<body> 

    <!--Normal-->
    <p>This text is normal.</p> 

    <!--Italic-->
    <p><i>This text is rendered italicised.</i></p> 

    <!--Emphasis-->    
    <p><em>This is emphasised, usually rendered italicised.</em></p> 

</body> 
</html> 

Small

Any text that should be displayed smaller, should use the <small> tag.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Make it smaller</title> 
</head> 
<body> 

    <!--Normal-->
    <p>This text is normal.</p> 

    <!--Smaller-->
    <p><small>This text is rendered smaller.</small></p> 

</body> 
</html> 
Upload file