In this tutorial, we will cover everything you need to know about HTML text formatting as a beginner. .
Headings <h1> – <h6>
HTML headings starts from <h1> to <h6>. In HTML that got a difference of size of headings from <h1> to <h6> which is from the biggest text size to the smaller size. The h is an acronym for headline. It’s usually used for creating headings of the web page.
<h1>This is h1.</h1>
<h2>This is h2.</h2>
<h3>This is h3.</h3>
<h4>This is h4.</h4>
<h5>This is h5.</h5>
<h6>This is h6.</h6>Paragraph <p>
By default, If you multiple paragraph next to another paragraph, you will see there will have some margin in from the next <p> element. When we want to create a paragraph, we use <p> tag.
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the first paragraph.</p>Break line <br>
You can also move the text to the next line without create a new paragraph. We can use <br> to break the line.
<p>This is the first paragraph and I would like the next text after this in next line<br>Aha, I'm in next line. What is after two lines of this? we can use multiple br tag. <br><br><br>Did you see that? Please try to run the script too to see the difference.</p>Horizontal Rule <hr>
If you want to break line with a horizontal line. Use the horizontal rule <hr>, it will display a horizontal line with a thematic break of an HTML page to divide or separate the document sections.
<h1>Title 1</h1>
<p>This is paragraph for title 1</p>
<hr>
<h1>Title 1</h1>
<p>This is paragraph for title 2.</p>Bold Text <b> <strong>
To bold the text, we use <b> and <strong>. Both methods will works, but we use it in difference scenario.
<b>: Using <b> element to highlight and bold the important text without indicating its important.
<strong>: While the <strong> element is to highlight and bold to the content by defining its important text.
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is bold.</strong></p>Italic Text <i> <em> <cite>
There are a couple ways to italic a text. You can use any of <i>, <em> or <cite> to italic text. All of them will works.
<p>Paragraph</p>
<p><i>Paragraph</i></p>
<p><em>Paragraph</em></p>
<p><cite>Paragraph</cite></p>Superscript <sup> and Subscript <sub>
If you are working on mathematic formula or any things related to science. You might need to use this the superscript and subscript to display your text. Feel free to test run the code.
<p>a<sup>2</sup> + b<sup>2</sup> = ?</p>
<p>H<sub>2</sub>O</p>Others
There are some other HTML tags you might need to know and you might have seen on many other websites.
<mark>: Highlighted the text.<del>: Deleted text.<ins>: Inserted text.
<p>Do not forget to visit <mark>Jorcus.com</mark> today.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>