How to Display Side-by-Side Text in HTML
Table of Contents
Introduction
If you use the inline element, your text will normally be displayed side by side. Because the inline element displays your text in a single line and if you want to break it, use the <br> tag. But, if you use block-level elements, your text will be displayed line-by-line. You need to know what are the inline and block-level elements. In this article, I am going to tell you about the main inline and block-level elements and how to align the text side by side in HTML.
Inline Elements
Use inline elements to display your text side by side. It is the best way to display the align the text side by side in HTML. Because we do not need to do anything.
The commonly used Inline element in HTML tags are:
<a>, <b>, <button>, <i>, <img>, <input>, <label>, <script>, <span> and <strong>.
Block Level Elements
If you can use block-level elements your text will display only line-by-line not side-by-side. But we can align the text side by side using the CSS property for this element. And the Commonly used block-level elements in HTML Tags are:
<div>, <form>, <header>, <footer>, <h1>-<h6>, <li>, <ul>, <ol>, <p> and <table>.
How to align text side by side in HTML
The four easy ways to align text side by side in HTML. There are:
- Using Inline elements
- Display Property Method
- Float method
- Flex method
Using Inline elements:
In this method, I am using inline elements. This will automatically display your text side by side. In the below code I am using the <span> tag, it is one of the inline elements. If you do not know the inline elements, I have mentioned the important Inline elements above.
<html> <head> <title>Inline Element</title> </head> <body> <span>Hello Everyone</span> <span>Welcome To</span> <span>CSS Tutorial</span> </body> </html>
The resulting code will look like this:
Display Property Method
You can also set your text side-by-side using the block level element with the help of display: inline-block; style property. Let us see how to display text side-by-side using the display property in a CSS style. In the code below I have created three <H1> tags inside the <body> tag. Then in the style of these three H1 tags display : inline-block.
<html>
<head>
<title>Block-Level Element</title>
<style type="text/css">
h1{
display: inline-block;
}
</style>
</head>
<body>
<h1>1 Heading </h1>
<h1>2 Heading </h1>
<h1>3 Heading </h1>
</body>
</html>
The resulting code will look like this:
Float Method:
If you want to place text side by side using this float method, you must first create a class for your block element tag. I have created three block-level elements <p> tags in the code below and created a class for them. I have written the style for the <p> tag as display: flex. And the other three tags call the class name separately, float: left; I have written that in style.
<html>
<head>
<title>Float Method</title>
<style type="text/css">
p{
display: flex;
}
.s1{
float: left;
}
.s2{
float: left;
}
.s3{
float: left;
}
</style>
</head>
<body>
<p class="s1">1 Float column</p>
<p class="s2">2 Float column</p>
<p class="s3">3 Float column</p>
</body>
</html>
The resulting code will look like this:
Flex Method:
In this flexbox method, first I will create a <div> tag inside the body. And create Three <H1>tag inside the Div element in HTML. After creating HTML elements, I have styling for <div> tag element is display: flex.
<!DOCTYPE html>
<html>
<head>
<title>Float Method</title>
<style type="text/css">
div{
display: flex;
}
</style>
</head>
<body>
<div>
<h1 >1 Flexbox </h1>
<h1 >2 Flexbox </h1>
<h1 >3 Flexbox </h1>
</div>
</body>
</html>
The resulting code will look like this:
Conclusion
I hope you know by this article how to align text side by side in HTML. You can use the easy and necessary method in all these four ways. And if you have any doubts, let us know in the comments
