In this tutorial we will show you the solution of how to put space in HTML, in between words space we can give easily when typing but in between html form elements like input, buttons and also sometimes we need more space in contents for good look on webpage.
We have more options in html for spacing here we can see some examples.
Let see below what are the predefined codes available for spacing in html with step by step guide.
Step By Step Guide On How To Put Space In HTML :-
For spacing we have two type of options, using html entities and CSS. Html space entities are , and .
- Non-Breaking Space and it create space as same as space bar.
- character entity used to denote ‘en’ space which means half point size of the current font.
- character entity used to denote ‘em’ space which means equal point size of the current font.
<!DOCTYPE html>
<html>
<head>
<title>Adding Space in Html</title>
<style>
.txt{
text-indent: 6em;
}
</style>
</head>
<body>
<h3>Here we see two types of Spacing</h3>
<ul>
<li>Internal CSS</li>
<li>Using HTML</li>
</ul>
<br>
<br>
<h3>Internal CSS</h3>
<p class="txt">This paragraph showing text indent space</p>
<br>
<h3>Using HTML</h3>
<h4>This paragraph contain three types of space </h4>
<p>
it shows you single space size<br>
it shows you two space size<br>
it shows you four space size<br>
</p>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Already we know <h1> to <h6> are header tags in html. Here we used <h3>,<h4> for headings. <ul></ul> tag defines unordered list <li></li> used for listing items, images or line of text. We listed type of spaces.
- <br> tags used for leaves line without texts. <p> tags used for describe paragraph and this line used text-intent space in CSS by id “txt”. In css we have letter space, word space properties also for space in between characters and words. Those values we can use in px, % and em.
- In HTML we used three types of entities with examples. Those examples will show you the space size difference between them.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on how to put space in HTML helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion we are know about spacing in html by some examples. In websites, document or anything related texts we know the use of space it will gives great looks of output.
We can use it easily but handling with care is important because outcome is depends on your way of handling.
About Amruta
