Site /

How To Center Text In HTML

September 1, 2020 at 7:08 am By

Formatting and styling is an important step towards making a well-structured website. While CSS is generally used to style a webpage, HTML also provides a lot of options for formatting.

Formatting tags in HTML are of two types:

  • Physical tag: used for text styling i.e. to change the appearance of text
  • Logical tag: this is a semantic tag used to give meaning to different parts of the text.

For example, <b>, <i>, <u> are all physical tags and <em>, <strong> are logical tags.

<b> tag is used to make the text bold. Similarly <i> and <u> tags are used to make any text italic and underlined respectively.

On the other hand, <em> tag is used for emphasized text and the text is usually displayed as italic. <strong> tag is similar to <em> tag. It also emphasizes text but displays it as bold.

“Along with strongly encouraging semantic (meaningful) markup, the HTML5 specification strongly discourages non-meaningful markup “, says html.com.

We just learned some basic formatting tags in HTML. Now let us see some other formatting styles in HTML.

In this tutorial, we will learn about how to center text in HTML? Further in the tutorial, we will also see how to change text color in HTML.

Until recently, HTML used to use <center> tag to center text. However, it no longer uses <center> tag to center-align text in its version 5. The alignment of the text in HTML5 can be achieved in two different ways.

First Method

We can use style as an attribute along with the text which contains string that has to be aligned. Remember we are still using the CSS feature to align our text. The example code below shows how β€˜style’ is used inside the <p> tag. To align on right or left we can simply replace β€˜center’ in text-align: center with left/right.

<!DOCTYPE html>
	<html>
	   <head>
	      <title> How to centre text in HTML </title>
	   </head>
	
	   <body>
	      <h1> colour text in HTML </h1>
	      <p style="text-align:center;"> Learn HTML </p>
	   </body>
	</html>

Output

Second Method

The other way is similar but it defines the h1 and p tag earlier which is a preferable method once you start using CSS along.

This can be achieved by using the style tag inside HTML. Dive into the example code below to understand further:

<html>
   <head>
      <style>
      h1 {text-align: center;}
      p {text-align: center;}
      </style>
   </head>
   <body>
      <h1> How to center text in HTML </h1>
      <p> Center text in HTML </p>
   </body>
</html>

Now that you’ve understood how styling works in HTML, you can imagine what the output for the above code will be.

So we learned how to center text in HTML. Now let us take a look at how to change text color.

How To Change Text Color In HTML

Similar to the above example, the scope of style can be further expanded to color the text. Let us take an example:

<h2 style="color:blue"> Oceans are blue </h2>
<h3 style="color:yellow">  Yellow is my favourite colour </h3>

Output

Oceans are blue

Yellow is my favourite colour

How To Center Align & Change The Colour Of Text

Now, to get both the desired results we just need to club both the style functionality without using style twice. ‘Text-align’ as well as ‘color’ format can be used together with a single style command. Check the following code:

<p style="text-align:center;color:red;"> Center align with red text </p>

You can try it yourself to see the result.

Conclusion

In this tutorial, we saw how to center text in HTML and how to change text color. These are some simple examples that can be learned even by a novice web developer. It is interesting to note that you can also create custom tags in HTML.

To learn how to center an image in HTML, visit our previous blog. Subscribe to our blog to get more such tutorials!

You can also see some tutorials in CSS such as:

Creating Simple and Interactive Pricing Tables in CSS

15 New Awesome Creative CSS Animations

7 Tips For Replacing The Font Tag