How To Structure Text In Html Like A Pro

HTML’s most important job is to display text in the manner the developer/designer intended. The text that needs to be displayed must be structured by using different tags because the web browser itself isn’t able to comprehend what exactly is a list, paragraph or heading.

Let’s start from basic: Heading and Paragraphs

Every article, letter and whatever you read has a heading, even this blog. Here’s how you can add headings:

To change a simple and plain text to a heading, all you need to do is use one of these tags:

<h1> BOOK A FREE TRIAL </h1>

<h2> BOOK A FREE TRIAL </h2>

<h3> BOOK A FREE TRIAL </h3>

<h4> BOOK A FREE TRIAL </h4>

<h5> BOOK A FREE TRIAL </h5>

<h6> BOOK A FREE TRIAL </h6>

Each one of these tags represents different level of text hierarchy, h1 being the highest and h6 the smallest.

Make a bold move

Highlight the most important of your text by making it a little bold. Use this tag to do the same:

<b> YOUR TEXT HERE </b>

Output: YOUR TEXT HERE

Emphasis your content using italics:

To italicize your text you can either use <em> or <i>.

<i> Italic /<i>

<em> Italic <em>

Output:

Italic

Make a list:

In this blog we are listing different types of tag to structure text in html, if you want do make a list using html, here’s how you can do it:

Ordered List:

Ordered lists are those in which the order of the elements are important, example: directions to your school. For ordered list we have to use <ol> </ol> and for every list item use <li> </li>

<ol>

<li>Turn right</li>

<li>Turn left at 200 meters</li>

<li>The school is on your right, 300 meters up the road</li>

</ol>

Output:

1. Turn right

2. Turn left at 200 meters

3. The school is on your right, 300 meters up the road

Unordered List:

In this type of list, the order in which the items are written is not relevant. For unordered list we use <ul> </ul> instead of <ol>.

<ul>

<li>Rice</li>

<li>Egg</li>

<li>Butter</li>

<li>Milk</li>

</ul>

Output:

• Rice

• Egg

• Butter

• Milk