Text Formatting in HTML

Photo by Valery Sysoev on Unsplash

Text Formatting in HTML

Babatunde Daramola's photo
Babatunde Daramola
·

2 min read

Table of contents

You may want to do some basic formatting in your document without the use of CSS.

Bold and Italic Text

<body>
    <p>This is <strong>bold</strong> text.</p>
    <p>This is <em>italic</em> text.</p>
</body>

  • <strong>: Represents strong importance or seriousness, typically displayed as bold.

  • <em>: Represents emphasized text, typically displayed as italic.

Underline Text

<body>
    <p>This is <u>underlined</u> text.</p>
</body>

<u>: Represents underlined text.

Strikethrough Text:

<body>
    <p>This text is <s>strikethrough</s>.</p>
</body>
  • <s>: Represents strikethrough text.

Superscript and Subscript:

<body>

    <p>This is <sup>superscript</sup> text.</p>
    <p>This is <sub>subscript</sub> text.</p>

</body>

  • <sup>: Represents superscript text.

  • <sub>: Represents subscript text.

Marked Text:

<body>
    <p>This <mark>text</mark> is marked.</p>
</body>
  • <mark>: Represents text that should be marked or highlighted.

Quotations:

<body>
    <p>He said, <q>This is a short quotation.</q></p>
    <p>This is a <blockquote>block quotation</blockquote> in a paragraph.</p>
</body>

  • <q>: Represents a short inline quotation.

  • <blockquote>: Represents a block-level quotation.

Line Breaks

<body>
<p>This is a bunch of text, <br/> words after br will break to a new line.</p>
</body>

<br>: Represents a line break, creating a new line within the text.

Comments

Comments are not visible on the webpage but can help add notes to your code.

<body>
    <!-- This is a comment. Comments are not displayed in the browser. -->
    <p>This is a paragraph with a comment.</p>
</body>

Almost all of the above formatting can be achieved with CSS but it is good that you know it in HTML, we will talk more about formatting in a CSS tutorial post

HTML5HTMLWeb Development