How do i write three headings in the same line

Question

what should i write to make all the headings display in the same line in the webpage..
i need answer for html ..plz not in css I'm a beginner..

Answer 1

There's probably cleaner solution for your headings question...

But what sort of heading tag? The <header> tag of html5, or the <h1>, <h2>, ... <h6> tags?
For the <h1> tag, you must avoid have many and limit to one... So, the solution to place multiple blocks elements in on line, is to embed them in another container, where the <header> tag could advantageously be used to semantically organize your page:

<header id="my_header">
<div>
<h2>ELEMENT 1</h2>
</div>
<div>
<h2>ELEMENT 2</h2>
</div>
<div>
<h2>ELEMENT 1</h2>
</div>
</header>

With at least these css rules:

#my_header {
display:table;
margin:auto; /* if you want header be center in it's parent */
}
#my_header div {
display:table-cell;
}

Another advantage of "display:table-cell;" is that you can vertically center the content... ( which is hard to obtain else )
Obviously, you could put css inline instead as separate ( with "style" attribut ), but it's not a good practice ;)

Well also, it's not the only way to do: if you're purist, you must have a "display:table-row;" element embeding the "display:table-cell;"s... and conversly if uou don't, you can have only on container like the <header>, but bypass the <div> and directly define your contents as cells ( the <h2> tags in my example ), but it's not very usefull if your content is more than a few words ( think it can be complex html tree ).

For the question about "<p style:"float: left ; margin-right:30px >" you must correct it as indicated by cheeze ( "style=" and not "style:" ), but be carefull with the floating elements: they are not very easy to control ;) Don't you want to post your code, so we can advise you in your global html? ( make it public if you have it already in the code playground, so we can examine it more easily than paste it in a post...

Answer 2

Well so, the basics are to make a grid with <table><tr><td> structure ( old bad practice, but usefull for understand ) for making a three column layout:

<table>
<tr>
<td>
<!-- CONTENT OF COLUMN LEFT -->
<h1>RICHIE RICH</h1>
<p>seems like ur born with a golden spoon</p>
</td>
<td>
<!-- CONTENT OF COLUMN CENTER -->
<h1>MeDIUM MAC</h1>
<p>nor single screen or multiplex</p>
</td>
<td>
<!-- CONTENT OF COLUMN RIGHT -->
<h1>OLD JEANS</h1>
<p>did u check ur old jeans yet</p>
</td>
</tr>
</table>

According to your needs, you can decide to manage your table width many rows:

<table>
<tr>
<td>
<h1>RICHIE RICH</h1>
</td>
<td>
<h1>MeDIUM MAC</h1>
</td>
<td>
<h1>OLD JEANS</h1>
</td>
</tr>
<tr>
<td>
<p>seems like ur born with a golden spoon</p>
</td>
<td>
<p>nor single screen or multiplex</p>
</td>
<td>
<p>did u check ur old jeans yet</p>
</td>
</tr>
</table>

And to be more "semantic compliant", your first row being a title row, you can use specials forms of the <table> structure ( look at references in the web for the <th> tag -- special cell tag for heading cells and/or <thead> <tbody> <tfoot>, special container for row... )

For continue, let me explain why it's bad practice to make layout with <table> structure: for being good compliant to html specification, you must be semantically logical... and the <table> element was design for create "real" tables ( which visually are table ), not for layout. But in the early years, before css, we don't have many choices, and a lot of web site have used this trick... But today, we can avoid to use it, use a more semantically appropriate html tag, and set his css property "display" to be treated as you want, independently of your semantic page description... So, with my previous post, I guess you understand and can refactor your code... else ask for what you want clarify ;)

Answer 3

use style="float: left ; margin-right: 30px" see if it works

Answer 4

display:"inline" put this inside the heading tag.

Answer 5

<h1 style="display: inline"> ftfy

Answer 6

like <h should i write here >

Answer 7

yes

Answer 8

ok thanks for the answer...

Answer 9

ok what if I want them in the same line side by side ..
like this
HOW ARE. YOU
if all the three are headings

Answer 10

write display inline in all of the heading tags

Answer 11

thanks it works..
ok now if I have a paragraph under it should I write
<p style:"float: left ; margin-right:30px >

Answer 12

that float thing is working like align=left function only

Answer 13

its not making them display side by side

Answer 14

<html>
<head>
<title>DAYS BACK THEN</title>
</head>
<body>
<h1>RICHIE RICH</h1>
<p>seems like ur born with a golden spoon</p>
<h1>MeDIUM MAC</h1>
<p>nor single screen or multiplex</p>
<h1>OLD JEANS</h1>
<p>did u check ur old jeans yet</p>
</body>
</html>
...
ok i just want all of those headings to be displayed side by side in a line so what do i do...for that